8 posts
2022년 11월부터 2023년 5월까지 대략 6개월 정도 진행했던 스터디에 대한 내용에 대해서 정리하고, Coding Challenges를 소개하기 위하여 작성하였다. Coding Challenge는 The Coding Train이라는 JavaScript, Simulation, ML 등 다양한 주제에 대해서 비디오 튜토리얼을 만들어 주는 유튜브의 동영상 시리즈 중 하나이다. 필자가 참여하고 있는 스터디 팀에서 이전 스터디 이후에 다음 주제를 탐색하던 중 Wave Function Collapse라는 키워드로 탐색하다 우연히 발견하여
Papa Parse를 사용해 대용량의 CSV 파일을 열어서 작업을 수행을 하는데 파일이 너무 커서 파일을 읽다가 JavaScript heap out of memory 에러로 죽어버리는 문제가 생겼습니다. 그래서 다음과 같이 stream을 전달하고 async하게 시도해 보았지만, 그래도 JavaScript heap out of memory를 동일한 오류가 발생했습니다. 그래서 Papa Parse의 API 문서에서 이 문제를 해결할 마땅한 방법이 보이지 않아 다른 CSV 라이브러리를 찾아보았습니다. csvparse를 보다 보니 대용량
JS에서 생성자 함수를 통해 new 호출할 때, 명시적으로 객체를 반환한다면 해당 객체로 재정의(override)하게 된다. 위 코드의 결과를 결과를 보면 변수 a에 할당된 객체는 A 생성자 함수에서 반환한 {name:"A2", prop: 456} 객체이다. 만약 위 코드와 같이 생성자 함수 A를 상속하는 생성자 함수 B가 있을때, 변수 b에 할당된 객체는 생성자 함수 A에서 반환된 객체와 관계없이 {name:"B1", prop:123}이다. 생성자 함수 A에서 생성될 때 name:"A2"와 prop:123가 할당되고, 생성자 함수
offsetHeight와 clientHeight의 차이점을 찾아보다 MSDN에서 관련된 이미지들을 보았다. offsetHeight와 clientHeight 뿐만 아니라 엘리먼트에 대한 치수와 위치에 대해 확인할 수 있다. 추가적으로 offsetHeight와 clientHeight 같이 엘리먼트의 위치를 가져와서 계산해야하는 경우에는 Reflow를 피하기 위해 캐시를 사용해야 한다. P.S. <iframe width="100%" height="300" src="//jsfiddle.net/y8Y32/25/embedded/" allow
들어가며 많은 이미지가 있고 페이지에 보이지도 않는 이미지를 미리 받아둘 필요가 없는 경우가 생겼다. 이를 위해 이미지를 나중에 로드하는 방법을 찾아보았고 그 방법을 기록하고자 한다. Vanilla 예제 Vanilla라고 이름을 붙이긴 했지만 이 글에서 이야기하고자 하는 방법들 모두 Vanilla를 쓰기 때문에, 다음에 이야기할 방법과 달리 새로운 API를 사용하지 않고 작성하였기에 Vanilla를 붙였음을 먼저 언급한다. 이 방법에서는 scroll을 추적하여 lazy load할 이미지들 중 보이는 이미지들의 src에 주소를 할
들어가며 슬라이드와 같은 방식으로 다음 이미지를 순차적으로 불러와 보여줄 때, 미리 이미지를 불러와 이미지 전환간에 깜박임없이 부드럽게 이미지를 전환하고자 하였다. 이를 위해 이미지를 미리 로드하는 두가지 방법을 기록하고자 한다. JavsScript 예제 이미지들을 순환하며 임시 이미지 앨리먼트에 넣어 미리 로드한 후에 해당 엘리먼트를 제거하는 방식으로 구현한다. JavsScript로 이미지들을 동적으로 미리 로드하고자 한다면 좋은 선택인 것 같다. CSS 예제 CSS에 미리 로드할 이미지들을 등록해서 로드한다. 미리 로드해
들어가며 배열을 단순하게 상단과 같이 초기화하곤 했었는데 아래와 같은 코드 리뷰를 받았다. 리뷰를 받고 대충 "A에 대한 모든 값을 날려주니 깔끔하게 지워지겠네."라고 생각이 들었지만, 문든 배열의 초기화에 대해 제대로 찾아본 적은 없어 검색을 해보았다. 검색을 해보니 Stack Overflow에 Philippe Leybaert가 How do I empty an array in JavaScript?라는 질문에 좋은 답변을 한 것이 있어 정리해본다. 이 글에서는 배열에 대한 4가지의 초기화 방법에 대해 제시하고 비교한다. 방법 1
TL;DR 클로저(Closuer)는 객체를 통해서 접근하는 것이 아니라, 함수(Function)를 통해서 접근한다. 들어가기 앞서 틈틈히 읽고 있는 Secrets of the JavaScript Ninja, Second Edition에서 클로저와 스코프에 대한 챕터에서 재미있는 내용을 보아서 이 글을 작성한다. 이 글에서는 클로저에 대한 설명은 하지 않을 것이다. 클로저를 가진 객체 위와 같이 클로저를 가진 객체가 있다. counter 인스턴스의 스코프에 대해 보면 위와 같다. Counter 생성자를 실행하면 새로운 렉시컬 환