개요
- 섹션 2를 마무리하며 학습했던 내용들에 대해 기술면접에 나올만한 질문들에 답변을 준비하며 복습합니다.
학습 목표
- 프론트엔드 개발자 기술 면접에 대해서 이해합니다.
- 기술 면접에서 요구하는 올바른 답변이 무엇인지 이해합니다.
- 기술 면접 준비를 직접 해봅니다.
- 모의 기술 면접을 실제 해보거나 시청하면서, 어떻게 기술 면접을 할지 고민해봅니다.
JavaScript
Promise 의 기능과 필요한 이유에 대해서 설명해주세요.
// 정의 및 기능
"Promise 는 단어 그대로 '약속'입니다. "
"비동기 연산이 종료된 이후에 결과를 제공하겠다는 '약속'입니다."
"Promise 가 미래에 제공하는 결과로는 실패 혹은 완료와 그 결과 값을 나타냅니다."
"또, Promise 를 사용하면 비동기 메서드가 마치 동기 메서드처럼 값을 반환할 수 있습니다."
"Promise 에 처리기를 연결하면 결과값, 실패 사유 등을 처리할 수 있게 됩니다."
// 필요한 이유
"Promise 는 비동기 작업시에 결과를 제공받기위해 필요합니다."
순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
// 순수함수란?
"순수함수란, 오직 함수의 입력만 함수의 결과에 영향을 주는 함수입니다."
// 사이트 이펙트와 연결
"따라서, 사이드 이펙트가 없는 예측 가능한 함수입니다."
// 불변성과 연결
"메모리에 이미 담긴 데이터를 변경하지 않는다는 뜻입니다."
"메모리에 이미 단긴 데이터가 변경되면 사이드 이펙트가 발생할 수 있기 때문입니다."
"따라서 메모리에 이미 담긴 데이터를 업데이트 하고 싶을 시에는 새로운 변수 혹은 객체를 선언하여 할해당 데이터를 할당하는 것이 불변성에 합당한 방식입니다."
React
React의 state 와 props 에 대해서 설명해주세요.
// state
"'상태', 즉 컴포넌트 내에서 변할 수 있는 값입니다."
"토글, 체크박스, 인풋밸류 등에서 대표적으로 쓰입니다."
"React 에서 제공되는 useState() Hook 또는 외부 상태관리 라이브러리를 사용하여 관리합니다."
// props
"'변하지 않는 값'이면서 '부모 컴포넌트에서 전달 받은 값'입니다."
"어떤 타입의 값도 할당하여 전달할 수 있도록 '객체 형태'입니다."
"그리고 '읽기 전용 객체'입니다."
React 컴포넌트의 key 속성에 대해서 설명해주세요.
// 컴포넌트의 key 속성
"리액트는 컴포넌트의 key 프로퍼티 값이 변하면 새로운 요소로 인식합니다."
"즉, 리액트는 key 프로퍼티 값을 기준으로 각 컴포넌트들을 인식합니다."
"따라서 컴포넌트의 key 프로퍼티 값을 state 로 주게되면 상태변화를 통해 여러개의 컴포넌트가 있는 것 같은 효과를 줄 수 있습니다."
"대표적으로 Motion UI 에서 key 값을 state 로 주고 Slider 를 구현합니다."
useEffect 의 dependency array 에 대해서 설명해주세요.
// useEffect 의 dependency array
"useEffect 는 디펜던시 어레이의 요소에 해당하는 상태가 변경될때 마다 실행됩니다."
"예를들어, 디펜던시 어레이가 inputValue 라는 상태를 요소로 가지고 있다고 했을때, setInputValue 를 통해 inputValue 가 변경될 때마다 useEffect 내부에 있는 함수를 실행시켜줍니다."
"디펜던시 어레이가 비어있는 경우는 해당 컴포넌트 첫 렌더링 시에만 실행됩니다."
"디펜던시 어레이가 아예 없느 경우는 모든 상태가 변경 될때, 렌더링 될때마다 실행됩니다."
HTTP/네트워크
CSR 과 SSR 의 차이점에 대해서 설명해주세요.
// '어디서' '렌더링'을 하느냐?
"웹사이트가 그려지는 과정인 '렌더링'을 '어디서' 하느냐의 차이가 있습니다."
"SSR 은 서버(백엔드) 에서 렌더링을 수행합니다."
"CSR 은 클라인트(브라우저;프론트엔드) 에서 렌더링을 수행합니다."
// 각각의 장점
"SSR 은 SEO 와 첫 화면 렌더링 속도의 장점이 있습니다."
"CSR 은 상호작용 측면에서 월등한 UX 제공하는 장점이 있습니다."
// 결론
"따라서 요즘은 상황에 따라 SSR 과 CSR 을 합쳐서 각각의 장점을 취하는 것이 트렌드입니다."
GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
// GET 메서드
"HTTP 요청인 GET 메서드는 특정 리소스의 데이터를 요청하고 응답으로 오직 데이터를 받기만 합니다."
// POST 메서드
"HTTP 요청인 POST 메서드는 특정 리소스에 엔티티를 제출할 때 사용합니다."
"종종 사이드 이펙트로 부작용을 일으킬 수 있으니 주의하여 사용합니다."
+"응답은 REST 성숙도에 따라 리소스 사용에 대한 실패 여부를 포함한 응답을 받을 수 있습니다."
*엔티티(Entity) : 데이터의 집합 (데이터베이스랑 연관)
웹서버 기초
HTTP 메세지 구조에 대해 설명해주세요.
// 크게 요청과 응답으로 나뉨
"HTTP 메세지는 크게 "요청"과 "응답"으로 나뉩니다."
// 구조
"'요청'과 '응답' 각각 Start Line/Status Line 을 시작으로 Header 와 Body 로 이루어져 있습니다."
// Start Line (head)
"Start Line 은 1) HTTP 메서드 2) 요청 대상 3) 프로토콜 버전 을 포함합니다."
// Status Line (head)
"Status Line 은 1) 프로토콜 버전 2) 상태 코드 3) 상태 텍스트 을 포함합니다."
// Header (head)
"요청을 지정하거나, 메시지에 포함된 본문ㅇ르 설명하는 헤더의 집합입니다."
// Body (payload)
"모든 요청에 Body 가 필요하지 않으며 데이터 정보를 나타냅니다."
Same-Origin Policy 와 CORS 에 대해서 설명해주세요.
// SOP
"'동일 출처 정책'은 '같은 출처의 리소스만 공유가 가능한 정책'입니다."
"'출처'란 프로토콜, 호스트, 포트로 이루어져있습니다.'
// CORS
"'교차 출처 리소스 공유'를 뜻합니다."
"즉, 특정 외부 출처에게 특정 리소스에 접근할 수 있는 권한을 부여해주는 것 입니다."
"서버의 응답 헤더에 'Access-Cotrol-Allow-Origin' 작성 등을 통해 접근 권한을 부여해 줄 수 있습니다.
참조
코드스테이츠 프론트엔드 부트캠프
MoDerN Web Docs
