[기술면접]

Java Script

• Promise의 기능과 필요한 이유에 대해서 설명해주세요.
  
  Promise를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 최종 결과를 반환하는 것이 아니고 어떤 시점에 결과를 제공하겠다는 '약속'을 반환합니다. Promise 이전에는 비동기 처리로 콜백 패턴을 주로 사용했으나 콜백 지옥으로 인해 가독성이 나쁘고, 비동기 처리 중에 발생한 에러 처리가 까다로워 Promise는 이러한 단점을 보완하기 위해 나온 대안이며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있습니다.
  Promise는 결과를 값으로 받아서 저장할 수 있다는 것이 특징이고 결과 그 자체를 값으로 받기 때문에 연속으로 실행하는 코드에선 then()을 이용하여 더 가독성 있는 코드가 된다.
  
  Promise는 3가지 상태?
  Promise의 3가지 상태로는 대기, 이행, 실패가 있으며 대기는 비동기 처리 로직이 아직 미완료인 상태, 이행은 비동기 처리가 완료되어 Promise가 결과 값을 반환해준 상태, 실패는 비동기 처리가 실패하거나 오류가 발생한 상황
  
  
  
• 순수함수란 무엇인가요?
  
  함수형 프로그래밍에서 자주 사용되는 개념이며 순수 함수는 사이드 이펙트가 없어야 합니다. 즉, 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수를 순수 함수라고 하며 함수의 결과에 영향을 주는 함수를 의미하며 입력으로 전달된 값을 수정하지 않는 불변성을 가지고 있습니다. 순수 함수는 항상 같은 값이 반환 되는 것을 보장하고 순수 함수를 제작하기 위해 배열의 불변성을 보장하는 메서드인 map, filter, reduce가 각광받고 있습니다.
  
  사이드 이펙트는 무엇인가요?
  사이드 이펙트는 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 의미합니다.
  
  

React

• React의 state와 props에 대해서 설명해주세요.
  
  React state는 컴포넌트 내부에서 변할 수 있는 값을 의미하고 props는 상위 컴포넌트로 전달 받은 값을 의미합니다. React props는 함수의 전달인자처럼 전달 받아 사용할 수 있습니다. props는 중간에 변경하는 것을 권장하지 않고 상태 끌어올리기를 통해 상태를 변경시키고 변경된 상태값을 props로 내려주어 side effect를 최소화 시켜야 합니다.
  
  
• React 컴포넌트의 key 속성에 대해서 설명해주세요.
  
  Key는 엘리먼트 리스트를 만들 때 포함해야하는 속성입니다. Key는 React가 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 도우며 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. 
  
  → 인덱스를 사용하면 안 되는 이유
  
  
• useEffect의 dependency array에 대해서 설명해주세요.
  
  useEffect는 함수 컴포넌트 내에서 Side Effect를 수행할 수 있는 React Hook 입니다. 이 useEffect의 첫 번째 인자는 콜백 함수, 두 번째 인자는 배열입니다. 이 두 번째 인자의 배열을 dependency array라 부릅니다. useEffect는 dependency array의 value값이 변경될 때 마다 실행되기 때문에 모든 state가 아닌 종속성 배열로 전달받은 특정 state에 관해서만 Side Effect를 실행시킬 수 있습니다. 만약 dependency array가 빈 배열로 전달 되면 useEffect는 첫 렌더링 될 때만 실행 됩니다.
  
  

 

HTTP/네트워크

• CSR과 SSR의 차이점에 대해서 설명해주세요.
  
  렌더링이 되는 위치의 차이입니다.
  CSR은 클라이언트에서 페이지를 렌더링하고, SSR은 서버에서 페이지를 렌더링합니다. 
  CSR은 사용자가 다른 경로를 요청할 때 마다 페이지를 새로고침하지 않고 동적으로 라우팅을 관리합니다. 
  SEO(검색 엔진 최적화)가 우선 순위이며 웹 페이지의 첫 화면 렌더링이 빠르게 필요하고 사용자와의 상호작용이 적은 경우 SSR을 권장하고 , SEO가 우선 순위가 아니며 사이트에 풍부한 상호 작용이 있는 경우 CSR을 권장합니다. CSR은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다. 
  
  
• GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
  
  GET 메서드는 서버의 리소스를 조회하고 BODY를 가지지 않으며 query parameter를 사용하여 필요한 리소스를 전달할 수 있습니다.  POST 메서드는 서버의 리소스를 생성 또는 변경할 수 있으며 전달해야할 데이터를 Body에 담아 전달할 수 있습니다. 
  
  →cache 

 

웹서버 기초

• HTTP 메세지 구조에 대해 설명해주세요.
  
  start-line, HTTP headers, body로 나뉩니다. 
  start-line은 http 메서드, 요청 타겟, HTTP 버전으로 이루어져있으며, HTTP headers는 요청을 지정하거나, 메세지에 포함된 본문을 설명하는 헤더의 집합입니다. body는 HTTP 메세지 구조의 마지막에 위치하며 응답과 관련된 데이터 또는 문서를 포함합니다. POST나 PUT과 같이 데이터를 업데이트하기 위해 사용합니다. 
  
  
• Same-Origin Policy와 CORS에 대해서 설명해주세요.
  
  SOP는 '같은 출처의 리소스만 공유가 가능하다'라는 동일 출처 정책을 의미합니다. 여기서 출처는 URI의 프로토콜, 호스트, 포트을 의미합니다. 이 정책은 동일한 출처가 아닌 곳에서 요청이 오는 경우 해당 요청을 막아 보안을 유지하기 위해서입니다. 모든 브라우저는 기본적으로 SOP정책을 사용하고 있습니다.
  하지만, 다른 출처의 리소스를 사용하게 될 일이 생길 경우 CORS를 이용합니다. CORS는 Corss-Origin Resource Sharing으로 교차 출처 리소스 공유를 의미합니다. CORS는 다른 출처의 선택한 자원에 접근할 수 있도록 권한을 부여하는 것을 의미합니다.