# 기술면접 질문리스트

### Q1. 자기소개
- 김명원
- 개발을 독학으로 - 재미있는 공부 - 졸업작품으로 예약서비스 & 지도 서비스 사이드프로젝트 혼자서
- 한번 시작한 일은 대충하지 말고 끝까지 하는 것
- 지원한 업무에서도 꾸준히 해나가는 걸 보여주겠다
- 전공이 전자정보 공학 (임베디드쪽 - 웹개발을 독학으로 시작하셨다.)
- 김민주 B님
- 디자인팀 퍼블리싱이랑 디자인 같이 하고 계심
- 전공 : 디자인과 졸업하심
- 개발어떻게 진행 :
처음에는 ux 하다가 -> 퍼블리싱도 공부하다가 자바스크립트 독학 공부하게되었다.
- ux는 어떻게 공부 ??? 게임 UI공부하다가 웹 UX
> 개발이랑 디자인 퍼블리싱을 분리하고 있긴 함
> 자바스크립트 공부는 :: 인강으로 듣고있다??
- 왜 프론트엔드를 하고싶으신가요
- 작업을 하다보면, 경계가 모호한 작업이 있다.
- 작업을 넘기는 과정이 무력감
- 프론트엔드 개발이 경쟁력이 있다고 생각해서
- 프론트엔드가 무슨 일응ㄹ 한다고 생각하시나요
- 퍼블리싱이랑 뭔 차이가 있으
- 프레임워크나 라이브러리 같은 것을 사용해서 다양한 기능을 만들지 않을까 ???
- 프로모션 페이지에서 애니메이션이나 인터랙션을 구축
- 메인페이지 개선할 때, ui/ux 개선
- 마이페이지 만들 때 API 처음 연동해봄
- 쇼피파이 APi를 통해서 뭔가를 해보셨나요 ????
- 자바스크립트는 공부는 1년정도 된 것 같다.
- 가장 깊게 공부한 것이 무엇이냐
- 젠틀몬스터 웹 게임을 따라 만들어보는 것을 해보고 싶다
- 클래스 기반을 통해서 NPC,
- 장애물을 감지해서 움직이지 못하는 부분에서 많이 해맸다.
- 어떻게 해결하셨나요?
- 방향키 하나하나에다가 조건을 걸었다.
- 알고리즘 공부하고 있따.

------

### Q2. 호이스팅에대해 설명
자바스크립트에서는, 실행 컨텍스트 초기화 단계에 Context의 미리 변수가 저장 된 후에 코드가 실행되기 때문에 식별자 해결이 가능하여 undefined를 출력하거나, 함수 선언문의 경우는 초기화 단계에 미리 Function Object를 생성해두기 때문에 호출까지 가능하다. 이것을 JS의 Hoisting이라고 한다.

- 민주 : 호이스팅이 뭔지 대답함
- var는 되는데 let 과 const
- temporal dead zone

### Q2-2 호이스팅이 일어나는 원리 실행컨텍스트에 대한 설명
어떤 Scope로 엔진 컨트롤이 들어왔다면,(현재의 실행 컨텍스트가 Call Stack에 쌓인 후)
1. 코드를 한 바퀴 돌면서, 선언문을 해석한다.
- 함수 선언문은 초기화 단계에서 Function Object를 생성하여 Context에 저장한다.
2. 코드를 다시 한 바퀴 돌면서, 표현식을 처리한다.
- 모든 표현식은 메모리 공간이 할당되고 이름이 붙여진다. 값은 undefined로 Context에 저장된다.
3. 선언문과 표현식을 모두 처리했다면 코드를 한 줄씩 실행한다.
- book 함수는 선언문으로 이미 function Object가 현재 Scope에 존재하기 때문에 호출이 가능하다.

