기술 면접 준비(JS, React, HTTP/Network, webServer)

 

복 습!

 

JavaScript

• Promise의 기능과 필요한 이유에 대해서 설명해주세요.
• 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

React

• React의 state와 props에 대해서 설명해주세요.
• React 컴포넌트의 key 속성에 대해서 설명해주세요.
• useEffect의 dependency array에 대해서 설명해주세요.

HTTP/네트워크

• CSR과 SSR의 차이점에 대해서 설명해주세요.
• GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.

웹서버 기초

• HTTP 메세지 구조에 대해 설명해주세요.
• Same-Origin Policy와 CORS에 대해서 설명해주세요.

 

---

 

JavaScript

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

• 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다.
• 여기서 자바스크립트의 비동기 처리란 **'특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'**을 의미합니다.
• 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.
• 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 관련된 API를 사용하게 됩니다.
• 해당 API가 실행되면 서버에 '데이터 하나 보내주세요'라는 요청을 보냅니다. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다.

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

• 순수함수는 함수형 프로그래밍에서 자주 사용되는 개념으로, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다.
• 또한 사이드 이펙트가 없어야 합니다. 사이드 이펙트는 쉽게 말해서 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 의미합니다.
• 즉, 순수함수는 함수 body내에 있는 코드만 점검하면 되기 때문에 간결하게 코드를 작성하고 사고하는데 도움이 됩니다.
• 자바스크립트에서 순수함수를 제작하기 위해서 데이터의 불변성을 유지하는 것이 중요합니다.
• 함수의 전달인자로 참조 자료형이 전달되는 경우, 해당 객체 자체를 바꿔서 사이드 이펙트를 만들 수 있고, 이는 해당 데이터의 불변성을 손상시킬 수 있습니다.
• 그래서 배열의 불변성을 보장하는 메서드인 map, filter, reduce 등이 각광을 받게 되었습니다.

 

 

 

React

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

• 리액트에서 state는 변할 수 있는 데이터를 의미합니다. 애플리케이션의 작동 구조를 봤을때, 변할 수 있는 값이면 리액트의 상태로 적절합니다.
• 예를 들어서, input의 value는 사용자가 값을 입력하면 변경될 수 있는 값이기 때문에 state로 적절합니다.
• 또한 소셜 미디어에서 게시글 역시 다른 유저가 추가로 게시글을 작성하고 난 뒤에는 게시글의 수가 변할 수 있기 때문에 게시글 배열로 state가 적절합니다.
• 다만, input의 value는 하나의 컴포넌트에만 영향을 주고 게시글의 배열은 여러 컴포넌트에 영향을 줄 수 있는 차이점이 있습니다.
• 다른 컴포넌트에 영향을 미치는 정도에 따라 전역 상태와 지역 상태로 구분할 수 있습니다.
• props는 외부에서 전달받아 컴포넌트 내에서는 변할 수 없는 값입니다.
• 그래서 리액트에서는 props를 중간에 변경하는 것을 권장하지 않고, 상태 끌어올리기를 통해 상태를 변경시키고 변경된 상태값을 props로 내려주어 side effect를 최소화시킵니다.

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

• key 속성은 같은 컴포넌트를 여럿 렌더링할 때, 다른 컴포넌트임을 구분하기 위해서 사용하는 속성입니다.
• 예를 들어, 100개의 게시글 중 하나의 게시글만 변경되었을 때, 해당 게시글만 새롭게 재렌더링하고, 다른 게시글은 그대로 둘 수 있습니다.
• 이렇게 key 속성을 활용하면 리액트가 돔을 직접 제어하는 것보다 더 빠르게 렌더링을 할 수 있습니다.

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

