'나는 네이버 프론트엔드 개발자입니다'를 읽고

네카라쿠배~로 시작하는 개발자가 가기 좋은 대기업들에 당당히 합격해 다니고 있는 프론트엔드 선배 개발자들은 어떤 생각을 가지고 개발을 할까 하는 막연한 기대로 이 책을 구매했습니다.

2024.12.06 집 앞 할리스에서

 

총 8인의 네이버 프런트엔드 개발자분들이 자신의 경험과 중요하게 생각하는 부분들을 작성해주셨습니다.

프론트엔드 개발자부터 시작하신 분부터, 다른 분야에서 일하다 프론트엔드에 매력을 느껴 프론트엔드로 일하시게 된 분까지 모두 다양한 경험들을 가지고 계셨습니다.

이 책은 읽고 수많은 부분을 메모하며 한 챕터, 한 챕터 메모하며 읽는 것이 아닌 빠르게 읽으면서 기억하고 싶은 키워드를 짧게 기록하며 읽었습니다.

 

티슈에 메모한 나는 네이버 프론트엔드 개발자입니다 키워드

포스트잇이 없어 티슈에 기록한 키워드입니다.

• CS 기본기, 자바스크립트 기본기, 알고리즘 이해
• 테스트 코드 작성, 성능 최적화
• 오픈소스 기여
• 깊게 탐구해 본 영역, 가장 재미있게 진행해 본 프로젝트
• T자형 인재, 성장

분야로 나누자면 위와 같이 분류할 수 있을 것 같습니다.

위 키워드들은 일반적으로도 다 강조가 되는 부분이지만, 이것들이 왜 중요한지 현업에서는 어떻게 생각해 저 키워드들을 중요하게 바라보는지 알 수 있었습니다.

 

그 외로도 '나는 왜 프론트엔드 개발자가 되고 싶은가?'를 고민해보라는 이야기가 있었습니다.

요즘 스스로에 대한 왜?를 고민해보는 시간들이 늘어나는데 또 하나의 주제라 제 노트에 적어두고 고민의 흐름들을 적어나가봐야겠다고 생각해 적어두었습니다.

 

마지막으로는 책 내 코드가 나왔던 유일한 챕터에서는 자바스크립트 기본기 영역에서는 간단한 코드 예시로

React의 componentDidmount에 아래와 같은 코드를 실행시킨다면 각각 어떻게 출력될까? 질문이 있었습니다.

setTimeout(() => {console.log(this)}, 1000)
setTimeout(function(){console.log(this)}, 1000)

이 글을 읽으시는 분들도 가볍게 생각해보셔도 좋을 것 같아요!ㅎㅎ

면접을 위해 자바스크립트 개념을 줄줄 외우는 사람은 많지만 실제 코드를 보여주고 물어보면 코드에 눈싸움을 많이 한다는 글이 있었는데요. 제가 그런 경험이 많기 때문에 정말 공감되는 글이었습니다...!

 

제 추측은 화살표 함수의 this는 상위 스코프 setTimeout이 될 것 같고, 아래 일반 함수는 전역에서 실행되어서 window다. 였어요.

(답변은 GPT와 함께 해보았습니다. 참고하세요~!)

---

네, 추측이 거의 정확해요! 각각의 setTimeout 내에서 this의 동작을 자세히 살펴보겠습니다.

1. 화살표 함수:

setTimeout(() => {console.log(this)}, 1000);

• 화살표 함수는 this를 상위 스코프에서 상속받습니다.
• componentDidMount가 호출된 스코프에서의 this는 React 컴포넌트 인스턴스를 가리킵니다.
• 따라서, 이 경우 콘솔에는 React 컴포넌트 인스턴스가 출력됩니다.

---

2. 일반 함수:

setTimeout(function(){console.log(this)}, 1000);

• 일반 함수에서는 this는 호출되는 컨텍스트에 따라 달라집니다.
• setTimeout은 브라우저 환경에서 전역 컨텍스트에서 실행되므로, 이 함수 안의 this는 전역 객체를 가리킵니다.
  • 브라우저 환경에서 this는 window입니다.
  • (만약 strict mode가 적용되어 있다면, this는 undefined가 됩니다.)

---

결과 요약:

1. setTimeout(() => {console.log(this)}, 1000) → React 컴포넌트 인스턴스 출력
2. setTimeout(function(){console.log(this)}, 1000) → window 출력 (strict mode에서는 undefined)

 

추가적으로 알아두면 좋은 점:

React에서 일반 함수와 화살표 함수의 this가 다르게 동작하는 이유를 명확히 이해하려면, 아래 내용을 참고하면 좋습니다:

• 화살표 함수는 lexical this를 사용하며, 상위 스코프에서 this를 가져옵니다.
• 일반 함수는 dynamic this를 사용하며, 호출되는 컨텍스트에 따라 결정됩니다.

 

추가로 setTimeout의 일반 함수에서 this가 window로 출력되는 이유는 무엇일까요?

일반 함수의 this는 실행 컨텍스트(즉, 함수가 호출된 환경)에 따라 결정되기 때문입니다.

 

setTimeout에서 this가 window가 되는 이유:

1. 일반 함수의 this는 실행 컨텍스트에 따라 달라진다.
   • setTimeout은 브라우저에서 전역 객체(window)의 메서드로 호출됩니다.
   • 따라서, setTimeout 안에서 호출되는 일반 함수의 this는 window를 가리키게 됩니다.
   • 반대로, 화살표 함수는 상위 스코프의 this를 가져오기 때문에 React 컴포넌트 인스턴스를 유지합니다.
2. 브라우저의 동작:
   • 브라우저에서 setTimeout의 콜백 함수는 비동기 실행되며, 이때 호출 주체는 window입니다.
   • 그래서 일반 함수로 작성된 콜백에서는 this가 window를 가리키는 겁니다.

 

---

글을 마무리하며,

마음이 혼란한 날에는 마음이 가는 책 한권을 들고 집 앞 카페로 나와 혼자 생각하는 시간을 갖는 것이 혼란한 마음을 가라앉히는 아주 좋은 방법이라는 것을 또 한번 깨닫게되는 오늘입니다.

저도 언젠간 좋은 회사에서 일하며 제 경험을 나누게 되는 날이 오는 날을 상상해보며 글을 마칩니다.