- 대답한다면 - let const가 호이스팅 되지 않는 것처럼 보이는 이유는 ?
- var와 let/const선언에 대한 범위의 차이 중 하나는 let/const가 Temporal Dead Zone에 의해 제약을 받는다는 것이다.
- var 키워드로 선언된 변수는 선언과 초기화가 동시에 진행되는데 (실행컨텍스트의 선언문 해석하는 단계에서)
- let,const 키워드로 선언된 변수는 선언 단계와 초기화 단계가 나누어서 진행됩니다.
- 스코프에 변수를 등록(선언단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어집니다

### Q3. 브라우저에서 비동기 작업이 일어나는 원리 (eventLoop)
Javascript는 Heap, CallStack, EventLoop, Callback Queue의 조합으로 일반적인 작업도 진행하고 비동기 작업도 진행한다.
브라우저가 제공하는 Web API를 살펴보자
코드를 살펴보면, 브라우저에 DOM, AJAX, timeout등에 대한 코드가 존재한다.
또한 브라우저가 EventLoop 그리고 Callback Queue를 들고 있다.

브라우저는 단순 런타임 이상을 의미한다. 브라우저는 setTimeout과 HTTP 요청과 같은 Web API를 지원한다.
즉 비동기적 작업을 브라우저가 대신하고, 비동기 작업이 끝나면 콜백함수를 JS엔진이 실행하게 된다.
1. JS Engine이 Wep API코드를 호출문을 만나면(비동기 함수가 호출되면), 다른 작업들과 똑같이 실행 컨텍스트를 만들고 Call Stack에 쌓는다.
2. 그러나 setTimeout과 같은 비동기 작업의 Context는 Call Stack에 쌓이자마자 사라진다.
3. Call Stack에 잠깐 쌓이고, 그 작업을 Browser와 같은 Runtime이 가져가서 작업을 시작한다. 예를 들어 setTimeout(1)의 경우 Browser가 1초 timer를 시작하고, Engine의 Call Stack에서 해당 비동기 작업의 실행 컨텍스트는 Pop된다.
4. 이렇게 Call Stack이 비워지기 때문에, JS Engine은 아직 비동기 작업이 끝나지 않았음에도 다른 작업을 실행할 수 있는 것이다.
5. 1초 timer가 끝나면, 브라우저는 setTimeout의 콜백함수를 브라우저의 Callback Queue(Task Queue)에 삽입한다.
6. 브라우저의 EventLoop는 약 16ms마다, JS Engine의 CallStack을 확인하는데, CallStack이 비워져 있으면 브라우저의 Callback Queue에서 대기하고 있는 콜백함수들을 Call Stack에 Push한다.
7. 그리고 JS Engine은 Call Stack에 작업이 들어왔으니, 작업을 실행한다.

- 대답한다면 - setTimeout(0)을 하는이유에 질문
- 브라우저의 repaint 작업은 JS 코드에 제약을 받는다.
- repaint 작업또한 다른 비동기 콜백처럼 Callback Queue에 삽입된다.
- 따라서 JS엔진의 Call Stack이 비워져야만 repaint 작업이 진행된다.
- 브라우저는 16ms마다 repaint 이벤트를 Callback Queue에 삽입하는데,
- 16ms를 넘어가면 User가 좋지 않은 UX를 얻게 된다.
- 대답한다면 - setTimeout이 실제로 딱 0ms 후에 시작되지 않는 이유
- setTimeout 1초를 주면, 1초 후에 바로 실행되야 하지만 현실은 그렇지 않다.
- 브라우저의 1초 타이머가 끝나면, 바로 콜백이 실행되는 것이 아니라, task queue에 쌓이기 때문이다. 그리고 Call Stack이 비워질 때가 되어서야 callback이 실행된다.

- 박근우 : 이벤트루프는 자바스크립트 단일쓰레드의 동기작업을 한다. (즉 콜스택이 하나라는 뜻)
- 콜스택이 하나이기때문에, 비동기를 이벤트루프와 태스크큐가 있어서 가능하다.
- 비동기 작업들은 태스크큐로 동기작업은 콜스택으로 들어간다.
- 콜스택이 비워 진 다음에야 태스크 큐로 들어감
- SetTimeout(0) 의 이유
- 중간에 환기시키는 역할을 한다 .

- 김민주 :
- 동기적인것은 Stack으로 이뤄지면
- 비동기는 eventLoop 대기열에 넣어놨다가, 동기적인 애들이 Queue에서 모두 이뤄지고 그거ㅗㅅ이 다 끝나면 이벤트루프의 대기열에서 꺼내와서 쓰게 된다.

### Q4. ES5에서 식별자 해결이 일어나는 프로세스 Scope(외부렉시컬 참조)와 실행컨텍스트로 설명해주세요
JS Engine의 식별자 해결(Identifier Resolution)
먼저, 선언적 환경 레코드를 뒤집니다.(내 Scope를 뒤진다.)
만약, 내 Scope에서 변수 이름을 찾지 못했다면, 외부 렉시컬 참조를 뒤집니다. (바로 바깥의 Scope를 뒤진다.)

여기서도 변수 이름을 찾지 못했다면?? 외부 렉시컬 참조를 갈아끼웁니다.
외부 렉시컬 참조로 참조하는 대상을, "현재 참조하는 Scope의" 부모 Scope로 교체합니다.

외부 Scope에서 IR(식별자 해결)을 해결 못하면, 계속 현재 참조하는 Scope의 부모 Scope로 교체하는데, 이것을 Global Scope(보통 Window)까지 갈아끼웁니다.
Window까지 가서도 IR을 못하면 그제서야 undefined를 들고 오는 것입니다.

즉 Scope Chain은 식별자 해결시, 변수를 찾지 못하면 렉시컬 참조영역을 갈아끼우는 것을 의미합니다.
Scope Chain이라는 거창한 동작이 따로 있는 것이 아니라, 위에 설명된 엔진의 동작을 표현할 뿐입니다.

- 민주 : 스코프체인으로 질문
- 스코프는 변수의 범위를 얘기한다.
- 원리에대해선 설명 못함

---

### Q5. 이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요.
이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어 가는 특성을 의미한다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다.

- 민주
- 이벤트 버블링 은 자식요소 부모요소 (틀림)

### Q6. Event delegation
특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 이벤트 핸들러를 더 적게 등록해 주기 때문에 메모리도 절약할 수 있다.

- 민주 (이벤트 위임)
-

### Q7. script, script async, script defer 사이의 차이점은 무엇인가?
문서 파일에 자바스크립트를 추가하는 방식은 위 방법처럼, 총 3가지이다. 각각 스크립트 파일이 파싱되는 방식이 서로 다르다. 먼저 script 태그를 추가하면, HTML이 중단되고 스크립트 파싱을 시작하고 끝난 후에야 HTML 파싱이 진행된다. script async 태그는 HTML 파싱과 스크립트 파싱이 동시에 이뤄지고 완료된 순서대로 시행된다. script defer 태그는 HTML과 스크립트가 동시에 파싱되고 스크립트의 실행은 HTML의 파싱이 다 이뤄진 후에 완료된다.

- 차이점 모름

### Q8. 요소를 배치하는 방법(static, relative, fixed, absolute) 간의 차이는 무엇인가요?
static : 기본값으로 요소들이 겹치지 않고 상→하로 배치된다.
relative : 원래 배치되어야 할 위치에서 지정한 값 만큼 떨어진 곳에 요소를 배치한다.
fixed : 웹 브라우저 화면 전체를 기준으로 배치한다. 스크롤을 하더라도 위치가 고정된다.
absolute : 가장 가까운 상위 요소의 위치를 기준으로 지정한 값 만큼 떨어진 곳에 요소를 배치한다.

### Q9. CSS in JS란

CSS-in-JS에 대해서 설명해 주세요.
CSS-in-JS는 CSS보다 더 강력한 추상화이다. JS를 사용하여 스타일을 선언적이고, 유지보수 가능한 방식으로 설명한다. JS를 CSS로 전환하는 고성능 컴파일러로, 런타임 및 서버 사이드에서 작동한다. 인라인 스타일과는 다른 개념이다

CSS-in-JS를 사용하면 다음과 같은 장점이 있다.
- 컴포넌트 단위로 생각할 수가 있다. CSS-in-JS는 CSS 모델을 문서 레벨이 아니라 컴포넌트 레벨로 추상화 한다.(모듈성)
- 진정한 분리 법칙을 따른다. CSS에는 명시적으로 정의하지 않은 경우, 부모 요소에서 자동으로 상속되는 속성이 있다. CSS-in-JS의 경우 부모 요소의 속성을 상속하지 않는다.

### Q10. CSS에서 z-index가 제대로 동작하지 않는다면 고려해야 될 원인은
- Stacking Context

- 부모의

### Q11. Reflow와 RePaint란?
- 대답한다면 - Reflow와 RePaint란 그리고 최소화하는 방식은?
- transform이나 opacity와 같은 속성은 repaint나 reflow를 발생시키지 않는다.따라서 visibility나 display 대신 opacity를 이용하거나, left,right 대신 transform을 이용하는 것이 성능 개선에 도움 된다.
- Position : absolute | fixed
레이아웃 변화가 많은 요소의 경우 Position 속성의 값을 absolute 또는 fixed로 주면, render tree의 다른 요소들로부터 독립되어 영향 받는 주변 요소들을 없애 연산과 렌더링 과정을 줄일 수 있다.
애니메이션의 경우, 애니메이션 시작시 요소의 position을 absoulte나 fixed로 바꾼 후, 애니메이션이 끝났을 때 다시 원래대로 돌려놓는 방법은 reflow와 repaint 횟수를 줄일 수 있다.

- html dom tree
- css dom tree
- javascript가 있다면 그 js 트리가 있다

- render tree가 만들어진다.

---

### Q12. 브라우저에 도메인 주소를 입력하면 벌어지는 일 (DNS, Network, 브라우저 동작원리- DOM,CSSOM,RenderTree)
유저가 naver.com을 브라우저에 입력한다.
브라우저는 HTTP 요청을 만들기 위해, OS에게 네트워크 관련 작업을 위임한다
OS는 naver를 ip로 변환하려 하기 위해 다음과 같은 작업을 진행한다.
- Local DNS에게 질의한다.
- Local DNS에 캐싱되어 있으면 바로 변환해서 HTTP 메세지를 만들고 요청을 보낸다.
- 캐싱되어 있지 않으면 Root DNS로 찾아가서 .com DNS의 주소를 알아온다.
- .com DNS로 가서 naver.com의 DNS 주소를 알아온다.
- naver.com DNS(Naver의 책임 DNS)로 가서, www.naver.com의 IP를 알아온다.
- host를 명시 안하면, 내부적으로 www의 host를 알아온다.
- HTTP 메세지를 만들고 브라우저는 트랜스포트 계층으로 넘긴다.
- 트랜스포트 계층에선 내부적으로 TCP or UDP 프로토콜에 맞는 데이터를 부가
- OSI 7계층을 쭉 타고 내려가서 요청이 실제로 전송되는 것

> 캐싱을 해서, 가져옴
> 캐싱이 안되어 있으면 DNS를 이용해서 HTTP 프로토콜로 문서를 다운받아서 진행된다.
>

#### Q12-2. 이렇게 HTML, CSS ,JS를 받아오면 어떤 과정으로 렌더링이 되는지
브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석해서 표시하는 것이다. 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있다. 렌더링 엔진은 먼저 HTML 문서를 파싱해서 DOM 트리를 구축한다. 그리고 CSS 마크업을 파싱해서 앞서 구축한 DOM 트리와 함께 렌더링 트리를 만든다. 렌더링 트리는 화면에 보여줄 것들만 가지고 있는 트리로, 구축이 되면 순차적으로 화면에 배치한다. 부모에서 자식 순서로 배치는 진행된다. 배치가 완료되면 그리기를 시작한다.

Document Object Model + CSS Object Model => Render Tree

---

### Q13. 쿠키와 세션 스토리지, 로컬 스토리지의 차이를 설명해 주세요.
기본적으로 쿠키와 로컬 스토리지, 세션 스토리지는 모두 브라우저에서 데이터 저장소의 역할을 하는 것들이다. 웹에서 로그인을 하기 위해서는 토큰을 발급받아 API를 호출해야 한다. 하지만 반복되는 작업을 계속 하게 되는 것이 비효율적이고, 이를 보완하기 위해 쿠키를 서버와 클라이언트에 생성해서 토큰 발급 없이 쿠키만 가지고 서버에 요청을 할 수 있게 된다. 쿠키는 저장 공간이 4KB로 작은 편인데 이러한 단점을 보완하여 만든 것이 웹 스토리지이다.

웹 스토리지는 서버에 클라이언트 데이터를 저장하지 않는다. 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있는데 로컬 스토리지는 브라우저에 정보가 계속해서 남아있는 반면, 세션 스토리지는 해당 세션이 끝나면, 즉 브라우저가 닫히면 데이터가 사라진다. 웹 스토리지는 데스크탑 기준 5~10MB의 저장 공간을 가지고 있어서 쿠키에 비해 훨씬 저장공간이 크다는 장점이 있다. 웹 스토리지는 반면 HTML5부터 지원하기 때문에 이전 브라우저에서는 지원이 되지 않는다는 단점이 있다.

- 민주
- 쿠키는 키와 밸류로 이뤄져있는데, 접근이 쉽고 요량이 낮음
- 세션스토리지는 브라우저를 닫으면 데이터가 닫아진다 - 비회원 장바구니
- 로컬스토리지는 영원히 저장하기 때문에, 로그인 / 자동로그인ㅇ ㅔ사용하는 것으로 알고 있다.

### Q14. CORS가 무엇이며 어떻게 해결할 수 있는가
다른 도메인에서 리소스 요청 시 cross-origin HTTP 에 의해 요청을 하는데, 대부분의 브라우저는 보안 상의 이유로 이 요청을 제한한다. 이를 동일 오리진 정책(Same Origin Policy)이라고 한다. 요청을 보내기 위해서는 요청 보내는 대상과 프로토콜이 같아야 하고, 포트도 같아야 한다. JSONP(JSON-padding)을 통해 해결하거나 특정 HTTP 헤더를 추가하여 이 이슈를 해결할 수 있다. 이와 같이 타 도메인 간 자원을 공유할 수 있게 해주는 것을 Cross Origin Resource Sharing, 줄여서 CORS라고 한다.
- 예상 ) Http 헤더를 추가하여, 다른 출처의 자원에 접근할 수 있는 권한을 명시
- Preflight Request
- 접근해도되는지 물어보는 용도 Option Method
- Why -> 서버는 CORS를 모른다
- 예상 ) Proxy 설정

