개요
- 학습했던 내용들에 대해 기술면접 답변을 준비하며 복습합니다.
학습목표
- 프론트엔드 개발자 기술 면접에 대해서 이해합니다.
- 기술 면접에서 요구하는 올바른 답변이 무엇인지 이해합니다.
- 기술 면접 준비를 직접 해봅니다.
- 모의 기술 면접을 실제 해보거나 시청하면서, 어떻게 기술 면접을 할지 고민해봅니다.
JavaScript
Promise의 기능과 필요한 이유에 대해서 설명해주세요.
-
Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미합니다.
-
Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 처럼 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다.
순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
- 순수함수란 오직 함수의 입력만 함수의 결과에 영향을 주는 함수입니다.
- 메모리에 담긴 데이터가 변경되면 사이드 이펙트가 발생 할 수 있기 때문에 메모리에 이미 담긴 데이터를 변경하지 않는다는 뜻으로 불변성에 합당합니다.
- 함수의 입력만 함수의 결과에 영향을 주기때문에 사이드 이펙트가 없는 예측 가능한 함수입니다.
React
React의 state와 props에 대해서 설명해주세요.
-
props는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용합니다. (단방향 데이터 흐름을 갖는다.)
수정할 수 없습니다. (읽기 전용 객체)
객체 형태입니다. -
컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 합니다.
React 컴포넌트의 key 속성에 대해서 설명해주세요.
- React는 컴포넌트의 key 프로퍼티 값이 변하면 새로운 요소로 인식합니다. 즉 React는 key 프로퍼티 값을 기준으로 각 컴포넌트들을 인식합니다.
"따라서 컴포넌트의 key 프로퍼티 값을 state 로 주게되면 상태변화를 통해 여러개의 컴포넌트가 있는 것 같은 효과를 줄 수 있습니다."
"대표적으로 Motion UI 에서 key 값을 state 로 주고 Slider 를 구현합니다."
useEffect의 dependency array에 대해서 설명해주세요.
- useEffect는 dependency array의 요소에 해당하는 상태가 변경될 때 마다 실행됩니다.
비어있는 경우에는 해당 컴포넌트 첫 렌더링 시에만 실행됩니다.
아예 없는 경우에는 모든 상태가 변경 될 때, 렌더링 될 때마다 실행됩니다.
HTTP/네트워크
CSR과 SSR의 차이점에 대해서 설명해주세요.
-
SSR(Server Side Rendering) 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에게 전달하는 방식이다.
CSR(Client Side Rendering) SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다. -
SSR은 첫 화면 렌더링 속도의 장점이 있고, CSR은 상호작용 측면에서 월등한 UX를 제공하는 장점이 있습니다.
GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
- GET 메서드는 데이터를 요청하고 응답으로 데이터와 리소스 사용에 대한 실패 여부를 포함한 응답을 받기만 합니다.
POST 메서드는 특정 리소스에 엔티티(데이터의 집합)를 제출할 때 사용합니다.
사이드 이펙트로 부작용을 일으킬 수 있으니 주의해야 합니다.
웹서버 기초
HTTP 메세지 구조에 대해 설명해주세요.
- 메시지 타입은 두 가지가 있습니다. 요청(request)은 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지고, 응답(response)은 요청에 대한 서버의 답변입니다.
요청과 응답 각각 Start Line/ Status Line을 시작으로 Header와 Body로 이루어져 있습니다.
Same-Origin Policy와 CORS에 대해서 설명해주세요.
-
SOP(Same-Origin Policy) 동일 출처 정책은 같은 출처의 리소스만 공유가 가능한 정책입니다.
-
CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유를 뜻합니다.
다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여해주는 것 입니다.
