Section 2. [기술 면접]

📌 JavaScript

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

➰ Promise는 자바스크립트 비동기 처리에 사용되는 객체로, 콜백 패턴이 가진 단점을 보완하며 비동기를 처리할 수 있습니다.

➰ 비동기란, 특정 코드의 실행이 완료될 때 까지 기다리지 않고 다음 코드를 먼저 수행하는 것을 말합니다.

➰ Promise를 사용하면 콜백을 중첩하여 사용하였을 때 일어나는 콜백지옥을 해결할 수 있습니다.

➰ Promise는 보통 서버에서 받아온 데이터를 처리하는 데에 사용됩니다.

➰ Promise는 대기, 이행, 거부 상태를 가지며 매개변수로 resolve와 reject 함수를 가집니다.

➰ Promise가 이행 상태인 경우 resolve 함수를 호출하고, 거부 상태인 경우 reject 함수를 호출합니다.

➰ then, catch, finally를 통해 상태에 따른 값을 처리할 수 있습니다.

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

➰ 순수함수란 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수로, 사이드 이펙트가 없어야 합니다.

➰ 여기서 사이드 이펙트란 함수 외부의 변수를 참조하거나 함수로 들어온 매개 변수를 변경하는 모든 코드를 말하며, 사이드 이펙트가 없기 위해서는 데이터의 불변성을 유지하는 것이 중요합니다.

➰ 함수 매개변수를 의도치 않게 변경하는 경우, 사이드 이펙트가 발생했다고 말하고, 결과적으로 이 함수는 순수함수라고 할 수 없습니다.

 

📌 React

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

➰ state는 컴포넌트 내부에서 변경될 수 있는 값으로, useState 함수를 통해 선언하고 변경할 수 있습니다.

➰ props는 부모 컴포넌트가 자식 컴포넌트에게 주는 데이터로, 직접적으로 수정할 수 없습니다.

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

➰ key는 리스트를 만들 때 포함해야 하는 고유한 값으로, 리액트가 필요한 요소만 리렌더링 하는 것을 돕습니다.

➰ 명시적으로 key를 지정하지 않으면 인덱스를 key로 사용하는데, 이는 권장하지 않습니다. 

➰ key 값이 겹쳐 예상치 못한 문제가 생길 수 있기 때문에 key는 항상 고유한 값이어야 합니다.

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

➰ useEffect는 첫번째 인자로 콜백 함수를 받고 두번째 인자로 배열을 받는데 이 배열을 dependency array 라고 합니다.

➰ dependency array가 빈 배열이라면 useEffect는 처음 렌더링 될 때만 실행되며, 특정 state의 값이 들어오면 그 state의 값이 변할 때 마다 useEffect가 실행됩니다.

➰ dependency array를 통해 특정 state에 대해 side effect를 실행시킬 수 있습니다.

 

 

📌 HTTP/네트워크

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

➰ CSR은 최초 로드 시 필요한 파일을 모두 받고, 사용자의 상호작용에 따라 클라이언트단에서 받아와 렌더링 해주는 방식입니다.

➰ SSR은 요청시마다 서버에 새로운 페이지를 요청하는 방식입니다.

 

➰ 웹 페이지를 로딩하는 시간, 검색 엔진 최적화, 서버 자원 사용에 대한 부분에 차이가 있습니다.

➰ CSR의 경우 HTML, CSS와 모든 스크립트를 한 번에 불러오기 때문에 첫 페이지 로딩 시간이 길고, SSR은 필요한 부분의 HTML과 스크립트만 불러오기 때문에 첫 페이지 로딩 시간이 비교적 빠릅니다.

➰ 나머지 로딩 시간은 CSR이 비교적 빠릅니다.

➰ CSR의 경우 동적으로 컨텐츠가 생성되기 때문에 검색 엔진에 최적화 되지 않고, SSR은 처음부터 서버에서 컴파일되어 클라이언트로 넘어오기 때문에 검색 엔진에 최적화 되어 있습니다.

➰ CSR은 클라이언트에 한번에 요청을 몰아주고 그 후로는 필요한 데이터만 갱신하기 때문에 서버 부하가 적고, SSR은 매번 서버에 요청 하기 때문에 서버 자원을 더 많이 사용합니다.

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

➰ GET은 서버에서 어떤 데이터를 요청할 때 사용하며 어떠 값이나 내용, 상태 등을 바꾸지 않습니다.

➰ 요청을 전송할 때 URL 주소 끝에 파라미터를 담은 쿼리 스트링을 포함하여 전송됩니다.

➰ GET은 데이터를 읽거나, 검색할 때 사용됩니다.

➰ POST는 데이터의 값이나 상태를 바꾸기 위해 서버에 데이터를 보내는 데 사용됩니다.

➰ GET과 달리 전송 할 데이터를 HTTP body에 담아서 전송합니다.

 

📌 웹서버 기초

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

➰ HTTP 메시지는 몇 줄의 텍스트 정보로 구성되며, 요청과 응답이 있습니다.

➰ start line, headers, body로 구성되며 start line은 요청이나 응답의 상태를 나타내며 항상 첫 번째 줄에 위치합니다. 응답에서는 status line 이라고 부릅니다.

➰ headers는 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다.

➰ body는 요청이나 응답과 관련된 데이터 또는 문서를 포함합니다.

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

➰ SOP는 같은 출처의 리소스만 공유가 가능한 정책이며, CORS는 교차 출처 리소스도 공유가 가능한 정책입니다.

➰ 다른 출처의 리소스를 사용할 때 나는 CORS에러는 결국 SOP 때문이며 이는 CORS를 사용하면 해결할 수 있습니다.

➰ CORS는 실제 요청을 보내기 전 프리플라이트 요청을 보내서 해당 출처 리소스에 접근 권한이 있는지 확인합니다.

 

🚨 예시에 대해 더 준비하자