-----

> 밍글링 이후에 리액트를 공부함 (한 달)

### Q15. 가상돔을 사용하는 이유
브라우저의 엔진은 그렇게 좋은 엔진이 아니다. 화면을 갱신하는데 굉장히 오랜 시간을 소모하게 되기 때문에, 화면 갱신(실제 돔 조작)을 최소화해야 한다. 또한 실제돔을 조작하기 위해 DOM Tree를 순회해야 하는데, SPA가 만연한 세상에서 DOM Tree의 depth는 querySelector와 같은 함수로 매번 순회하기에 너무 깊다.

리액트는 가상돔을 메모리에 두고, 새로운 가상돔을 만들어 이전의 가상돔과 비교를 통해 변경된 부분만을 실제돔에 적용한다. 즉, 화면 렌더링에 있어 나름의 최적화가 되어 있다.
이 가상돔의 존재가 리액트 최적화의 전부는 아니다. 가상돔은 리액트가 사용하기 위한 정보가 담겨있는 단순한 JS 객체다. 따라서 메모리에 로드되어 있다.

리액트는 컴포넌트 함수 내부에서 바로 DOM을 조작할 수 있다.
실제 DOM을 조작하는 것은 아니다. 가상돔을 조작하는 것이다. 그러나 결국 실제돔에 적용된다.

