Session2 기술면접 준비

JavaScript

 

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

Promise는 비동기적인 작업을 처리할 때 사용되는 자바스크립트 객체입니다. 
Promise는 다음과 같은 기능을 가지고 있습니다.

1. 비동기적인 작업을 처리할 수 있습니다.
2. 동기적인 작업이 완료되었을 때, 결과를 처리할 수 있습니다.
3. 여러 개의 비동기적인 작업을 순차적으로 실행할 수 있습니다.
4. 비동기적인 작업이 실패했을 때, 에러를 처리할 수 있습니다.

Promise는 필요한 이유도 많이 있습니다. 
비동기적인 작업은 시간이 걸리는 작업이므로, 작업이 완료될 때까지 기다리지 않고 다른 작업을 처리할 수 있습니다. 
예를 들어, 웹 페이지에서 데이터를 불러올때, 이렇게 하면 웹 페이지가 멈추지 않고 사용자에게 즉시 표시될 수 있습니다.

 

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

순수함수(Pure function)는 입력값을 받아서 출력값을 반환하는 함수이며, 다음과 같은 특징을 가지고 있습니다.

1. 동일한 입력에 대해 항상 동일한 출력을 반환합니다.
2. 함수 외부의 어떠한 상태도 변경하지 않습니다. 즉, 사이드 이펙트(side effect)가 없습니다.
3. 함수 내부에서 전역 변수(global variable)를 사용하지 않습니다.

순수 함수는 입력값에만 의존하며, 함수 외부의 상태나 다른 변수를 변경하지 않기 때문에 예측 가능하고 테스트하기 쉬워집니다. 
이러한 불변성(immutability)은 프로그램의 안정성과 예측 가능성을 높입니다

반면, 사이드 이펙트는 함수 외부의 상태를 변경하는 것을 말합니다. 
예를 들어, 파일 시스템을 변경하거나 전역 변수를 수정하는 것은 모두 사이드 이펙트입니다. 이러한 사이드 이펙트는 예측하기 어렵기 때문에 버그의 발생 가능성이 높아집니다. 
따라서 순수 함수의 경우에는 사이드 이펙트를 최소화하는 것이 좋습니다.

React

 

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

React는 컴포넌트 기반의 JavaScript 라이브러리이며, state와 props는 React에서 중요한 개념 중 하나입니다.
state는 컴포넌트 내부에서 유동적인 데이터를 관리하기 위한 객체입니다. 즉, 컴포넌트가 렌더링될 때마다 값이 변경될 수 있는 데이터를 관리하는 데 사용됩니다. state는 클래스형 컴포넌트와 함수형 컴포넌트에서 모두 사용할 수 있습니다. 상태를 변경하려면 setState() 메서드를 사용해야 합니다. setState()를 호출하면 React는 해당 컴포넌트를 다시 렌더링합니다.

props는 컴포넌트 간에 데이터를 전달하기 위한 객체입니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. props는 컴포넌트를 생성할 때 설정되고, 컴포넌트 내에서 변경할 수 없습니다. props는 함수형 컴포넌트에서만 사용할 수 있습니다.

 

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

React에서 컴포넌트를 렌더링할 때, 각각의 컴포넌트는 고유한 식별자인 key 속성을 가져야 합니다. key 속성은 React가 렌더링되는 동안 각각의 컴포넌트를 식별하는 데 사용됩니다.

key 속성은 컴포넌트 배열을 렌더링할 때 특히 중요합니다. 배열 내에서 각각의 요소는 고유한 인덱스를 가지지만, 인덱스가 변경될 경우 배열 전체를 다시 렌더링해야 하기 때문에 성능 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해서는 각 요소에 고유한 key 값을 지정해야 합니다.

 

 

 

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

useEffect는 React Hooks 중 하나로, 함수 컴포넌트에서 Side Effect를 수행하기 위해 사용됩니다. Side Effect란 컴포넌트 외부에 영향을 미치는 작업으로, 대표적으로 API 호출, DOM 조작, 타이머 설정 등이 있습니다. useEffect를 사용하면 컴포넌트가 렌더링될 때마다 실행되는 것이 아니라, 특정 상황에 한 번만 실행되도록 할 수 있습니다.

useEffect 함수는 두 개의 인자를 받습니다. 첫 번째 인자는 Side Effect를 수행할 함수이며, 두 번째 인자는 의존성 배열(dependency array)입니다. 의존성 배열은 Side Effect를 언제 실행할지를 결정하는데 사용됩니다.

