JavaScript
- Promise의 기능과 필요한 이유에 대해서 설명해주세요.
promise는 비동기함수의 순서를 제어하고 싶을 때 사용하는 callback 함수의 chain을 다룰 때 사용합니다.
만약 promise가 없다면 callback 함수의 코드가 옆으로 계속 증식하는 callback hell 현상이 일어나며,
직관적인 코드를 짜기 위해서는 필수적입니다.
단, promise에도 hell이 있습니다. 대신 그때는 return을 잘 활용해서 promise chaining으로 해결하거나,
async await로 해결할 수 있습니다.- 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
순수함수는 함수의 입력 값만이 결과에 영향을 주는 immutable한 함수입니다.
따라서 절대로 원본을 훼손해서는 안됩니다. 전달인자가 주어질 때마다 항상 똑같은 값을 리턴하고,
그래서 예측 가능합니다. 또, 함수 내부의 구현이 함수 외부에 영향을 끼치는 side effect 현상이 일어나지 않습니다.
단, effect hook은 순수함수이면서 side effect가 일어납니다.React
- react의 state와 props에 대해서 설명해주세요.
state는 상태라는 뜻으로 react component 내부에서 변할 수 있는 값입니다.
props는 반대로 외부, 즉 상위 component로부터 전달받아 이미 정해져 있는 값입니다.
객체형태로 존재하고, 변경할 수 없는 값이므로 읽기 전용으로 쓰입니다.- React 컴포넌트의 key 속성에 대해서 설명해주세요.
React 컴포넌트에서 map을 사용할 때 고유한 key속성을 넣어주어야 에러가 발생되지 않습니다.
그 이유는 react에서 자식요소의 렌더링 시 반복적으로 렌더링이 될 때 key속성이 있으면
새롭게 추가되는 요소만 렌더링 되기 때문에 효율적인 랜더링을 위해서 key를 사용합니다.- useEffect의 dependency array에 대해서 설명해주세요.
useEffect(Effect Hook)의 dependency array는 2개의 인자를 가지고 있습니다.
첫 번째는 함수, 두 번째는 종속성 배열 값입니다. 실행의 방식과 결과는 3가지로 나뉩니다.
1. 종속성 배열 값이 비어있을 때에는 처음 생성될 때, props, state가 업데이트 될 때마다 계속 실행합니다.
2. 종속성 배열 자리에 빈 배열이 제공됐을 때는 컴포넌트 실행의 첫번째에만 실행합니다.
3. 배열 안에 값이 있으면 그 값이 업데이트 될 때마다 실행합니다.HTTP/네트워크
- CSR과 SSR의 차이점에 대해서 설명해주세요.
CSR은 Client Side Rendering이고 SSR은 Server Side Rendering입니다.
이름에서 알 수 있듯 CSR은 웹 페이지를 클라이언트, 즉 웹브라우저에서 렌더링하고, SSR은 서버에서 렌더링합니다.
우선 CSR은 아고다와 같은 예약사이트에서 많이 쓰이는데요,
브라우저가 서버에 웹페이지 파일을 요청할 때 서버는 DB에 Fetch를 사용해서 원하는 일부 데이터만 변환해 가지고 옵니다.
따라서 사용자가 다른 경로로 갈 때마다 새 파일로 리로드할 필요가 없으며,
검색엔진 최적화보다 사이트 상호작용과 사용자의 더 나은 경험을 위해서는 동적렌더링이 빠른 CSR을 사용하면 좋습니다.
반대로 SSR은 검색엔진 최적화가 중요한 네이버 블로그나,
사이트에서의 다양한 상호작용보다는 빠른 렌더링이 필요한 기사 노출 사이트에 쓰면 좋습니다.
브라우저가 서버에 웹페이지 파일을 요청할 때 DB에서는 해당 파일을 그대로 서버에 전달하며,
서버는 완전히 렌더링 된 페이지 자체로 브라우저에 전달하므로 SSR은 첫 화면 렌더링이 빠르고 개별 파일 용량이 적습니다.
또한 매번 파일을 전달하는 것이므로 사용자가 다른 경로로 갈 때마다 리로드됩니다.- GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
GET method는 정보를 조회, 즉 Read할 때 사용하고, POST method는 정보를 추가할 때, 즉 Create할 때 사용합니다.
GET method는 값을 불러오기만 하지 수정할 순 없으며, POST method는 마찬가지로 값을 수정할 수는 없지만
추가할 수는 있습니다. 만약 수정을 원한다면 PUT method로 Update를 하거나,
Delete method로 값을 삭제할 수 있습니다. (body에 대한 부분 추가 예정)웹서버 기초
- HTTP 메세지 구조에 대해 설명해주세요.
HTTP의 메시지 구조는 크게 요청과 응답으로 나뉩니다.
요청과 응답 모두 header와 body를 포함하는데요, header는 필수지만 body는 필요에 따라 선택적으로 사용합니다.
먼저 header에는 요청과 응답 상태를 나타내는 start line이 있고, 응답에선 이걸 status line이라고 합니다.
또 header 안에는 general, request, Representation header들이 있습니다.
general은 메시지 전체에 적용되며 body와는 연관이 없습니다.
request는 Fetch를 통해 가져올 리소스나 클라이언트 자체의 자세한 정보를 포함합니다. Representation은 body에 담긴 리소스의 정보를 포함합니다.
콘텐츠 길이나 타입 등을 포함한 정보 말입니다. 만약 body가 없다면 이건 사용하지 않아도 됩니다.
body가 필요하다면 header와 body 사이에 둘을 구분하는 공백줄인 empty line이 있습니다.
그 아래 body는 HTTP 메시지 맨 마지막에 위치하며 서버에 리소스를 요청하는 경우에는 사용하지 않습니다.
대신 데이터 업데이트를 위해 POST나 PUT 등의 요청을 할 때는 필요합니다.
resource의 개수로 구조가 나뉘는데요, 헤더 두 개로 정의된 단일 파일로 구성됐다면
단일-리소스 본문(Single-resource bodies), 여러 파트로 구성되어 파트마다 다른 정보를 가지고 있다면
다중-리소스 본문(Multiple-resource bodies)라고 합니다.- Same-Origin Policy와 CORS에 대해서 설명해주세요.
Same-Origin Policy는 동일 출처 정책이고, 같은 출처의 자원만 공유가 가능합니다.
로그인 정보가 다른 사이트로 새나가지 못하며, 보안을 위해 모든 사이트에서 사용중인 정책입니다.
CORS는 Cross-Origin Resource Sharing으로 교차 출처 리소스 공유입니다.
추가로 HTTP header를 사용해 한 출처에서 실행 중인 웹 앱이 다른 출처에 자원에 접근할 수 있는 권한을 부여하도록
브라우저에 알리는 체제입니다. CORS에는 프리플라이트 요청(Preflight Request), 단순 요청(Simple Request),
인증 정보를 포함한 요청(Credentialed Request)이 있습니다.