- 리액트 가상돔의 이득
- 박근우 : DOM 직접 접근하지 않고 가상돔을 이용해서 빠른 속도를 낼 수 있다,.
- 실제 돔을 가상돔애 복제하고 변경점은 가상돔에 적용해서 Dom에 적용한다.
- 민주 :
- HTML 뼈대 없이, JS 로 html을 만드는 것이라 성능이 빠르다...??????
- UX

- SPA란 뭐냐
- 처음에 로딩될 때, 모두 다운받아서 페이지 이동될때, 부붑ㄴ의 컴포넌트가 변경된다.
- SEO
- 서버사이드 렌더링 : 페이지가 로딩될때, html & js &
- 장점은 SEO에 대한 장점이 있다.

### Q16. 리액트의 렌더링과정 - 가상돔
1. 최초의 가상돔이 만들어진다.
2. 최초의 가상돔을 실제돔에 적용한다.
3. 상태가 변경되면, 상태가 변경된 컴포넌트의 컴포넌트 함수를 호출하여 새로운 가상돔을 생성한다.
4. 이전에 존재하던 가상돔과 새롭게 생성된 가상돔을 비교하여 변경점을 찾는다.(가상돔은 메모리에 적재되어 있다. 가상돔은 JS객체라서 가능하다.)
5. 변경점을 실제돔에 적용한다.

