치춘짱베리굿나이스

클로저 스코프, 렉시컬 스코프 먼저 렉시컬 스코프와 스코프에 관해 읽고 오자 내가 아는 클로저는 이 캐릭터 뿐이다 자바스크립트에서의 클로저란 무엇일까… 설명 MDN에서의 설명 A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). 클로저는 함수와 함수가 선언된 어휘적 환경 (Lexical Scope) 의 조합이다. MDN에 따르면 그렇단다 이게 무슨 말일까? 예시 function foo() { const str = "Hello World!"; function bar() { // 함수 bar의 선언부 console...

UnhandledPromiseRejection [UnhandledPromiseRejection: 이 오류는 async 함수 내에서 catch 블록 없이 예외가 던져졌거나, promise가 .catch() 체인을 통해 핸들되지 않은 채 reject되었을 때 발생합니다. Promise는 다음의 이유로 reject 되었습니다: "window is not initialized"] 필자가 프로젝트에 Next.js 를 써서 그런진 모르겠지만 빌드를 할 때마다 window 객체가 존재하지 않을 때의 예외처리가 제대로 되어있지 않다는!! 오류를 겪었다 서버사이드 렌더링 시에는 당연히 window 객체가 존재하지 않겠죠? 문제는 검색해본 대로 try-catch문을 여기저기 달아봐도 오류 핸들링이 되지 않는 것이었다… 해..

인덱스 시그니쳐 interface Record { [key: string]: string; } 이러한 코드를 언젠가 본 적이 있을 것이다 나도 종종 썼는데 이게 인덱스 시그니쳐인 줄은 몰랐었다 인덱스 시그니쳐란 { [key: T]: U } 위와 같은 형식으로, T와 U 모두 타입을 의미한다 인덱스 시그니쳐는 키 (Key) 와 값 (Value) 의 타입을 정확히 명시해야 하는 경우이면서 객체가 형식일 때 사용되는 타입이다 { 'chichoon': { site: 'blog.chichoon.com', name: 'chichoon', }, 'nongdamgom': { blog: 'nagano-market.co.jp', name: 'nongdamgom', } 'babo': { blog: 'babo.com', na..

이벤트 버블링, 캡쳐링 다른 과제 얘기하다가 나왔는데 사실 내가 이벤트 버블링과 캡쳐링에 관해 확실히 짚고 넘어가질 않아가지고 약간 얼떨떨했던 기억이… 이번 기회에 좀 되짚고 가려고 한다 세 가지 이벤트 흐름 이벤트 흐름이란? 이벤트가 발생하였을 때 DOM 트리에서 이를 수신하는 세 가지 단계를 뜻한다 1. 캡쳐링 단계 window (최상위 요소) 부터 이벤트가 발생한 위치 (target) 까지 이벤트가 전파되는 단계이다 이벤트는 최상위 요소에서 시작해 아래로 전파된다 2. 타깃 단계 이벤트가 실제 target 으로 전달되는 단계이다 캡쳐링 단계에서 최상위부터 전파되던 이벤트는 타깃에 도착한 뒤 실행된다 3. 버블링 단계 이벤트가 target 으로부터 상위 요소로 전파되는 단계이다 타깃 단계에서 실행된 ..

스코프와 렉시컬 스코프 원래 클로저, 커링도 같이 적으려고 했다가 분량조절 실패로 렉시컬 스코프 부분을 따로 분리했다 스코프 특정 변수에 접근할 수 있는 범위를 의미한다 스코프는 변수를 다른 변수와 구분할 수 있는 규칙이 되며, 같은 이름을 갖더라도 어느 스코프에 속해 있는지에 따라 변수를 구분한다 이름이 같더라도 변수가 속한 스코프에 따라 서로 다른 변수로 인식한다는 뜻이다 function foo() { let n = 2; // foo 스코프 } function bar() { let n = 3; // bar 스코프 } function baz() { let n = 4; // baz 스코프 } 위의 예시에서 foo, bar, baz 내의 변수 n은 이름이 모두 같아 언뜻 보면 식별이 불가능할 것 같지만, ..

[Violation] took 1000⬆️ms 이게 뭐지 앞에서 this 바인딩 문제를 해결하니 이번엔 이상한 경고가 출력된다 대충 이 핸들러 호출하고 종료되기까지 1016초 걸렸으니 왠만하면 비동기로 동작하게끔 하는 게 좋겠다 라는 의미이다 또한 이 경고는 숨길 수가 없다고 한다 원인은 경고 출력용 alert 함수 때문이었는데, alert로 출력된 경고 메시지의 ‘확인' 버튼을 눌러야 함수가 종료되었다고 판단하기 때문에 확인 버튼을 언제 누르냐에 따라 위의 경고 메시지의 시간이 달라진다 테스트해보니 3초 뒤에 클릭하면 대충 3초 조금 넘는 시간이 걸렸다고 나왔다 만약 경고 메시지의 확인 버튼을 10분 뒤에 누르면 아마 600,000ms 걸렸다고 나오지 않을까… alert 함수는 위의 함수 종료를 지연시..

이벤트 핸들러 this 오류 문제 클래스 안에 있는 메서드를 핸들러로 부착하니 클래스의 멤버 변수들을 찾지 못하는 상황이 발생했다 처음에는 메서드가 프라이빗 메서드라 그런 건가? 싶어서 이리저리 고쳐봤는데, 알고 보니 this가 클래스 인스턴스를 가리키지 않고 이벤트가 걸린 요소를 가리켜서 그런 것이었다 원인 https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener MDN 문서에 따르면 이벤트 수신기 (이벤트 핸들러) 의 this는 이벤트가 걸린 대상 요소를 가리키게 된다고 한다 (= e.currentTarget이 가리키는 요소와 같다) 디버깅하느라 별 짓을 다 했는데 이런 이유가 있었다 해결 DOM요소.addEventListe..

모듈과 모듈 번들러 이 글은 웹팩과 웹팩 설정 관련 정리 포스팅을 적기 위한 빌드업이다 모듈 모듈이란 특정 기능을 가진 작은 코드 단위로, 웹팩에서는 하나의 파일을 하나의 모듈로 부른다 계산기를 만든다고 하면, 덧셈을 담당하는 파일, 뺄셈을 담당하는 파일 등 세부 기능 단위로 파일을 분리해서 그 함수를 다른 파일에서 가져다 쓰게 되는데, 각각의 파일이 모듈이라고 할 수 있다 한 파일 내에는 같은 주제의 함수 여러 개가 존재하고, 이를 내보내면 다른 모듈에서 가져와 사용하는 식으로 큰 기능을 구현한다 자그마한 테스트용 스크립트 파일이나 간단한 파일 입출력 연산 정도면 파일 한개로 구현이 가능하겠지만, 프로젝트 규모가 커지다 보면 절대 하나의 파일에 모든 기능을 몰아넣을 수 없고, 설렁 넣는다 해도 한 파일..