• useEffect는 React Function Component에서 라이프사이클을 대신할 수 있는 React Hook입니다.
• 프론트엔드 개발에서는 불가피하게 side effect가 발생합니다.
• 대표적으로 ajax 요청, DOM reference 참조 및 변경 등이 있습니다. 이런 작업을 처리할 때는 React에서 제공하는 useEffect의 callback 함수 내에서 처리해야 합니다. 그렇지 않으면 리액트가 컴포넌트를 렌더링하기 전에 side effect가 생기면 해당 side effect가 화면에 바로 적용되지 않습니다.
• useEffect에 dependency array를 주지 않으면, 상태가 변경될 때마다 컴포넌트가 리렌더링이 됩니다.
• 간단한 local state가 계속 변경될 때마다 새롭게 컴포넌트가 리렌더링 된다면, 이는 성능에 악영향을 미칩니다.
• 그래서 특정 상태나 props가 변경될 때만 작동하게 할 수 있도록 dependency array요소를 정하면, 해당 상태나 props가 변경될 때만 작동합니다.
• 반대로 컴포넌트 렌더링 시 딱 한번만 작동되게 하고 싶으면 dependency array에 아무것도 넣지 않으면 됩니다.

 

 

 

HTTP/네트워크

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

• CSR과 SSR은 각각 클라이언트 사이드 렌더링, 서버 사이드 렌더링의 약자입니다.
• 최초 웹이 탄생하고, AJAX가 보편화되기 전까지는 서버에서 HTML파일을 전부 만들어서 브라우저에 전달하고, 브라우저에서 해당 HTML 파일을 화면에 보여주는 SSR 방식이 보편적이었습니다.
• 이후 AJAX가 보편화되고 나서부터는 CSR이라는 개념이 대두되었습니다. CSR은 AJAX 요청을 통해 페이지의 일부분에 필요한 정보만 받아서 브라우저에서 렌더링을 할 수 있는 장점이 있습니다.
• 즉, 단순한 웹 페이지가 아니라 유저와의 즉각적인 상호작용이 필요한 웹 애플리케이션에 적절합니다.

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

• GET 메서드는 서버의 리소스를 조회하고, POST 메서드는 서버의 리소스를 변경하는 HTTP 메서드입니다.
• GET은 단순히 조회를 요청하기 때문에 body를 보내지 않는 것이 보편적이고 query parameter나 path parameter를 씁니다.
• POST는 리소스의 생성 및 변경을 의미하기 때문에, body에 원하는 변경 사항을 자세하게 적습니다.
• GET 메서드는 요청을 무한대로 보내도 같은 요청을 회신받을 수 있는 멱등성(여러번 적용해도 결과가 달라지지 않음)을 가지고 있습니다.
• 반면 POST는 요청을 무한대로 보내면 최초 응답과는 다른 회신을 받게 됩니다.
• 이미 해당 리소스가 생성이 되어있거나, 변경되기 때문에 멱등성이 없습니다.

 

 

 

웹서버 기초

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

• HTTP는 요청과 응답으로 이루어져 있습니다. 요청은 메서드와 URL로 이루어져 있습니다.
• 메서드에는 GET, POST, PUT, PATCH, DELETE, OPTIONS가 있다.
• CRUD 관점에서 보면
• GET은 READ, POST는 CREATE,
• PUT은 UPDATE, PATCH는 UPDATE, DELETE는 DELETE, OPTIONS는 아무것도 아닙니다.
• 응답에는 상태코드와 상태메시지가 있습니다.
• 상태코드는 200, 300, 400, 500이 있습니다. 200은 성공, 300은 리디렉션, 400은 실패인데 클라이언트 실패, 500은 서버 실패입니다.

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

• Same-Origin Policy는 동일 출처 정책이라는 의미로 줄여서 SOP라고 합니다.
• SOP는 '같은 출처의 리소스만 공유가 가능하다'라는 정책으로 출처 즉 Origin은 프로토콜, 호스트, 포트의 조합으로 되어있습니다.
• 따라서 이 중 하나라도 다르면 동일한 출처로 보고 있지 않습니다.
• 하지만 현재 웹 기술은 다른 출처의 리소스를 사용하게 될 일이 너무 많기 때문에 SOP 정책은 웹 개발을 어렵게 만들고 있습니다.
• 따라서 이러한 어려움을 해결하기 위해 CORS라는 기술을 사용하게 되었습니다.
• CORS는 Cross-Origin Resource Sharing의 줄임말로 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS를 사용하면 접근 권한을 얻을 수 있게 되어 다른 출처의 리소스를 사용할 수 있습니다.
• CORS는 프리플라이트 요청 등 다양한 동작 방식을 통해 사용할 수 있습니다.