면접준비

JavaScript

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

프로미스는 네트워크요청, 파일로드 같은 시간이 오래걸리는 작업을 비동기처리하기 위한 객체입니다. 성공적으로 작업이 완료된 경우와 실패한 경우 모두에 대한 처리 방법을 제공합니다. 비동기작업이 성공한경우 resolve 메서드를 호출하여 결과를, 실패하면 reject메서드를 호출하여 에러를 전달합니다.

프로미스를 사용하면 비동기 작업이 완료될 때까지 코드의 실행을 차단하지 않으면서 결과를 다룰 수 있습니다. 이를 통해 비동기 작업의 결과를 쉽게 처리할 수 있으며 콜백함수를 이용한 비동기 처리보다 코드 가독성이 좋고 유지보수하기 쉽게 만들 수 있습니다.

 

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

순수 함수란 입력값에 대해 항상 동일한 결과를 반환하며, 함수 외부의 어떤 상태도 변경하지 않는 함수를 말합니다.

이러한 순수 함수의 특징으로는 불변성(immutability)이 있습니다. 불변성이란 객체나 변수의 값이 변경되지 않는 상태를 말합니다. 순수 함수에서는 함수 내부에서 사용하는 변수나 객체가 불변하기 때문에 함수 외부에서 함수 호출에 영향을 주는 사이드 이펙트(side effect)가 발생하지 않습니다.

사이드 이펙트란 함수 호출로 인해 함수 외부의 상태가 변경되는 것을 말합니다. 예를 들어, 함수가 외부에 선언된 변수의 값을 변경하거나, 파일을 쓰거나, 네트워크를 통해 데이터를 전송하는 등의 작업이 이에 해당됩니다. 순수 함수에서는 사이드 이펙트가 없기 때문에 함수 호출 결과가 예측 가능하고 안정적이며, 함수를 디버깅하거나 테스트하는 것이 쉽습니다.

순수 함수는 입력값에 대해 항상 동일한 출력값을 반환하는 함수를 말합니다. 즉, 함수 내부에서 외부 상태를 변경하지 않고, 함수를 호출할 때마다 동일한 결과를 반환합니다.

반면에, 함수 내부에서 외부 상태를 변경하거나, 함수 외부에 영향을 미치는 동작을 수행하는 경우 해당 함수는 부수 효과(side effect)를 가지고 있습니다. 이러한 함수는 순수 함수가 아니며, 같은 입력에 대해서도 다른 결과를 반환할 수 있습니다.

React

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

props는 리액트에서 컴포넌트의 속성을 의미합니다. 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할때 사용합니다. Props는 읽기 전용 데이터로 컴포넌트 내에서 직접 수정할 수 없습니다.

state는 컴포넌트 내에서 변할 수 있는 데이터 입니다. 데이터가 변경될 때마다 react는 자동으로 컴포넌트를 렌더링해서 변경된 데이터를 반영합니다. useState 훅을 사용해서 관리 할 수 있습니다.

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

key 속성은 react컴포넌트를 식별하는 유일한 값입니다. 컴포넌트가 업데이트 될 때 React가 이전에 렌더링된 컴포넌트와 새로운 컴포넌트를 비교하는데 사용됩니다.

예를들어서 리스트를 업데이트 하는 경우 각 항목에 고유한 key값을 할당하면 항목을 업데이트 할 때 더욱 효율적으로 처리할 수 있습니다.

key속성은 컴포넌트 내부에서 사용되지 않으며 오직 react에서 렌더링 할 때만 사용됩니다. 그래서 key값은 고유하고 변경되지 않은 값이어야 합니다.

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

종속성 배열은 useEffect훅 사용시 두번째 인자로 들어가는 배열입니다. 이 배열은 어떤 값의 변경이 일어날때의 조건을 담고 있습니다. 그래서 아무것도 넣지 않으면 컴포넌트가 생성될때, porps가 업데이트될때, 상태가 업데이트 될때 모두 effect함수가 실행이됩니다.