### Q17. 리액트의 상태 비동기, 배치 처리의 이점
- 비동기 처리
- 만약 상태 변경에 대해 "동기 처리"를 하게 되면, 상태 변경 함수가 호출될 때마다 화면을 다시 그리는 동안 브라우저가 멈추므로 성능 이슈가 발생한다.
- 일괄 처리
- 리액트는 상태 업데이트를 16ms마다 일괄로 처리하여 리-렌더를 진행한다. setCount를 두 번 해도, 두 번째 setCount는 아직 증가되지 않은 count 값을 들고 대기 queue에 들어가기 때문에 +1은 단 한번만 이뤄진다. queue가 존재하여 비동기와 일괄처리 되더라도 "호출순서 === 처리순서"가 보장된다. 만약, 상태 변경을 바로바로 한다면 상태 변경 함수가 호출될 때 마다 화면을 다시 그리므로 성능 이슈가 발생한다.

- 민주 ::
- state는 setState로 변경한다.

### Q19. 아시는 Hook들에 대해 설명 부탁

### Q20. useRef 에 대해, 그리고 언제 사용하는지
- DOM 요소에 직접 접근하거나, 렌더링과 관련 없는 데이터를 저장하기 위해 사용하는 hook.
- 반환값은 ref객체, 인자로는 초기값을 받는다.
- ref 객체의 current 프로퍼티에 참조값이나 데이터를 저장한다.
- ref 객체는 전 생애주기 동안 같은 객체를 가리킨다.
- ref 안의 값이 바뀌어도 컴포넌트가 렌더링되지 않는 점에서 주의해야 한다.

