기술면접
Section 1에서 작성했던 면접에 대한 자세를 다시 복습하고 준비해보자
JavaScript
- Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.
브라우저 렌더링
- 브라우저 렌더링 방식에 대해 설명하세요.
- 리플로우와 리페인트에 대해 설명하세요.
- 반응형 웹은 무엇이고 장단점에 대해 설명하세요.
- 자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?
번들링과 웹팩
- 번들링은 왜 필요한가요?
React
- Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
- Class Component와 Function Component의 차이점이 무엇인가요?
- React Hook의 사용 규칙에 대해 설명하세요.
운영체제
- Node.js는 싱글 스레드인가요?
- JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?
- Event Loop에 대해 설명할 수 있나요?
- 가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?
자료구조
- Stack과 Queue의 차이점은 무엇인가요?
- Tree와 Graph의 차이점은 무엇인가요?
- 이진 탐색 방법에 대해 설명할 수 있나요?
답변
브라우저 렌더링 방식에 대해 설명해보세요.
렌더링은 컴퓨터 프로그램을 통해 모델에서 이미지를 생성하는 프로세스입니다.
웹 브라우저의 경우 웹 페이지의 콘텐츠를 사용자의 장치에 표시하는 프로세스를 의미합니다.
첫번째, 사용자가 웹 브라우저에 URL을 입력하면 브라우저는 URL과 연결된 서버에 요청을 보냅니다. 그런 다음 서버는 웹 사이트에 대한 HTML 코드를 브라우저로 전송하여 응답합니다.
두번째, 브라우저는 HTML 코드를 읽고 이를 사용하여 웹 사이트의 DOM(문서 개체 모델)을 구성하고, 브라우저는 이를 사용하여 웹 페이지를 렌더링하는 방법을 결정합니다.
마지막으로 브라우저는 렌더링된 페이지를 사용하여 사용자 화면에 표시될 픽셀을 생성합니다.
추가 내용
- DOM은 텍스트, 이미지 및 링크와 같은 웹 페이지의 다양한 요소를 트리 모양으로 표현한 것.
- CSS 코드에 지정된 스타일을 DOM의 여러 요소에 적용하고 지정된 레이아웃에 따라 페이지를 배치하는 작업은 두번째에서 실행.
- 페이지의 벡터 기반 레이아웃을 픽셀 그리드로 변환하는 것과 관련된 페이지 래스터화는 마지막에서 일어남.
자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?
JS에서 콜 스택은 현재 실행 중인 코드의 실행 컨텍스트를 저장하는 데 사용되는 데이터 구조이고, JS 코드 실행에서 중요한 역할을 하는 JS 엔진의 기본 부분입니다.
콜 스택은 후입선출-LIFO(Last In, First Out) 데이터 구조로, 함수가 호출되면 실행 컨텍스트가 스택 맨 위부터 차례로 추가되고(push) 함수가 반환되면 실행 컨텍스트가 스택 맨 위부터 차례로 제거됩니다(pop).
이 프로세스는 코드가 실행될 때 다시 시작되며 새 함수 호출이 스택 맨 위에 추가되고 완료된 함수 호출이 스택 맨 위에서 제거됩니다.
즉, 콜 스택은 JS 엔진이 코드가 실행될 때 코드의 실행 컨텍스트를 추적할 수 있도록 해주기 때문에 중요합니다. 이는 실행 흐름을 적절하게 관리하고 오류 처리 및 디버깅 기능을 제공하기 위해 필요합니다.
추가
- 스택: 가장 최근의 함수 호출이 항상 스택의 맨 위에 있음을 의미
번들링은 왜 필요한가요?
번들링은 웹 사이트의 성능, 로딩 시간 및 유지 관리성을 개선하는 데 도움이 되는 웹 개발의 중요한 기술이기 때문입니다.
첫째로 여러 파일을 하나의 번들로 결합하면 네트워크를 통해 전송해야 하는 총 데이터 양을 줄일 수 있으므로 웹 사이트의 성능을 향상시킬 수 있습니다.
둘째로 브라우저가 웹 페이지를 로드할 때 페이지를 렌더링하는 데 필요한 각 개별 파일에 대해 별도의 네트워크 요청을 만들어야 합니다. 각 요청을 전송, 처리 및 응답해야 하므로 상당한 오버헤드가 추가될 수 있습니다. 이러한 파일을 함께 묶음으로써 브라우저가 생성해야 하는 네트워크 요청 수를 줄여 페이지 로딩 시간을 개선할 수 있습니다.
셋째, 여러 파일을 단일 번들로 결합하여 코드베이스의 복잡성을 줄이고 관리하기 쉽게 만들 수 있습니다. 이렇게 하면 많은 개별 파일 대신 단일 번들만 처리하면 되므로 웹 사이트를 더 쉽게 업데이트하고 유지 관리할 수 있습니다.
추가 내용
- 번들링은 여러 파일을 단일 파일로 결합하는 프로세스를 의미합니다. 이는 일반적으로 웹 페이지를 로드하기 위해 브라우저가 만들어야 하는 네트워크 요청 수를 줄이기 위해 웹 개발에서 사용됩니다.
- 오버헤드(overhead)는 어떤 처리를 하기 위해 들어가는 간접적인 처리 시간 · 메모리 등
이력서 참고
예시 1: 최**님 포트폴리오(https://cdg-portfolio.com/ )
예시 2: 최**님 포트폴리오(https://resume.chayeoi.site/)
예시 3: 서**님 포트폴리오(https://realdeveloper.pro/kijepark)
예시 4: 심**님 포트폴리오(https://www.dasong.dev/)
미리캔버스 포트폴리오 PPT 양식
Section 4 회고
소감 : 구현에서 한 걸음
섹션4에선 구현 뿐만 아니라 서버, DB의 기본적인 지식과 배포하는 법을 배우고, CRUD 기능을 가진 Todo List를 만들었다. 되게 힘들었는데 재밌었다.
1. 목표 회고
섹션3에서 컴포넌트를 구현해가자는 마음이 굴뚝같았다. 근데 이번에 아주 그 마음을 불태워버렸다. 진짜 재밌었고 더더욱 나만의 습관을 가져 개발-서버-배포 프로세스를 나에 맞게 배워가야겠다. 그렇게 하고 새 기술이나 추가 보완을 해나가는 방식으로 목표를 잡고 싶다.
그리고 플스 갓오브워 라그나로크 깨기 있었는데 다 깨고 남은 맵 요소, 퀘스트들 깨고 있다 ㅋㅋㅋ 그래도 재밌음
2. 유지 / 습관
Good
- 명상, 메모 : 전에는 그냥 마음이 편안해져 했다면 이제 뇌를 비운다는 느낌을 잡혔다. 뇌를 비워야 그 다음 내가 생각하는 방식에 대해 더 잘 파악할 수 있으니까. 또 메모를 하는게 뇌를 비우면서도 나의 생각 단계를 잘 파악할 수 있는 수단이란 걸 알았다. 구글킵아 고마워!
- 잔디 심기 : 매일매일 하는중! 잔디민수야! 고마워!
- 복습, 기록 : 저번 회고에서 복습, 기록을 Good으로 지정했는데 지금도 유지 중이긴 하다.
Bad
- 서버 지식과 그 흐름을 이제 좀 파악했는데 이제 DB, Deploy를 배우며 더 복잡해졌다.. 아휴 진짜
- 운동은 그나마 요즘 좀 했다. 근데 글쓰기는 안늘어~
3. 결론 : 시도할 것들
- 게임하기
- 갓오브워를 깼고, 스트레이라는 게임이 있다. 이거 깨야돼!
- 하지만 그냥 하는 것이 아닌 보상 차원에서 할 것이다.
- 2시간 복습 후 2시간 게임
- 휴식 방식
- 머리를 비우기, 명상, 메모하기
- 독서하기
- 행복하기, 내 유일함을 사랑하기
- 실력 부족
- DB와 서버를 자동으로 해주는 Firebase 배워보기
- 백엔드, DB 지식 다시 복습하기
- 알고리즘 공부
