Section 4 회고
JavaScript
Hoisting과 Temporal Dead Zone(일시적 사각지대)이 어떻게 연관되어 있는지 설명하세요
: let, const로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다. 따라서 스코프에 변수를 등록하지만, 초기화 단계는 변수 선언문 코드에 도달했을때 이루어지기 때문에 초기화 이전에 변수에 접근하려고 하면 참조 에러(Reference Error)가 발생합니다. 그 결과 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는데, 이를 Temporal Dead Zone이라고 합니다.
브라우저 렌더링
브라우저 렌더링 방식에 대해 설명하세요.
:사용자가 브라우저를 통해 웹 사이트에 접속하면브라우저는 서버로부터 웹사이트에 필요한 리소스를 다운받습니다.
렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를, 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만듣 후,만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축합니다.
레이아웃 과정을 통해 각 요소를 어디에 배치할지 결정한 후 UI 백엔드에서 Render 트리를 화면에 그리기 시작합니다. 이 과정을 paint라고 합니다.
리플로우와 리페인트에 대해 설명하세요.
:렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 합니다.
반응형 웹은 무엇이고 장단점에 대해 설명하세요.
:여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트
장점: 효율적인 유지보수, 검색엔진(SEO) 최적화 유리
단점: 사이트의 속도 저하, 웹브라우저 호환성 문제
자바스크립트 엔진의 콜 스택이 무엇인지 설명할 수 있나요?
:프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터 구조
번들링과 웹팩
번들링은 왜 필요한가요?
:1. 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다.
2. 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소합니다.
3. 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기가 어렵습니다. 결국 그대로 공백을 되돌려서 코딩합니다.
4. 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해가 발생했습니다.
React
Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
:JavaScript 객체로 이루어진 가상의 DOM 트리를 사용하여 실제 DOM 조작을 최소화하고 성능을 최적화하는 기술
Class Component와 Function Component의 차이점이 무엇인가요?
Class Component:state, lifeCycle 관련 기능사용 가능, 메모리 자원을 함수형 컴포넌트보다 조금 더 사용, 임의 메서드를 정의할 수 있다.
Function Component: state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨], 컴포넌트 선언이 편하다.
React Hook의 사용 규칙에 대해 설명하세요.
: 리액트 함수의 최상위에서만 호출해야 합니다, 오직 리액트 함수 내에서만 사용되어야 합니다
운영체제
Node.js는 싱글 스레드인가요?
:node.js는 싱글 스레드로 동작하면서 동시에 여러 요청을 처리할 수 있어야한다.
JavaScript는 싱글 스레드입니다. 어떻게 싱글 스레드 방식으로 비동기 호출을 할 수 있는 지에 대해 설명할 수 있나요?
:자바스크립트는 단일 스레드 프로그래밍 언어이기 때문에 한 번에 하나의 task밖에 실행할 수 없지만 Web API,Callback Queue, Event Loop 의 역할로 인해 멀티 스레드처럼 보이는 것이다.
Event Loop에 대해 설명할 수 있나요?
:Event Loop는 Call Stack과 Callback Queue를 반복적으로 관찰하다가 Call Stack이 비어있는 상태가 되면 Callback Queue의 콜백 함수를 옮기는 역할을 한다
가비지 컬렉션이란 무엇이며, 가비지 컬렉션을 가진 언어에는 무엇이 있나요?
:프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것으로 자바, C#, 자바스크립트 등이 가지고 있다.
자료구조
Stack과 Queue의 차이점은 무엇인가요?
:스택은, top 을 통해서만 삽입, 삭제가 이루어졌었다. 하지만 큐는 삽입, 삭제가 다른 방향에서 이루어진다. 이때, 삭제 연산만 수행되는 곳을 프론트(front), 삽입 연산만 수행되는 곳을 리어(rear)라고 한다.
Tree와 Graph의 차이점은 무엇인가요?
:
이진 탐색 방법에 대해 설명할 수 있나요?
:순서에 따라 정렬된 자료에서 찾는 내용이 없으면 위치에 따라 앞쪽을 찾거나 뒤쪽을 찾고, 찾을 때까지 그걸 반복하는 것