#### Q20-2. DOM요소에 접근하기 위해 사용할 때 주의점은
- DOM 요소가 렌더링 된 후에 참조할 수 있으므로, useEffect 부수효과 함수 내에서 참조값을 사용하는 것이 보통이다.
- 컴포넌트나 돔 요소가 조건부 렌더링에 걸려있는 경우 Ref의 current가 없을 수 있으니, 옵셔널 체이닝을 사용하자. titleRef.current?.메소드나 변수

- 렌더링에 무관한 값을 저장하는 용도로 사용할 때 주의점
- ref 객체는 전 생애주기 동안 같은 객체를 가리킨다. 컴포넌트 밖에서 사용할 때 갈아끼우고 재참조하는데 주의해야함

### Q21. useImperativeHandle에 대해서
- 클래스형 컴포넌트에서는 자식 컴포넌트 인스턴스의 메소드나 변수에 접근이 가능하다. 자식 컴포넌트의 메소드나 변수에 접근하는 것은 "의존성" 이슈 때문에 지양해야 하지만, 해야될 때가 있다.
- 함수형 컴포넌트에서도 자식 컴포넌트의 메소드나 변수에 접근하고자 만든 훅이 useImperativeHandle이다.
- useRef가 반환한 객체를 자식 컴포넌트에 넘겨주고,자식 컴포넌트에서는 받은 Ref 객체를, useImperativeHandle 훅을 이용해 맵핑해주면 된다.

