JavaScript
Promise의 기능과 필요한 이유에 대해서 설명해주세요.
자바스크립트 비동식 코드의 순서를 제어하기 위해 쓰입니다.
비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리는 것이 아니라 다음 코드를 수행하는 것을 말합니다.
Promise 는 class 이기 때문에 new 키워드로 생성하고 콜백함수로 resolve, reject 를 인수로 전달받습니다. 내부에서 콜백함수를 비동기처리하는데 성공적으로 처리되었다면 resolve 함수를, 에러가 발생되었다면 reject 함수를 호출합니다. 그리고 내부 프로퍼티인 state, result는 직접 접근할 수 없기 때문에 후속 처리 메서드인 .then, .catch, .finally 를 이용하여 접근할 수 있습니다. 또한 이를 이용하여 프로미스 체이닝 즉, 여러 개의 비동기 함수를 연결시켜 동시에 혹은 병렬적으로 사용할 수 있습니다. 이는 콜백헬을 보완하는 장점이 있으나, 콜백헬 처럼 길고 복잡하게 쓰면 이 또한 Promise Hell 이 발생하게 되어 가독성이 떨어질 수 있습니다.
순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
순수함수란 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수이기 때문에 side effect 가 없습니다.
side effect 는 쉽게 말해서 외부 변수를 참조하거나, 변경하는 모든 종류의 코드를 말합니다.
입력으로 전달된 값을 수정하지 않아 불변성을 가지고 있습니다.
어떤 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 말합니다.
따라서 순수함수는 함수 내의 코드만 점검하면 되기 때무넹 간결하게 코드를 작성할 수 있습니다.
React
React의 state와 props에 대해서 설명해주세요.
React state 란 컴포넌트 내부에서 변할 수 있는 값을 말합니다. 예를 들어, input 태그에서 value 는 사용자가 입력하는 값으로 항상 바뀌기 때문에 state로 지칭할 수 있습니다.
이를 함수 컴포넌트 안에서 사용하고 관리할 수 있게 하는 hook 함수는 useState 입니다.
useState는 state 저장변수와 state 갱신 함수 두가지 쌍을 반환하고 구조 분해 할당한 변수라고 볼 수 있습니다. state 저장변수는 반드시 state 갱수 함수로 변경되어야 합니다.
React props 는 하위 컴포넌트가 상위 컴포넌트로부터 전달 받은 값을 말합니다. 읽기 전용으로 함수로 변경될 수 없는 불변성을 가진 객체입니다. props는 외부에서 전달받기 때문에 컴포넌트 내에서는 변경할 수 없는 값입니다. 따라서 lifting state up 상태 끌어올리기를 통해 부모 컴포넌트의 state 갱신 함수 자체를 자식 컴포넌트로 전달하고, 자식 컴포넌트가 이 함수를 실행함으로서, 상태를 변경시키고 변경된 상태값을 props로 전달해주어 side effect 를 최소화시킬 수 있습니다.
React 컴포넌트는 props를 함수의 전달인자처럼 전달 받아 이를 기반으로 화면에 어떻게 표시되는 지를 기술하는 React 엘리먼트를 반환합니다.
React 컴포넌트의 key 속성에 대해서 설명해주세요.
React 는 state 나 props 가 변할 때 마다 렌더링을 하는데, 변경되어 재렌더링될 때 모든 요소를 렌더링하는 것이 아니라 바뀐 부분만 렌더링하므로써 효율적인 렌더링을 시도합니다. 이는 key 속성을 부여하므로써 다른 컴포넌트들과 구분짓기 위해 사용하는데, 무조건적으로 해당 데이터가 갖는 고유한 id 값같이 key 또한 고유함을 보장해야 합니다.그래야 구분이 확실하게 되기 때문에 key 속성을 이용해 DOM 을 직접 제어하기 보다는 더 빠르게 렌더링할 수 있습니다.
useEffect의 dependency array에 대해서 설명해주세요.
dependency array 란 종속성 배열로 useEffect의 두번째 인자로, boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미하며 어떤 값의 목록이 들어갈 수 있습니다.
두번재 인자를 아무것도 없이 받으면 항상 렌더링시 useEffect 가 실행이 되고,
빈배열을 인자로 받았을 경우 첫 렌더링시에만 실행이됩니다.
따라서 어떤 값, state 등이 인자로 들어가면 첫 렌더링일 때와 그 값이나 state가 변경될 때만 인자로 받기 때문에 메모리 누수가 발생하지 않고 효율적으로 사용할 수 있게 됩니다.
HTTP/네트워크
CSR과 SSR의 차이점에 대해서 설명해주세요.
명확히 구분되는 차이점은 바로 페이지가 렌더링되는 위치입니다.
CSR 은 Client Side Rendring 으로 클라이언트 즉, 브라우저에서 페이지를 렌더링하고,
SSR 은 Server Side Rendering 으로 서버에서 페이지를 렌더링합니다.
좀 더 자세히 말하자면 , 최초 웹이 탄생하고 ajax가 보편화되기 전까지는 서버에서 html 파일을 모두 만들어서 브라우저에 전달하고 전달받은 브라우저는 해당 html 파일을 화면에 보여주는 SSR 방식을 사용했습니다. 이는 경로가 변경될 때마다 새로운 정적파일을 요청하고 응답받습니다. 이는 서버 과부하 이슈가 발생할 수 있습니다. 이후 ajax가 보편화 되면서 브라우저가 서버에 요청을 보내고 서버는 JavaScript 파일과 단일 페이지만 다시 클라이언트에 응답해 클라이언트가 웹페이지를 완전히 렌더링된 페이지로 바꾸어 렌더링하는 방식을 사용하기 시작했습니다. ajax 요청을 통해 페이지의 필요한 부분만 응답받아 렌더링하면서 빠른 라우팅을 할 수 있는 장점이 있습니다.
GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
GET 메서드는 서버에 존재하는 리소스를 조회하는 요청을 위한 메서드로, body 를 보내지 않는 것이 보편적이고 query parameter 나 path parameter 를 통해 구체적인 정보를 추가함으로써 요청을 구체화 시킬 수 있습니다.
POST 메서드는 새로운 리소스를 생성하는 요청을 위한 메서드로, body에 원하는 정보를 추가합니다.
여러번 실행을 해도 결과가 달라지지 않는 멱득성에 대해 조금만 말하자면
GET 메서드는 아무리 조회 요청을 여러 번 해도 서버의 상태는 변경시키지 않고 같은 응답을 회신받기 때문에 멱등성을 갖는다고 얘기할 수 있지만,
POST 메서드는 리소스를 새로 생성 요청을 무한대로 하면 이미 생성이 되어 있거나 변경되기 때문에 최초 응답과는 다른 회신을 받아 멱등성을 갖지 않습니다.
웹서버 기초
HTTP 메세지 구조에 대해 설명해주세요.
메세지는 크게 start-line/status-line, header, body 로 나뉩니다.
startline에 어떤 메서드인지, 어떤 url인지,http 버전으로 핵심정보가 들어있습니다.
statusline 도 비슷하나 프로토콜의 버전과 상태코드와 상태 텍스트 등의 핵심정보가 들어있습니다,.
header 는 공통으로 자주 다루는 정보가 들어있고
body에는 해당 요청이나 응답에서 꼭 다루어야 하는 중요한 정보를 담습니다. 예를 들어 요청인 경우 추가/변경/삭제를 하고 싶은 리소스에 대한 정보를 담거나 응답인 경우에는 요청자가 알아야하는 리소스에 대한 정보를 담습니다.
Same-Origin Policy와 CORS에 대해서 설명해주세요.
Same Origin Policy는 SOP로 줄여 동일 출처 정책을 의미합니다.
여기서 출처란 URI의 프로토콜, 호스트, 포트의 조합이 모두 같아야 같은 출처 Origin 라고 할 수 있는데요.
동일 출처 정책이란 앞서 말한 것과 같이 같은 출처의 리소스만 공유 가능한 것을 말합니다.
이 정책이 필요한 이유는 동일한 출처가 아닌 곳에서 요청이 오는 경우, 해당 요청을 막아 높은 보안성을 유지하기 위함입니다.
반면, 서버에서 다른 출처에서의 요청을 허용하게 해줄 수 있는 것이 CORS Cross-Origin Resource Sharing 교차 출처 리소스 공유입니다. HTTP 헤더의 CORS 설정을 사용하여 Access-Control-Allow-Origin 을 작성하여 다른 출처의 선택한 리소스에 접근할 수 있는 권한을 부여함으로써 SOP의 다른 리소스 공유 문제를 해결할 수 있습니다.
