Computer Science/면접 대비

[Section2] 기술면접 준비

mj73 2023. 6. 8. 13:47

1. JavaScript

 

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

콜백 중첩을 해결하기 위해 등장한 것이 Promise입니다.

Javascript 에서는 대부분의 작업들이 비동기로 이루어집니다. 이전에는 콜백 함수로 처리하면 되는 문제였지만 요즘에는 프론트엔드의 규모가 커지면서 코드의 복잡도가 높아지는 상황이 발생하였습니다. 이러면서 콜백이 중첩되는 경우가 따라서 발생하였고, 이를 해결할 방안으로 등장한 것이 Promise 패턴입니다.

Promise를 사용하면 비동기 작업들을 순차적으로 진행하거나, 병렬로 진행하는 등의 컨트롤이 보다 수월해집니다. 또 예외처리 구조가 존재하기 때문에 오류 발생에 대해 더 쉽게 관리할 수 있습니다.

 

 

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

순수함수란 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다.

순수 함수는 입력에만 의존하기에, 함수 내부에서 사용되는 데이터는 불변성을 유지해야 합니다.

사이드 이펙트는 함수 실행될 때 함수 외부의 상태를 변경하는 것을 의미합니다. 예를 들어, 전역 변수를 수정하는 것이 사이드 이펙트입니다. 순수 함수는 사이드 이펙트를 발생시키지 않으므로 외부 상태에 영향을 미치지 않고 오직 함수의 입력만이 결과에 영향을 미칩니다.

 

 

 

 

 

2. React

 

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

React에서 state는 변할 수 있는 데이터, props는 외부에서 전달받아 컴포넌트 내에서는 변할 수 없는 값입니다.

props는 상태 끌어올리기를 통해 상태를 변경시키고 변경된 상태값을 props로 내려주어 side effect를 최소화시킬 수 있습니다.

 

 

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

key 속성은 같은 컴포넌트를 여러번 렌더링할 때, 다른 컴포넌트임을 구분하기 위해서 사용하는 속성입니다.

key 속성을 활용하면 React가 DOM을 직접 제어하는 것보다 더 빠르게 렌더링을 할 수 있습니다.

 

 

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

useEffect란 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook입니다.
useEffect는 첫 번째 인자로 콜백 함수를 받고 두 번째 인자로 배열을 받는데 이 배열을 dependency array라고 부릅니다.
useEffect의 실행이 화면에 첫 렌더링 될때, 그리고 종속성 배열의 값이 바뀔 때마다 실행되기 때문에 종속성 배열이라고 부릅니다.

 

 

 

 

 

3. HTTP/네트워크

 

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

SSR과 CSR의 주요 차이점은 페이지가 렌더링되는 위치입니다.

SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저에서 페이지를 렌더링합니다.

CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리한다는 차이점이 있습니다.

 

 

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

GET 메서드는 서버의 리소스를 조회하고, POST 메서드는 서버의 리소스를 변경하는 HTTP 메서드입니다.

GET은 단순히 조회를 요청하기 때문에 body를 보내지 않는 것이 보편적이고 query parameter나 path parameter를 씁니다. POST는 리소스의 생성 및 변경을 의미하기 때문에, body에 원하는 변경 사항을 자세하게 적습니다.

 

 

 

 

 

4. 웹서버 기초

 

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

HTTP 메시지는 크게 start-line, header, body로 나뉩니다.

start-line은 어떤 프로토콜을 사용하는지, 어떤 HTTP 메서드인지, 상태 코드는 무엇인지 등 해당 요청 / 응답의 핵심 정보가 담겨있습니다.
header는 요청/응답에서 공통으로 자주 다루는 정보들이 담겨있습니다. 예를 들면 body의 Content-type이 무엇인지, 캐시의 유효 기간은 얼마나 되는지 등 공통으로 자주 주고받는 정보가 담겨있습니다.

body는 해당 요청/ 응답에서 꼭 다뤄야 하는 중요한 정보를 담고 있습니다. 보통 추가/변경/삭제하고 싶은 리소스의 자세한 정보를 담기도 하고, 응답의 경우 요청자가 꼭 알아야하는 리소스에 대한 정보를 담게 됩니다.

 

 

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

SOP는 Same Origin Policy의 줄임말로, 동일 출처 정책을 의미합니다. uri의 프로토콜, 호스트, 포트 이 3가지가 모두 동일해야 같은 출처(Same Origin)으로 인정하게 됩니다. 이 정책이 필요한 이유는 동일한 출처가 아닌 곳에서 요청이 오는 경우 해당 요청을 막아 높은 보안성을 유지하기 위함입니다. 

다만, 서버에서 다른 출처에서의 요청을 허용하게 해줄 수 있는 CORS 설정을 해준 경우는 접근할 수 있습니다. express.js에서는 cors 미들웨어로 상황에 맞게 cors 설정을 제어할 수 있습니다.