### Q22. useMemo
- 컴포넌트가 리-렌더 되는 상황에서도, 어떤 함수의 결과 값을 저장하기 위해 사용하는 훅
- 보통 변하지 않는 객체를 사용하는 경우(상수 객체, 상수 변수)는 컴포넌트 외부로 빼서 불필요한 리-렌더가 발생하지 않도록 만들어야 한다. 그러나 속성값이나 상태값을 이요해 계산되는 상수나 변수는 밖으로 뺄 수 없으니 useMemo 훅을 사용해서 최적화를 한다.
- 값을 생성하는 함수가 오래걸리는 경우 최적화에 효울적이다.

### Q23. useCallback
- 컴포넌트가 리-렌더 되는 상황에서도, 어떤 함수가 재생성 되지 않도록하기 위해 사용하는 훅
- 컴포넌트의 속성값에 함수 리터럴을 작성하는 경우가 있는데, 컴포넌트가 리-렌더 될 때 React.memo를 사용하더라도 함수가 재생성되면서 자식 컴포넌트를 불필요하게 리-렌더되게 만든다.
- 함수를 재생성 하는것은 성능에 미치는 영향이 적지만, 함수 재생성으로 인해 프롭스로 넘겨주는 경우 리-렌더되는데, 리렌더는 성능을 저하시킨다.

### Q24. React.Memo
- React.memo(컴포넌트, 비교함수)
- 비교함수는 optional이다.
- 비교함수가 true를 반환하면 리-렌더를 하지 않고 false를 반환하면 리-렌더를 하게 된다.
- 비교함수를 공란으로 하면 리액트에서 제공하는 얕은비교 함수가 동작하게 된다. 만약 우리가 속성값을 객체로 다룰 때 불변객체로 다루지 않는다면, 브루트포스로 속성값을 비교하는 함수를 넣어줘야 된다. 즉, 속성값을 불변객체로 다루면 수행시간이 짧은 얕은비교만으로도 최적화를 할 수 있게 된다.
- 속성값 또한 불변객체로 사용할 경우 React.memo HOC를 이용하면 최적화에 도움이 된다.
- 리액트는 기본적으로 부모가 리-렌더 되면 자동으로 자식 컴포넌트가 리-렌더 된다. React.memo를 사용하면 부모가 리-렌더 되더라도 자식에게 넘겨주는 속성값이 변하지 않으면 자식의 리-렌더를 막을 수 있다.

----

### Q25. 가장 몰두헀던거

- 창모님
제일 재미, 몰두했던게 스타트업에서
사내 칭찬 문화를 만들자 슬랙에 추가할 앱
내가 사용할 앱, 유저들의 반응을 볼 수 있었기 때문에 가장 몰두했다
뿌듯했다 -> 기록을 할 수 있는 퍼블릭 채널에서 칭찬을 하게 만들고, 본인에게 칭찬을 못하거나 봇에게는 칭찬을 못하거나, 남은 칭찬 갯수에 대해서
- 어떤 개발을 하던 상관 없는 사람처럼 보임 에코핏하다
- 기술적으로 뭔가를 하는 것보다 일을 끝내는 것에 집중

- 명원
풀스택으로 만들어보자 - Mongo/socket 혼자 카페에서 만들어보자
Pug로 JS로 프론트를 만들고 칭구들한테 뿌리고

졸업작품 - 개발을 해본 사람이 자신밖에 없었다.
지도 기반 서비스다 보니까

