전체 글

리액트 유치원이 개원했습니다. (유투브 채널개설)

https://www.youtube.com/watch?v=Cs5kst_q-80 제가 워낙 지식이나 경험을 풀어서 전달하는 일을 좋아하기도 하고, '최고의 공부방법은 남에게 가르치는것이다'라는 신념 아래 제가 공부한 내용을 강의형식으로 만들어 유투브에 올리기 시작했습니다. 저의 전달력이 형편없지는 않으니 누군가에게는 도움이 되리라고 믿습니다. 물론 그 깊이는 정말 얕지만, 깊고 양질의 내용을 전달할 수 있을때까지 열심히 해봐야겠죠. 앞으로 해보고싶은 컨텐츠는 많은데요, 근본있는 자바스크립트 주니어개발자 기술면접시리즈 가능하다면 프론트앤드 개발자 취준일기 등등이 있습니다. 욕심이 많네요ㅎㅎ 요즘엔 정말 '도전'이라는게 뭔지 가슴깊게 느끼고 있습니다. 이 길의 끝에 저는 어디에 닿아있을까요. 프론트앤드 개발자..

18주차 회고 - 옛남친이 그립다. 자스야!

리액트로 보낸 한 주 리액트에 빠져 산 한 주였다. strict모드, 수많은 훅들, 라우터 등등 정신없이 쳐보고, 정리하고, 심지어 영상까지 올렸다. 근데 배우면 배울수록 전남친자스이 그립더라.. 약간 순정의 미학이랄까? 리액트를 하다가 부족한 자스개념이 나올때는 더더욱 그랬다. 역시 기본이 잘 쌓여있어야 하는군. 아직 자스에서 모르는게 너무 많다!(아는게 없다고 말하는게 더 맞으려나?) useContext를 사용해서 props없이 하위컴포넌트들이 상위컴포넌트의 데이터 받는법 배웠는데, 전역적으로 관리되는 애들은 이 방법을 사용하면 좋다고 한다. 근데 다크모드를 만들어보면서 아 이렇게까지 해야한다고? 이런 생각이 들었다. 그냥 바닐라자스에서는 그냥 클래스 하나 똑딱이 만들어주면 되는데.. 흠. 몇가지 의..

useState Lazy initialization - 게으른 초기화가 대체 뭔소리야? (+유투브 영상 업로드)

해당 주제로 유트브에 영상을 올렸습니다! 체키라웃. 완전쉬움 https://youtu.be/Z_eWhLpnhbk 결론: 콜백은 괜히 콜백이 아니다~! 사건의 발단 useState를 배우며 Lazy initialization이라는 개념이 나왔다. 근데 당최 뭔 소리인지 이해가 되지 않았다. 콜백을 사용하면 초깃값을 한번만 실행해서 좋다는건 알겠는데... 왜 그런건지가 명확히 이해가 안되었다. 그래서 내가 이해하려고 정리해봤다. 사실 이해하니까 별거아니다! useState Lazy initialization 만약 함수컴포넌트 안 아무데나 'console.log'를 넣는다면 이후에 화면이 재렌더링되는 어떤 일을 할 때마다(버튼을 클릭했다 치자) 콘솔로그가 출력되는 것을 발견할 수 있다. 이는 당연한 결과인데,..

면접관님: 메세지 큐와 이벤트루프가 뭔지 아시나요? (+ 유투브)

네. 압니다. https://youtu.be/8AevEF4hOg8 나의 언어로 풀어본 최종 답변 이는 자바스크립트 동작원리에 관련이 있다고 말할 수 있습니다. 흔히 자바스크립트는 single thread라고 말하는데요, 이는 우리의 코드를 실행시켜주는 Stack이라는 공간이 단 하나뿐이고, 코드를 한번에 한줄씩만 순차적으로 실행시킨다는 것을 의미합니다. 이를 ‘동기적'이라고 표현하기도 하죠. 그런데 setTimeout같은 코드를 내 코드의 중간에 넣었다고 가정했을 때, 뒷사람들 다 기다리게 하면서 setTimeout함수가 실행되기를 기다릴 수는 없잖아요? 그래서 잠깐 대기실과 같은 역할을 하는 web APIs로 보내게 됩니다. 그곳에서 기다리다가 설정한 시간이 다 지나게 되면 바로 Stack에서 실행될 ..

면접관님: 브라우저 렌더링 과정을 설명해보시겠어요?(+유투브)

https://youtu.be/_87sAy_SsxQ 나의 언어로 풀어본 최종 답변 우선 사용자가 URL을 입력하면 브라우저 엔진은 쿠키나 세션에 원하는 데이터가 캐싱이 되어있는지 확인합니다. 만약 요청한 정보가 있으면 렌더링 엔진에게 바로 보냅니다. 반면 요청한 정보가 없다며 도메인네임시스템(DNS)에 찾아가서 IP주소를 요청하여 받은 IP주소의 서버를 찾아가서 자료를 요청하고 데이터를 받아와 렌더링 엔진에게 전달합니다. 렌더링 엔진은 HTML문서를 파싱하여 돔트리를 구축하고, CSS 파일과 함께 모든 스타일 요소를 파싱하여 CSSOM 트리를 만듭니다. 그러다가 JS를 만나게 되면, 작업을 중지하고 JS Engine에게 제어 권한을 넘겨 JS Engine이 script를 파싱합니다. DOM트리와 CSSO..