웹 프론트엔드 깊게 이해하기(29)
-
THIS 의 이해
대부분의 경우, this 의 값은 함수를 호출하는 방법에 의해 결정된다. 자바스크립트에서는 선언할 때 결정되는 것이 있고, 호출할 때 결정되는 것이 있는데, 선언할 때 결정되는 것은 '클로저'이고, 호출할 때 결정되는 것이 이 'this'이다. 이렇게 this가 맥락에 따라 달라질 수 있으므로, 호출되는 방법과 무관하게 this의 값을 정해버릴 수가 있는 것이 bind 메서드이다. (예제 코드) 결국 '어디서' 해당 this를 호출하는 함수를 실행했느냐가 중요해진다. whoAmI 메서드는 someone에서 실행하였고, myWhoAmI 는 전역에서 실행하였다. 그리고, 자바스크립트에서, 전역은 결국 window 객체 안이기에, 여기서 실행되는 함수들은 window 객체의 속성으로서, 간주된다. 따라서 so..
2020.10.22 -
클로저 & 스코프 체인
호출되는 변수나 함수명을 찾을 때, 들여다보는 영역이 바로 스코프이다. 자바스크립트는 함수 단위로 스코프가 생겨난다고 보면 된다. (물론 스코프만 따로 생성 할 수 있지만 그럴 이유는 없다) 즉, 함수가 2개 있으면 스코프도 2개 생기는 것이다. 스코프는 간단하게 변수 혹은 상수 명과 담긴 것이 짝지어진 표가 있다고 생각하면 된다. 함수는 호출되었을 때 가장 먼저 자신의 스코프 안에서 활용할 변수 혹은 상수들을 찾는다. 그리고 그 중 스코프 안에 없는 변수 혹은 상수가 있다면 상위 스코프에서 한번 더 찾고, 이를 찾을 때까지 상위로 옮겨가며 반복한다. 스코프끼리 상위, 하위 관계로 연결되어 있는 것이 스코프 체인이다. 스코프에서는 원칙이 있는데, 하위 스코프에서는 상위 스코프의 변수 혹은 상수에 접근할 ..
2020.10.22 -
크롬 개발자 도구를 사용한 성능 측정
www.youtube.com/watch?v=5fLW5Q5ODiE 이 글은 위의 영상을 기반으로 작성되었습니다. Lighthouse(audits) 사용하기 되도록이면 시크릿 모드에서 성능 측정을 수행하십시오. 그렇지 않으면 확장 프로그램의 간섭을 받을 수도 있습니다. 페이지 로딩을 개선하기 위한 작업에 착수할 때, 항상 'audit(심사)' 부터 시작하십시오. 지금은 lighthouse 로 이름이 바뀌었습니다. 스로틀링(throttling) : 영어 단어에서 유래한 말로, 원어는 목을 조르는 행위를 말한다. 즉, 인간의 목을 조르는 것도 스로틀링이다. 이 점에서 유래하여 무언가의 출력을 조절하는 뜻도 가지고 있는데, 기계장치에 연결된 액체나 기체가 흐르는 관에 달린 밸브를 조절하는 광경을 생각해보면 적절한..
2020.10.22 -
리액트 전반에 대한 이해
리액트는 어떤 과정을 통해 렌더링을 수행하는가? 전통적인 방식 자바스크립트를 이용한 전통적인 렌더링 방식은 단순했습니다.문자열로 HTML 을 생성하고 그 안에 Data 가 들어갈 부분을 지정하는 것이었죠. 이렇게 Data 와 HTML 이 조합된 문자열을 브라우저가 받아내서 렌더링하도록 만드는 것이었습니다. 하지만 이 전통적인 방식의 문제점은 조금의 변경사항을 반영하고 싶어도 브라우저가 전체를 다시 렌더링하도록 만들 수밖에 없다는 점과 실제로 렌더링 결과물이 바뀌지 않았음에도 새로운 데이터를 받았다는 이유만으로 렌더링이 다시 일어나는 비효율이 발생하는 문제가 있었죠. 리액트의 방식 리액트는 이러한 비효율을 줄이기 위해 JSX라는 새로운 파일 형식을 도입했습니다. JSX를 통해 데이터가 들어가야 할 부분을 ..
2020.10.22 -
내가 모르는 것
프론트엔드 개발자 활동을 하다보면, 아주 가끔 다른 사람들이 제가 왠만한 디자인은 구현할 줄 알고, 요청 사항대로 거의 모든 부분을 해결해주기 때문에 제가 뛰어난 개발자라고 말해주시는 고마운 분들을 만납니다. 하지만 저는 그런 말을 들을 때마다 마음 한쪽이 불편합니다. 사실은, 저는 '구현'만 할줄 알지 그 내부 원리는 제대로 안다고 말할 수 있는 것이 매우 적기 때문입니다. 물론 당장 개발 하는데 그런 이론들이 직접적으로 도움이 될지는 잘 모릅니다. 주된 코드들이 정해진 프레임워크 양식이나 API들을 따라서 작성되는 프론트엔드 개발의 특성상, 이런 내용들을 안다고 내 코드들이 조금이라도 달라지려나 하는 의구심도 드는 것은 사실입니다. 하지만, 어디가서 제가 '프론트엔드 개발자'라고 당당하게 말할 수 있..
2020.07.16