빈배열로 들어가게된다면 변경이 일어날때의 조건이 없는 것이므로 최초 렌더링 될 때에만 effect함수가 실행이 됩니다. 외부 API를 통해 리소스를 받아오고 더이상 호출이 필요하지 않을 때 사용할 수 있습니다.

HTTP/네트워크

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

CSR과 SSR의 차이는 렌더링 되는 위치가 기준입니다.

SSR은 서버에서 페이지를 렌더링하고 완전한 HTML 파일을 브라우저에 전송합니다. 클라이언트에서는 서버에서 받은 HTML 파일을 보여주고 자바스크립트를 사용해 서버로부터 필요한 데이터를 요청합니다. SSR의 장점은 첫 화면 로딩 시간이 빠르다는 것입니다. 단점은 서버에 부하가 많이 걸리고 자바스크립트 파일을 받아오는 시간이 필요하기 때문에 초기 로딩 속도가 느릴 수 있다는 것입니다.

CSR은 브라우저에서 자바스크립트를 사용해 페이지를 렌더링합니다. 서버는 단지 초기 HTML 파일과 자바스크립트 파일을 제공하는 역할만 수행합니다. 클라이언트는 HTML 파일과 자바스크립트 파일을 받아오고, 자바스크립트를 사용해 필요한 데이터를 요청합니다. CSR의 장점은 초기 로딩 속도가 빠르다는 것입니다. 단점은 초기 화면 로딩 후에 자바스크립트 파일을 받아오고 렌더링하기 때문에 초기 로딩 속도가 느릴 수 있다는 것입니다. 또한 검색 엔진 최적화(SEO)에 불리할 수 있습니다.

요약하면, SSR은 서버에서 페이지를 렌더링하고 완전한 HTML 파일을 브라우저에 전송하는 반면 CSR은 브라우저에서 자바스크립트를 사용해 페이지를 렌더링합니다.

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

GET요청은 데이터를 조회할 때 사용하며 요청 매개변수가 URL에 데이터가 노출될 수 있고 POST는 데이터 전송할 때 사용하며 요청 매개변수가 URL에 데이터가 노출되지 않는다.

GET과 POST는 둘 다 리소스를 조회할때 사용할 수 있습니다. 하지만 GET메서드는 캐싱 즉 리소스를 미리 저장할 수 있기 때문에 웹 페이지 로딩 속도를 향상시킬 수 있습니다. 하지만 POST는 보안 등의 이유로 캐싱을 할 수 없는데요 민감한 정보를 전송할 때 사용합니다.

그래서 데이터 조회를 목적으로 하는 경우 GET 요청을 민감한 정보를 전송해야할 경우 POST를 사용하는것이 좋습니다.

웹서버 기초

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

HTTP 메세지는 요청과 응답 두가지 유형이 있습니다. 이 두 유형은 비슷한 구조를 가집니다.

먼저 응답이나 요청의 상태를 나타내는 start line 은 항상 첫 줄에 위치합니다.

다음으로는 요청을 지정하거나 메세지에 포함된 본문을 설명하는 HTTP headers

헤더와 본문을 구분하는 빈줄인 empty line

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

이중 start line과 HTTP headers를 묶어 헤드라고 하고 payload는 body 라고 합니다.

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

SOP는 프로토콜, 호스트, 포트가 같은 출처에서만 리소스 공유가 가능하도록 제한하는 정책입니다. 개인정보같은 중요한 정보를 사용하고 이를 다른 사이트가 이용할 수 있다면 매우 위험할 것입니다. 이는 보안을 위해 중요한 역할을 합니다. 하지만 다른 출처의 리소스를 사용해야 할 때가 있으므로 CORS라는 체제가 등장했습니다.

CORS는 브라우저에게 다른 출처의 자원에 접근 권한을 부여함으로써 SOP에서 막힌 다른 출처의 리소스를 사용할 수 있도록 합니다. 따라서 CORS를 통해 안전하게 교차 출처 리소스 공유를 할 수 있습니다.