만약 의존성 배열이 빈 배열([])로 지정된 경우, useEffect는 컴포넌트가 처음 마운트될 때에만 한 번 실행됩니다. 즉, 이벤트 리스너를 등록하거나 API 호출 등의 작업을 한 번만 수행할 때 사용합니다.

의존성 배열에 변수가 포함된 경우, 해당 변수의 값이 변경될 때마다 useEffect가 실행됩니다. 이를 통해 컴포넌트가 업데이트될 때마다 Side Effect를 실행할 수 있습니다. 예를 들어, 다음과 같은 코드는 count 값이 변경될 때마다 Side Effect를 실행합니다.

 

 

HTTP/네트워크

 

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

CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)은 웹 애플리케이션에서 페이지를 렌더링하는 방법입니다. 

클라이언트 사이드 렌더링(CSR)
CSR은 웹 브라우저에서 모든 렌더링을 처리하는 방식입니다. 
즉, 서버에서는 초기에 HTML, CSS, JS 파일을 전송하고, 웹 브라우저에서 JS 파일을 다운로드한 후, 해당 파일을 실행하면서 페이지를 렌더링합니다. 
이렇게 하면, 웹 페이지 로딩이 빨라지고, 사용자 상호작용이 활발히 일어납니다.

하지만, CSR은 초기에 렌더링되는 HTML 파일이 비어 있으므로, 검색 엔진 최적화(SEO)에 좋지 않습니다. 
또한, JS 파일을 다운로드해야 하므로 초기 로딩 시간이 느릴 수 있습니다. 
따라서, CSR은 주로 대규모 싱글 페이지 애플리케이션(SPA)에서 사용됩니다.

서버 사이드 렌더링(SSR)
SSR은 서버에서 페이지를 렌더링하는 방식입니다. 즉, 서버에서 요청을 처리하면서 HTML 파일을 생성하고, 이를 클라이언트에 전송합니다. 
이렇게 하면, 초기 로딩 시간이 빨라지고, 검색 엔진 최적화(SEO)에 좋습니다.

하지만, SSR은 서버에서 모든 렌더링을 처리하므로, 서버의 부하가 매우 커질 수 있습니다. 
또한, 사용자 상호작용이 활발히 일어나지 않을 수 있습니다. 
따라서, SSR은 주로 검색 엔진 최적화(SEO)가 중요한 경우나, 초기 로딩이 빠르게 전달되어야 하는 경우에 사용됩니다.

 

 

 

 

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

GET 메서드와 POST 메서드는 HTTP 프로토콜에서 가장 많이 사용되는 메서드입니다. 

이 두 가지 메서드의 주요 차이점은 데이터 전송 방식, 요청의 의미, 캐싱 등이 있습니다.

데이터 전송 방식
GET은 데이터를 URL 뒤에 쿼리스트링(Query String) 형태로 전송하며, POST는 데이터를 HTTP 메시지 본문에 담아서 전송합니다. GET은 URL에 데이터가 노출되기 때문에 보안에 취약하며, 전송할 수 있는 데이터 크기가 제한적입니다. 반면에 POST는 본문에 데이터를 담아서 전송하기 때문에 GET보다 보안성이 높으며, 데이터 크기에 제한이 없습니다.

요청의 의미
GET은 서버에서 데이터를 조회할 때 사용되는 메서드입니다. 즉, 요청을 받은 서버는 요청된 정보를 찾아서 클라이언트에게 응답합니다. 반면에 POST는 서버에 새로운 데이터를 생성하거나 업데이트할 때 사용되는 메서드입니다. 즉, 요청을 받은 서버는 요청된 데이터를 받아서 처리하고, 결과를 클라이언트에게 응답합니다.

캐싱
GET 요청은 브라우저 캐싱이 가능합니다. 즉, GET 요청으로 받은 데이터는 브라우저에 캐시되어 있다면, 다음에 같은 요청이 들어올 때는 서버로부터 데이터를 다시 받아오지 않고, 캐시된 데이터를 사용합니다. 반면에 POST 요청은 브라우저 캐싱이 불가능합니다. 즉, 같은 요청이 들어올 때마다 서버로부터 데이터를 다시 받아와야 합니다.

