대부분의 경우, this 의 값은 함수를 호출하는 방법에 의해 결정된다. 자바스크립트에서는 선언할 때 결정되는 것이 있고, 호출할 때 결정되는 것이 있는데, 선언할 때 결정되는 것은 '클로저'이고, 호출할 때 결정되는 것이 이 'this'이다. 이렇게 this가 맥락에 따라 달라질 수 있으므로, 호출되는 방법과 무관하게 this의 값을 정해버릴 수가 있는 것이 bind 메서드이다. (예제 코드) 결국 '어디서' 해당 this를 호출하는 함수를 실행했느냐가 중요해진다. whoAmI 메서드는 someone에서 실행하였고, myWhoAmI 는 전역에서 실행하였다. 그리고, 자바스크립트에서, 전역은 결국 window 객체 안이기에, 여기서 실행되는 함수들은 window 객체의 속성으로서, 간주된다. 따라서 so..

호출되는 변수나 함수명을 찾을 때, 들여다보는 영역이 바로 스코프이다. 자바스크립트는 함수 단위로 스코프가 생겨난다고 보면 된다. (물론 스코프만 따로 생성 할 수 있지만 그럴 이유는 없다) 즉, 함수가 2개 있으면 스코프도 2개 생기는 것이다. 스코프는 간단하게 변수 혹은 상수 명과 담긴 것이 짝지어진 표가 있다고 생각하면 된다. 함수는 호출되었을 때 가장 먼저 자신의 스코프 안에서 활용할 변수 혹은 상수들을 찾는다. 그리고 그 중 스코프 안에 없는 변수 혹은 상수가 있다면 상위 스코프에서 한번 더 찾고, 이를 찾을 때까지 상위로 옮겨가며 반복한다. 스코프끼리 상위, 하위 관계로 연결되어 있는 것이 스코프 체인이다. 스코프에서는 원칙이 있는데, 하위 스코프에서는 상위 스코프의 변수 혹은 상수에 접근할 ..

www.youtube.com/watch?v=5fLW5Q5ODiE 이 글은 위의 영상을 기반으로 작성되었습니다. Lighthouse(audits) 사용하기 되도록이면 시크릿 모드에서 성능 측정을 수행하십시오. 그렇지 않으면 확장 프로그램의 간섭을 받을 수도 있습니다. 페이지 로딩을 개선하기 위한 작업에 착수할 때, 항상 'audit(심사)' 부터 시작하십시오. 지금은 lighthouse 로 이름이 바뀌었습니다. 스로틀링(throttling) : 영어 단어에서 유래한 말로, 원어는 목을 조르는 행위를 말한다. 즉, 인간의 목을 조르는 것도 스로틀링이다. 이 점에서 유래하여 무언가의 출력을 조절하는 뜻도 가지고 있는데, 기계장치에 연결된 액체나 기체가 흐르는 관에 달린 밸브를 조절하는 광경을 생각해보면 적절한..

NPM 에 본인 패키지 등록 패키지는 다른 패키지에 대한 부품으로 사용되거나, 아예 그 패키지 자체가 완제품인 경우가 있습니다. 어떤 타입의 패키지이든, 다른 사람들에게 편리하게 해당 패키지를 사용할 수 있게 하려면 npm registry 에 등록해야 합니다. main 을 지정하면 해당 파일의 내용이 npm 패키지로 담길 것입니다. 이제 npm 패키지를 발행하려면 npm publish —access public (private은 유료)를 입력합니다. 한번 public 으로 지정 후엔 npm publish 만 하면 됩니다. 패키지를 업데이트한 후 다시 발행하려면 버전을 어느 정도이던간에 높여야 합니다. 기타 : NPM 을 활용한 명령행 프로그램 만들기 js 파일 내에서 process.argv 를 이용해서 ..

여러 파일들을 한데 모아놓은, 빌드의 타겟이 되는 경로의 파일을 '엔트리' 파일이라고 한다. 엔트리 파일을 통해 만들어낸 번들링 결과물이 저장되는 경로의 파일을 '아웃풋'이라고 한다. webpack.config.js 에 웹팩 번들링에 필요한 명령어의 설정들을 담을 수 있다. 여기 담으면 npx webpack 명령어 만으로 번들링을 진행할 수 있다. Webpack 모드 개발자 모드 배포 모드 아무것도 설정하지 않은 모드(기본값) 당연하지만, 웹팩의 설정들은 너무 많아서, 개발자가 일일히 모두를 설정하기에는 어려움이 많습니다. 그래서 웹팩은 '설정 모음'의 차원에서 모드를 지원합니다. 모드를 설정해주면 자동으로 그 모드에 해당되는 설정들이 적용되어 번들링이 처리됩니다. 설정 파일 자체를 webpack.con..

웹 컴포넌트를 제작하는데 사용하는 프레임워크이다. 스텐실을 사용하면 타입스크립트와 자바스크립트를 쓸 수 있으며 자동적인 폴리필 추가가 가능하다. 컴포넌트를 lazy 하게 로드할 수 있기 때문에 번들 사이즈를 줄여준다. DOM 의 리렌더링 효율을 극대화한다.