JavaScript
Promise의 기능과 필요한 이유에 대해서 설명해주세요.
promise는 비동기 메서드를 동기적으로 사용할 수 있도록 이름 그대로 '미래 시점에 값을 처리하겠다는 약속'을 반환하는 기능입니다. 즉, 약속인 promise객체를 반환하며 이 값을 then, catch 등으로 연결(체이닝)하여 결과 값, 실패 등을 처리할 수 있습니다.
프로미스에는 new키워드로 생성하며 대기, 이행, 거부 이렇게 3가지 상태가 있습니다. 연산이 성공하면 이행, 실패하면 거부라고 하며 대기를 벗어나 이행 또는 거부되었을 경우 처리되었다고 합니다.
Promise가 필요한 이유는, 웹개발에서 비동기 메서드를 사용하면서 동기적으로 작업을 처리해야할 때 유용하기 때문입니다.
비동기는 웹개발에서 중요하지만 원하는 작업을 동기적으로 해주어야 할 때가 있습니다. 이 때 콜백함수를 사용하거나 promise를 사용하면 해결할 수 있습니다. 그런데 콜백함수를 사용하면 잦은 중첩으로 일명 콜백헬(collback-hell)이 발생하지만 promise를 사용하면 이를 해결할 수 있고 promise의 기능을 이용해 보다 효과적으로 동기적 메서드를 사용할 수 있습니다.
순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
순수 함수란 함수의 입력에 따라 같은 결과가 나오며 함수 내부에서만 영향을 주는 함수를 의미합니다. 즉 순수함수는 어떤 외부 상태에도 의존하지 않고 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값을 생성해 반환합니다. 여기서 사이드이펙트란 함수 내부의 구현이 함수 외부에 영향을 주는 경우를 의미하기 때문에 순수 함수는 사이드 이펙트가 발생하지 않고 함수의 겨로가가 함수의 입력이 아닌 달느 값에 영향을 받지 않는 불변성을 가집니다.
--- 예시
Math.random()은 순수 함수가 아닙니다. 입력은 같아도 결과가 항상 다르기 때문입니다.
타이머, 네트워크 요청, localstorage 사용은 순수 함수가 아닙니다. 부수효과를 발생시키기 때문입니다.
React에서 함수 컴포넌트는 순수 함수입니다. 입력은 props, 출력은 JSX element로 부수 효과가 발생하지 않기 때문입니다.
만약 fetch처럼 React와 관련없는 API를 사용하면 React에서는 순수함수라고 하지 않습니다.
React
React의 state와 props에 대해서 설명해주세요.
React에서 props와 state는 데이터를 다루는 개념입니다.
둘 다 JavaScript 객체이고 렌더링에 영향을 줍니다.props는 외부로부터 전달받은 값으로 해당 컴포넌트의 속성을 뜻합니다.이 props는 외부, 보통 상위 컴포넌트(부모 컴포넌트)에서 속성과 속성값으로 하위 컴포넌트에 전달됩니다.
props를 변경해주려면 부모 컴포넌트에서 변경해주어야 하고 전달받은 props는 읽기 전용으로만 사용합니다.
props는 외부에서 전달받아 컴포넌트 내에서는 변할 수 없는 값입니다. 그래서 리액트에서는 props를 중간에 변경하는 것을 권장하지 않고, 상태 끌어올리기를 통해 상태를 변경시키고 변경된 상태값을 props로 내려주어 side effect를 최소화시킵니다.
state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미하며,
state는 각각의 컴포넌트 내부에 존재하기 때문에 props와 다르게 변경이 가능합니다. 예를 들어,체크 여부확인, 토글 이벤트처럼 보통 이벤트나 함수에 의해 변경 되는 값은 state사용이 적절합니다. state는 값을 바꾸는 순간 렌더링을 일으키기 때문에 편리함이 있지만, 모든 데이터를 stste로 만드는 것은 resource면에서 오히려 비효율적이기 때문에, 어플리케이션을 만들기 전에 어떤 것을 state로 만들 것인지 고민하는 작업이 선행되어야 합니다.
_props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 정도로 볼 수 있습니다.
리엑트에서 props는 상위 컴포넌트에서 하위 컴포넌트로 정보를 전달하는 방법입니다.
props는 오직 외부에서 전달받는 값이기 때문에 컴포넌트 내에서 변경할 수 없습니다. 그래서 React는 하위컴포넌트에서 state를 변경해야 할 때, 상위 컴포넌트로부터 state변경 함수를 속성으로 받아 함수를 실행시키고, 상위 컴포넌트에 속한 state를 변경시키고 다시 변경된 상태값을 props로 받아 side effect를 최소화 시킵니다._
React 컴포넌트의 key 속성에 대해서 설명해주세요.
리액트는 JSX를 가지고 컴포넌트를 만들며 자바스크립트와 다르게 몇가지 지켜야할 규칙이 있는데요, 그 중 하나가 key 속성입니다.
리액트에서는 동일한 형태의 여러 HTML엘리먼트를 표현하기 위해서 map()을 사용합니다. 이 때 이 컴포넌트들을 정상적으로 렌더링하기 위해서는 각 요소의 고유한 속성이 필요한데 그것이 key 속성입니다. 때문에 map() 메서드를 사용할 때는 반드시 key 속성을 사용해야 합니다.
이 key 속성의 값은 반드시 변하지 않고, 유일해야 합니다. 그래서 주로 데이터의 ID값을 사용하며 랜덤으로 발생하거나 변하는 값은 사용해서는 안됩니다. Math.random()을 통해 생성하는 키 값은 중복값을 가질 수 있고 semantic하지 않기 때문에 지양합니다.
useEffect의 dependency array에 대해서 설명해주세요.
useEffect를 사용할 때 두가지 인자가 존재하며 첫번째 인자에는 함수, 두번째 인자에는 배열, 즉 종속성 배열이 들어갑니다.
이 종속성 배열은 dependency array라고도 하며, 이 배열 안에는 변경이 되는 값이 요소로 들어가며 이 요소를 조건이라고 합니다.
이 dependency array에 어떤 값이 들어가냐에 따라 첫번째 인자인 함수의 실행 조건이 달라지는데요, 크게 3가지가 있습니다.
첫째, dependency array를 아예 생략한다면 useEffect의 함수는 컴포넌트가 새롭게 렌더링될 때마다 실행됩니다.
두번째, dependency array에 아무런 요소가 없을 경우 함수가 한번만 실행됩니다. 주로 API를 통해 리소스를 응답받고 더 이상 API 호출이 필요하지 않을 때 사용합니다.
세번째, dependency array에 요소가 있다면, 그 요소가 조건이 되어 요소의 값이 변할 때마다 함수가 실행됩니다. 이 요소는 2개 이상이 있을수도 있습니다.
종속성배열: 종속성 배열이란, 배열 안에 종속성의 값들이 들어가는 것을 의미한다. 종속성의 값이란 쉽게 말해 변화되는 값들을 의미한다. state로 관리되는 변화되는 값이 될 수도 있고 event에 의해서 변화되는 값일 수도 있다. 이렇게 변화가 되는 값이 종속성 배열의 요소로 들어간다.
HTTP/네트워크
CSR과 SSR의 차이점에 대해서 설명해주세요.
웹 페이지를 클라이언트와 서버 중 어디서 렌더링하느냐에 따라 SSR과 CSR로 나뉩니다.
SSR은 Server Side Rendering으로 웹 페이지를 서버쪽에서 렌더링합니다. 만약 서버로 요청이 들어오면 서버는 데이터를 불러와 웹 페이지를 완전히 렌더링 된 페이지로 변환 후 클라이언트에 응답을 보냅니다.
CSR은 Client Side Rendering으로 클라이언트쪽에서 웹 페이지를 렌더링합니다. 만약 서버로 요청이 들어오면 SSR과 다르게 완성된 웹 페이지가 아니라 뼈대가 되는 단일 페이지와 자바스크립트 파일을 응답으로 보냅니다. 응답을 받은 후 브라우저에서 이 단일 페이지와 JS 파일로 웹 페이지를 렌더링합니다.
이 둘의 차이점으로 CSR의 경우 HTML과 CSS, 모든 스크립트들을 한번에 불러오는 반면, SSR은 필요한 부분의 HTML과 스크립트만 불러오기 때문에 첫 페이지 로딩시에는 SSR이 더 빠릅니다.
반면, 첫 페이지 로딩 이후, 사이트의 다른곳으로 이동하는 상황에서는, CSR은 이미 첫 페이지 로딩때, 나머지 부분을 구성하는 코드를 받아왔기에 빠른반면, SSR은 첫 페이지 로딩 과정을 다시 실행하기때문에 상대적으로 느립니다.
또한 SSR은 매번 서버에 요청을 보내기 때문에 서버 자원을 더 많이 사용합니다.
GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
웹에서 정보나 리소스를 요청할 때는 HTTP프로토콜을 사용하며 요청의 목적에 따라 다른 HTTP 메서드를 사용합니다. 이 중
GET 메서드는 특정 리소스를 수정하지 않고 조회하거나 받아와야 할 때 사용합니다.
반면 POST 메서드는 특정 리소스를 추가할 때 주로 사용하며 GET메서드와는 다르게 추가할 내용을 담은 요청 body가 필요합니다. POST는 데이터를 추가하기 때문에 서버의 리소스에 영향을 줄 수 있으므로 처리시 신중해야 합니다.
- 꼬리질문 캐시 - get은 같은거 또 보낼필요 없으므로
웹서버 기초
HTTP 메세지 구조에 대해 설명해주세요.
HTTP 메시지의 구조는 크게는 헤더와 바디로 나뉩니다. HTTP 메시지에는 요청과 응답 두 가지 유형이 있는데 둘 다 조금씩 차이가 있으나 유사한 구조를 가지고 있습니다.
먼저 헤더에는 start line과 HTTP headers가 있습니다.
start line은 응답시 status line이라고도 하며 항상 첫번 째 줄에 위치하여 요청이나 응답의 상태를 나타냅니다.
HTTP headers에는 요청을 지정하거나, 메시지에 포함된 본문을 설명합니다.
그 다음 헤더와 본문을 구분하는 빈 줄인 empty line이 있습니다.
마지막으로 body는 payload라고도 하며 요청 및 응답과 관련된 데이터, 문서를 포함합니다. 이 바디는 선택적으로 사용합니다.
Same-Origin Policy와 CORS에 대해서 설명해주세요.
SOP(Same-Origin Policy)란 동일 출처 정책, 즉 같은 '출처'의 리소스만 공유가 가능하다는 의미입니다.
여기서 출처란 URL의 프로토콜, 호스트, 포트를 의미하며 이 중에 하나라도 다르면 같은 출처라고 할 수 없습니다.
이 SOP가 있어서 서버에서 해킹의 위협을 받을 수 있는 경로를 줄일 수 있고 다른 사이트와의 리소스 공유를 제한하므로 모든 브라우저에서 기본적으로 사용하고 있는 정책입니다.
그런데 만약 이 상황에서 만약 다른 출처의 리소스를 받와야 할 때는 CORS를 사용해야 합니다.
CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유로, 한 출처의 웹 앱이 다른 출처의 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 역할을 합니다.
그래서 다른 출처로 요청할 때 브라우저는 실제 리소스를 요청하지 않고 먼저 프리플라이트 요청을 통해 접근 권한을 확인합니다. 이 때 만약 CORS에 접근권한을 얻지 못하고 리소스 요청을 하면 콘솔에 에러가 뜹니다.
이 때는 서버에서 CORS 설정을 통해 서버의 응답 헤더에 ‘Access-Control-Allow-Origin’을 작성하면 브라우저는 접근 권한을 얻을 수 있게 됩니다.