안전성
GET 요청은 데이터가 URL에 노출되기 때문에 보안에 취약합니다. 사용자가 요청한 데이터가 URL에 노출되어 있으면, 다른 사람이 URL을 복사해서 사용할 수 있습니다. 반면에 POST 요청은 본문에 데이터를 담아서 전송하기 때문에 보안성이 높습니다. 따라서, 중요한 정보를 전송할 때는 POST를 사용하는 것이 좋습니다.

 

 

웹서버 기초

 

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

HTTP 요청 메시지는 클라이언트에서 서버로 전송되는 메시지입니다. 
요청 메시지는 세 가지 부분으로 구성됩니다.

요청 라인(Request Line)
HTTP 요청 메시지의 첫 번째 줄로, 요청 방법, 요청 URL, HTTP 프로토콜 버전으로 구성됩니다.
요청 헤더(Request Header)
HTTP 요청 메시지의 두 번째 줄부터 빈 줄 이전까지는 요청에 대한 부가 정보가 포함됩니다. 요청 헤더는 이름-값 쌍의 형태로 구성되며, 각각의 이름-값 쌍은 콜론(:)으로 구분됩니다.
요청 본문(Request Body)
HTTP 요청 메시지의 빈 줄 이후에는 요청 메시지 본문이 포함됩니다. 요청 본문은 POST 요청 등에서 사용되며, 클라이언트가 서버에 전송하는 데이터가 들어갑니다.

응답 메시지(Response Message)
HTTP 응답 메시지는 서버에서 클라이언트로 전송되는 메시지입니다. 
응답 메시지는 세 가지 부분으로 구성됩니다.

상태 라인(Status Line)
HTTP 응답 메시지의 첫 번째 줄로, HTTP 프로토콜 버전, 상태 코드, 상태 메시지로 구성됩니다.
응답 헤더(Response Header)
HTTP 응답 메시지의 두 번째 줄부터 빈 줄 이전까지는 응답에 대한 부가 정보가 포함됩니다. 응답 헤더는 요청 헤더와 동일하게 이름-값 쌍의 형태로 구성되며, 각각의 이름-값 쌍은 콜론(:)으로 구분됩니다.
응답 본문(Response Body)
HTTP 응답 메시지의 빈 줄 이후에는 응답 메시지 본문이 포함됩니다. 응답 본문은 클라이언트에게 보내는 데이터가 들어갑니다.

 

 

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

Same-Origin Policy는 웹 보안의 핵심 개념 중 하나로, 웹 페이지의 JavaScript 코드가 다른 도메인으로부터의 리소스에 접근하는 것을 방지하는 정책입니다. 즉, 동일 출처(origin)에서만 자원을 요청할 수 있도록 제한하는 보안 기능입니다. 출처는 스키마, 호스트, 포트의 조합으로 결정됩니다.

CORS(Cross-Origin Resource Sharing)는 Same-Origin Policy를 우회하기 위한 메커니즘입니다. 
CORS는 서로 다른 출처(origin) 간의 자원 공유를 허용합니다. 
예를 들어, 사용자가 A 도메인에 있는 웹 페이지에서 B 도메인에 있는 이미지를 보려고 할 때, Same-Origin Policy로 인해 해당 이미지를 로드할 수 없습니다. 
하지만, B 도메인의 서버에서 CORS 헤더를 설정하면 A 도메인의 웹 페이지에서 해당 이미지를 불러올 수 있습니다.

CORS는 웹 브라우저에서 실행되며, 다음과 같은 세 가지 메커니즘을 사용합니다.

1.프리플라이트 요청
클라이언트가 서버로 요청을 보내기 전에, 먼저 서버로부터 허용 여부를 묻는 프리플라이트 요청을 보냅니다. 서버는 이 요청에 대한 응답으로 헤더를 보내서 클라이언트가 요청을 보낼 수 있는지 여부를 결정합니다.
2.요청 헤더
클라이언트가 서버로 요청을 보낼 때, 특정 헤더를 요청 헤더에 추가합니다. 이 헤더는 서버에서 허용되는 출처와 메서드를 지정합니다.
3.응답 헤더
서버가 클라이언트로 응답을 보낼 때, 특정 헤더를 응답 헤더에 추가합니다. 이 헤더는 클라이언트가 자원을 사용할 수 있는지 여부를 결정합니다.

CORS는 웹 애플리케이션 개발에서 매우 중요한 역할을 합니다. 
서로 다른 출처의 자원을 공유하면서도 보안을 유지할 수 있기 때문입니다.