2022.08.18(Thurs)
[TIL] Day78
[SEB FE] Day80
☑️ Section4 기술 면접 Q&A
📎 JavaScript
🤷♀️ Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.
🎙 Hoisting은 선언 전에 변수 사용을 허용하는 것으로, 변수 선언과 초기화 분리 후, 선언만 코드 최상단으로 옮기는 것을 말하며 var, 함수 선언시 발생합니다. 반면, TDZ는 변수 선언과 변수 초기화 사이의 변수에 접근할 수 없는 지점을 뜻합니다. 즉, 선언 전에 변수 사용을 허용하지 않으며, const, let, class 선언시 발생합니다.
📎 브라우저 렌더링
🤷♀️ 브라우저 렌더링 방식에 대해 설명하세요.
🎙 사용자가 브라우저를 통해 웹 사이트에 접속을 하면 브라우저는 먼저 서버로부터 필요한 리소스 다운받습니다. 렌더링 엔진은 전달받은 HTML 문서를 파싱해서 DOM Tree와 CSSOM Tree를 생성하고 이를 결합하여 Redner Tree를 구축합니다. 이 후, 레이아웃 과정을 통해 각 요소를 어디에 배치할지 결정하여 화면에 보여줍니다.
🤷♀️ 리플로우와 리페인트에 대해 설명하세요.
🎙 리플로우란 어떠한 웹 인터렉션을 통해 렌더링 과정의 레이아웃을 반복해 수행하는 것으로, 여기서 레이아웃이란 HTML 요소를 계산하여 브라우저 화면 어디에 배칠할지 결정하는 과정입니다. 다음으로, 리페인트란 계산된 픽셀 정보를 바탕으로 픽셀을 채워나가는 과정인 페인트 과정을 반복해 수행하는 것입니다.
🤷♀️ 반응형 웹은 무엇이고 장단점에 대해 설명하세요.
🎙 반응형 웹이란 하나의 소스 코드로 모든 화면에 최적화된 웹으로 디바이스 종류에 따라 웹페이지 크기를 자동으로 재조정 가능한 것을 말합니다. 이는 하나의 콘텐츠에 하나의 HTML 소스만 있기 때문에 하나의 소스만 수정하면 되므로 유지보수에 유리하며, 검색엔진 최적화에도 유리합니다. 그러나 읽어들어야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문에 사이트 속도가 저하되며, 웹브라우저 호환성 문제가 발생할 수 있습니다.
🤷♀️ 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?
🎙 call back이란 실행 중인 서브루틴을 저장하는 자료 구조입니다.
📎 번들링과 웹팩
🤷♀️ 번들링은 왜 필요한가요?
🎙 번들링은 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서 여러 파일을 하나의 파일로 합쳐 사용합니다.
📎 React
🤷♀️ Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
🎙 Virtual DOM은 실제 DOM의 가벼운 사본 느낌으로 실제 DOM 객체에 접근하여 화면 내용을 직접 변경하는 것이 아니라 바뀐 부분만 적용함으로 실제 DOM에 비해 훨씬 속도가 빠릅니다.
🤷♀️ Class Component와 Function Component의 차이점이 무엇인가요?
🎙 클래스 컴포넌트는 상속을 받아서 사용해야 하며, 컴포넌트 사이에서 상태 로직 재사용이 어려운 반면, 함수 컴포넌트는 클래스 컴포넌트에 비해 훨씬 더 코드가 직관적이고, 보기 쉽습니다.
🤷♀️ React Hook의 사용 규칙에 대해 설명하세요.
🎙 React Hook은 React 함수 최상위에서만 호출해야 합니다. 또한, 함수형 컴포넌트나 Custom Hook이 아닌 일반 JS 함수 안에서 호출해선 안되며, 오직 React 함수 내에서만 사용되어야 한다.
📎 운영체제
🤷♀️ Node.js는 싱글 스레드인가요?
🎙 Node.js는 비동기 이벤트 기반으로 처리하기 때문에 싱글 스레드라고 볼 수 있습니다.
🤷♀️ Event Loop에 대해 설명할 수 있나요?
🎙 이벤트 루프란 콜스택이 다 비워지만 콜백 큐에 존재하는 함수를 하나씩 콜스택으로 옮기는 역할을 하는 것을 말합니다.
🤷♀️ 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?
🎙 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것으로 Java, C#, Javascript 언어가 가비지 컬렉션을 갖습니다.
🤷♀️ JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는지에 대해 설명할 수 있나요?
📎 자료구조
🤷♀️ Stack과 Queue의 차이점은 무엇인가요?
🎙 stack은 데이터 입출력 방향이 같아 먼저 들어간 데이터를 제일 나중에 나오는 후입선출 구조이며, Queue는 2개의 입출력 방향을 가지고 있어 먼저 들어간 데이터가 제일 처음에 나오는 선입선출 구조입니다.
🤷♀️ Tree와 Graph의 차이점은 무엇인가요?
🎙 트리는 노드 사이에 하나의 경로만 가능하여 비순환 구조이며, 그래프는 노드 사이에 둘 이상의 경로가 가능하여 순환이 가능합니다.
🤷♀️ 이진 탐색 방법에 대해 설명할 수 있나요?
🎙 정렬된 리스트에서 검색 범위를 줄여 나가면서 검색 값을 찾는 알고리즘입니다. 배열의 중간값을 가져와서 이를 검색 값과 비교하는 방식으로 이루어집니다.
☑️ Section4 KPT 회고
✨ Keep
- Github 잔디 매일매일 🌱🌿
ㄴ 부트캠프 시작하고 지금까지 매일매일 하나라도 커밋하려고 노오력함 😵💫
- TIL 기록 ✍️
ㄴ 요즘들어 매일매일은 작성하진 못했지만 꾸준히 작성함 아마도..
- 토이플젝 조금씩 진행함 🧸
✨ Problem
- 불규칙적인 수면 패턴
ㄴ 결국 수업 끝까지 8시 반 전에 일어나본 적이 있던가,,
저녁 먹구 자고 새벽에 또 깨어있고 늦게 일어나고 반복..
- 알고리즘 문제 풀기 정체기..
ㄴ 최근 알고리즘 문제를 거의 안 풀다 싶히 했다 🥲
- 수업 내용 제대로 이해 못하고 넘어간 적이 꽤 있다.. ㅎ.ㅎ
- 딥다이브 책, 리액트 강의, 알고리즘 강의 거의 공부 안함,,
ㄴ TIL 작성하구 토이플젝 삽질하다 보면 시간 뚝딱이라 추가적인 학습을 많이 하지 못한듯 싶다..
✨ Try
👉 우선순위 반영
1. 프로젝트에 매진 ~!
2. React, 알고리즘 강의 틈틈이 듣기
3. 매일 알고리즘 1문제씩 풀기
4. 딥다이브 책 조금씩 틈틈이 읽기
✨ Comment ✍️
섹센3에서 끙끙댔던게 엊그제 같은데 벌써 섹션4가 끝나고 프로젝트 시기가 다가왔다.
아직도 나는 말하는 감자일 뿐인데 과연 프로젝트를 잘 마칠 수 있을까나 🥲
이번 섹션때는 뭔가 으샤으샤 분위기가 잘 나오지 않아서 해야할 공부를 계속 내일, 내일, 내일로 계속 미뤘던 것 같다,..
좋은 팀원분들 덕분에 조그만한 토이플젝을 하면서 많은 것을 배울 수 있었구, 나의 형편없는 실력을 체크할 수 있었던,,,ㅋ.ㅋ
이제 프로젝트를 본격적으로 들어가면서 추가적인 학습도 꾸준히 해야겠다! 파이팅팅 💪