- 박근우
- 자바스크립트와 리액트를 가장 열심히 공부했고
- var, let, const의 차이
- var의 경우 호이스팅이되고 var는 함수 스코프로 동작한다. 재선언과 재할당이 가능하다
- let의 경우 재선언은 되지만 재할당은 가능하다.
- 블록레벨 스코프를 가지고 있다.
- const 는 호이스팅도 블록레벨, 재선언과 재할당이 불가능하다.
- 또 초기화가 불가능하다.
- 브라우저 렌더링
- 화면에서 사용자가 볼 수 있도록 그려주는 작업을 말하는건데
- 클라이언트로부터 파일을 가져와서 HTML 파일을 파싱에서 DOM 트리를 만들고
- HTML을 파싱하는 동안에 CSS 링크를 만나면 CSS를 파일을 불러와서 CSSOM 트리를 만들다
- 그리고 이 트리들을 합쳐서 REnder Tree를 만드는데
- Display: None이나 HEAD 태그를제외한 것들로 만듬
- 레이아웃 단계에서
- 어디에서 위치하는지 계산하는 단계
- 페인트를 하는 단계가 있다.

### Q26. 프로젝트하면서 가장 힘들었던 점 어떻게 해결했는지

- 창모 : 내 일이 아니라도 일을 가져와서 참여해서 프로젝트를 끝내는 것에 집중했다
- 명원 : 남이 짠 코드가 에러가 나서, 같이 디버깅해줬음
- 근우 : 커뮤니케이션 문제
- 비대면으로하다보니까 협업이 ㅎ림들었다.

### Q27. 우리가 어떤 일, 기대을 할지 예상하는 것
- 창모 :
- 기대
- 개발팀을 키워나가려고 마음 먹은 회사라고 본 것 같다. (공고 - 시니어 주니어 뽑으니까)
- 내가 정답이라고 말할 수 없으니까 다른 사람들에게 티키타카 하고 싶다.
- 어떤 일을 할 것이라고 예상하는지
- 개발팀 얘기가 없어서 짐작이 안된다. ㅋㅋㅋ
- 명원
- 기대
- 가치관, 기술 스택을 활용할 수 있을 것 같아서 지원했다.
- 기술적인 성장이 집중이다. 결국 난 사회초년생이니까
- 어떤 일을 할 것이라고 예상하는지
- 회사 웹을 만든다거나 ㅋㅋㅋㅋ

- 근우
- 온라인 대행업체이며, 해외에서도 서비스한다고 알고 있다.
- 사원수도 많고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
- 프론트엔트 팀으로서의 기대, 어떤일을 할 것인지 기대
- 프론트엔드 업무 주어지는대로 하겠다.

### Q28. 만약에 앱개발을 해야된다면??
- 창모
- 영어권 사람들은 어떤 영어도 잘 한다.
- 개발자라면 앱개발 빨리 배워나갈 수 있을 것, 빠르게 적응하고 적용한다.
- 당시에 잘은 만들지 못하겠지만 나아갈 수 있을듯
- 명원
- T자형 개발자가 되어야 된다고 생각한다.
- 그래서 내 담당업무가 아닌 일에 대해서 맡는 것은 좋다고 생각한다.
- 근우
- 다른쪽도 해보고싶기 때문에
- 긍정적으로 받아들일 것 같다고 생각한다.

# 면접관에게 질문

### 개발팀이 어떻게 구성되어 있는지(규모)
- 전체 개발팀 인원 10명 남짓이죠
- 프론트쪽 업무 세명
- 백엔드쪽 세명
- 파이썬 백엔드 세명
- 기획자 두명이다.

### 어떤 업무를 하게되는지 ?
- 외부에 오픈되는 서비스는 없고 내부에 오픈되는 서비스
- 자회사 :

### 경쟁률이

-------

# 민주

## 어떤 기대

문제 이슈 대응이나 해결해야되는 문제가 생겼을 때
"문제를 함께 해결하고 싶다는" 기대가 있다.
우물안을 벗어나고 싶어서 지원했다.
퍼블리싱을 벗어나고 싶다.

## 자사몰도 프론트엔드로 해결할 수 있지 않을까
공부하고 싶지만 키워드를 모른다.
자사몰의 비중이 크다고하면 어려울 것 같다.
프로젝트와 협업

---

# 궁금한거

## 프론트엔드 진행을 하다보면 자격증
- 전혀 필요 없다.

## 업무를 하게 되면, 3층
- 필요에 의해서 움직인다

## 퍼블리싱과 프론트엔드의 구분이 뭐냐

---