2/10 일일정리 기술면접준비

Section 2 에서 배운내용들을 복습하면서 기술면접 준비를 해보았다.

 

JavaScript

⓵ Promise의 기능과 필요한 이유에 대해서 설명해주세요.

 Promise는 비동기 작업이 진행될 때 사용하는 객체입니다. Promise 객체는 상태값과 결과값을 가집니다.

상태값은 비동기 작업 상태를 나타내는 값으로 pending, fulfilled, rejected 3가지 상태를 가집니다. pending은 비동기 작업이 완료되지 않은상태이고, fulfilled는 비동기 작업이 완료된 상태, rejected는 비동기 작업이 실패한 상태를 나타냅니다. 결과값에는 비동기 작업의 결과가 담기게 됩니다.

 

Promise는 비동기 처리를위해 ES6에서 추가되었습니다. 콜백 패턴이 가진 가독성이 나쁘다는 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있습니다.

(Promise를 쓰면 비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있다. 기존 콜백 패턴은 어떤것이 먼저 실행될지 모를때도 있다.)

 

⓶ 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

순수함수란 오직 함수의 입력값만 함수의 결과에 영향을 주는 함수를 말합니다. 순수함수의 코드가 실행될 때 함수 내부나 외부의 상태를 변경하지 않기 때문에 불변성을 가진다고 볼 수 있습니다.  상태의 변경은 사이드 이펙트를 일으키는데, 순수함수는 불변성을 가지기 때문에 사이트 이펙트를 일으키기 않는다고 볼 수 있습니다. 

React

⓵ React의 state와 props에 대해서 설명해주세요.

웹페이지를 이용하다보면 웹페이지의 상태를 변경할 때가 있습니다. 예를 들면 쇼핑몰 웹에서 어떤 물건을 장바구니 담는다던가, 어떤 체크박스에 체크를 하는등의 상태를 변경하게 되는데, 이 때 실시간으로 웹페이지를 업데이트해줘야 합니다. React에서는 이럴때 state를 사용하여 상태에 따라서 웹페이지를 리렌더링 하게 됩니다.

 

React는 상위에서 하위로 단방향 데이터흐름을 가지는데 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨줄 때 props를 사용합니다. 여러 component에서 state를 공유하는 경우 props를 통하여 상위 컴포넌트에서 하위 컴포넌트로 state를 넘겨주는 경우도 있습니다.

 

⓶ React 컴포넌트의 key 속성에 대해서 설명해주세요.

React에서 컴포넌트를 여러번 렌더링할 때 배열의 map함수를 사용하는데, 여기에 key 속성을 부여해줘야 합니다. key속성이 없는 상태에서 기존의 코드에 요소를 하나 추가할 때 React는 하나의 요소만 추가하는것이 아니라 모든 요소를 지우고 다시 처음부터 추가를 하는 방식으로 동작하는 경우가 있습니다. 이러한 현상을 key 속성을 부여함으로써 방지할 수 있습니다. key 속성은 고유의 값을 지정해줘야 합니다.

 

⓷ useEffect의 dependency array에 대해서 설명해주세요.

useEffect 함수는 두번째 인자로 dependency array를 받습니다. dependency array 는 어떤 경우에 useEffect 함수를 실행할지 알려주는 배열로 dependency array 내부 요소가 바뀔 때마다 useEffect 함수가 실행되게 됩니다. dependency array로 빈 배열을 주는 경우 처음 한 번만 실행되고, dependency array를 주지 않으면 렌더링이 될 때 마다 useEffect 함수가 실행됩니다.

 

HTTP/네트워크

⓵ CSR과 SSR의 차이점에 대해서 설명해주세요.

SSR은 서버사이드 렌더링으로 웹 페이지를 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 

CSR은 클라이언트 사이드 렌더링으로 웹 페이지를 클라이언트에서 렌더링합니다. 브라우저의 요청을 서버로 보내면 골격 웹 페이지와 함께 JavaScript 파일을 보내는데 클라이언트가 웹 페이지를 받으면 완전히 렌더링 된 페이지로 바꿉니다. 

 

SEO(Search Engine Optimization)가 우선순위인 경우, 일반적으로 SSR을 사용합니다.

웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합합니다.

사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 유리합니다.

웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있습니다.

 

⓶ GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.

GET 메서드는 서버에 어떤 데이터를 달라는 요청을 하는 메서드입니다. GET 메서드는 request body를 전달하지 않기 때문에 query와 parameter를 사용하여 특정한 데이터를 받습니다. GET 메서드는 검색이나 데이터 읽기 등에 사용됩니다. GET 메서드는 데이터를 변경하지 않기 때문에 안전하게 사용 가능합니다.

 

POST 메서드는 서버의 데이터를 수정하거나 생성합니다. request body에 데이터를 담아 보내는데 서버에서는 요청에 따라 데이터를 수정하거나 생성합니다. body에 데이터를 담아 보내기 때문에 대용량 데이터를 보내는데 적합합니다. 서버의 데이터를 변경하기 때문에 안전한 방식으로 사용해야 합니다.

 

웹서버 기초

⓵ HTTP 메세지 구조에 대해 설명해주세요.

HTTP 메시지에는 요청 메시지와 응답 메시지가 있고 start(status) line, header, body로 구성되어 있습니다.

start(status) line은 요청이나 응답의 상태를 나타냅니다. 요청 메시지 start line은 메서드, 요청 컨텍스트, http 버전이 표시됩니다. 응답 메시지 status line에는 상태 코드, 상태 텍스트, http 버전이 표시됩니다.

header에는 메시지 생성 시각, 데이터 크기, 데이터 타입 등 리소스의 간단한 정보가 담겨있습니다.

body는 요청과 응답의 본문으로 처리해야할, 응답 데이터가 담겨 있습니다. 모든 메서드나 응답에서 body가 필요한 것은 아닙니다.

 

⓶ Same-Origin Policy와 CORS에 대해서 설명해주세요.

Same origin Policy는 동일 출처 정책으로 같은 출처의 리소스만 공유가 가능하다는 보안 정책입니다. 프로토콜, 호스트, 포트가 같은 경우 같은 출처로 판단합니다. 동일 출처 정책은 공격을 받을 수 있는 경로를 줄여 안전성을 높이기 때문에 모든 브라우저에서 기본적으로 사용하는 정책입니다.

 

다른 출처의 리소스를 받아오기 위해서는 CORS, Cross-Origin Resource Sharing을 이용하면 됩니다. 교차 출처 리소스 공유는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 권한을 얻으면 다른 출처의 리소스도 받아서 사용할 수 있습니다.

CORS를 사용할 때 브라우저에서는 프리플라이트 요청을 보내 권한이 있는지 확인하고 본 요청을 보내는 방식을 사용합니다. 

 

 

소그룹 피드백

내 발표 : Promise의 기능과 필요한 이유

피드백 : 앞쪽 Promise 기능은 간단하게 설명하고 필요한 이유에 포커싱을 맞추는 것이 좋아보인다.

 

다른 분 피드백 중에

• 입에 붙는 단어로 말하기
• 꼬리질문 : 실제 사용 사례 알고있나?
• 앞쪽에 본론 넣기(두괄식)