Section 2 마무리 (기술면접 질문)

JavaScript

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

   • Promise는 자바스크립트에서 비동기 처리에 사용되는 객체입니다. 기존에 사용하던 콜백 방식에서 예외, 에러 처리의 어려움과 callback 함수가 중첩되어 있을 경우 가독성이 떨어 지던 콜백 지옥의 단점을 보완해 주며 생성되고 종료될 때까지 대기(pending), 이행(fulfilled), 실패(rejected) 세 가지의 상태를 가지고 있습니다. 이행 상태일 때는 then을 이용하고 실패 상태가 되면 catch를 이용하여 다음 행동을 처리할 수 있도록 하여 앞선 문제들을 보완하였습니다.

   • 자바스크립트 안에서 요청을 비동기 적으로 수행하기 위해 필요합니다. 동기와 비동기는 어떠한 행위를 할 때 그 행위가 동기적이라면 요청 후에 응답을 받을 때까지 다른 동작을 수행할 수 없는데 이때 브라우저의 화면이 멈춘 것처럼 보이게 됩니다. 반대로 비동기적으로 요청을 할 수 있다면 요청을 보내고 응답이 돌아올 때까지 다른 작업을 수행할 수 있으며 promise가 이 역할을 수행합니다.

   • 여러 가지의 비동기 작업을 동시에 처리하고 순서를 유지하기 위해 사용하는데, promise를 요소들로 하는 배열은 전달 인자로 받아서 이후에 then으로 resolve된 비동기 작업을 처리할 수 있습니다.

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

   • 순수 함수는 함수에 동일한 인자가 주어졌을 때 항상 같은 값을 리턴하는 함수입니다 외부의 상태를 변경하지 않는 함수도 포함이 되며 순수 함수는 항상 같은 값을 리턴하기 위해 외부의 값을 참조하지 않습니다.

   • 다시 말해, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미하는데, 순수 함수는 네트워크 요청과 같은 side effect가 없고 입력으로 전달되는 값을 수정하지 않는 불변성을 갖고 있습니다.

   • side effect는 함수가 실행이 될 때 함수 외부의 상태를 변경하거나 네트워크 요청 등의 동작을 말하는데 함수의 실행 결과를 예측하기 어렵게 만듭니다. 불변성은 함수를 실행하였을 때 전달된 원본의 값을 수정하지 않는 특성이며 이러한 두 가지 특성 덕분에 순수 함수는 전달된 인자가 동일하다면 항상 같은 결과를 보장합니다.

React

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

   • props와 state는 리액트에서 다루는 데이터의 개념입니다. state는 컴포넌트의 사용 중에 컴포넌트 내부에 변할 수 있는 값을 의미하며 props는 상위 컴포넌트로부터 전달받는 변하지 않는 값을 의미합니다.

   • state는 값이 변경될 때마다 컴포넌트에서 리렌더링이 되며, 컴포넌트 내부에서 업데이트 되는 값에 state를 사용합니다. state를 업데이트 하기 위해 useState Hook을 사용할 수 있습니다.
     props는 앞서 말한 것 처럼 변하지 않는 값으로, 상속받는 컴포넌트 내에서는 수정이 불가능하기 때문에 읽기 전용이라는 특징을 가지고 있습니다.

   • 간혹 버튼 클릭 이벤트과 같은 하위 컴포넌트 조작을 통해 상위 컴포넌트의 state를 업데이트 해야할 때가 있는데, 이 때 하위 컴포넌트에서 데이터를 직접 상위로 전달하는 것은 위에서 아래로 흐르는 리액트의 단방향 데이터 흐름의 원칙에 부합하지 않습니다.
     단방향 데이터 흐름의 원칙에 부합하면서 하위 컴포넌트를 통해 상위 컴포넌트의 상태(State)를 변경하기 위해서는 state(상태) 끌어올리기 라는 개념을 사용할 수 있습니다.
     상태 끌어올리기를 하기 위해선 상위 컴포넌트에서 하위 컴포넌트에 상태를 변경시키는 함수가 담긴 핸들러 그 자체를 props로 전달 후, 하위 컴포넌트에서 해당 핸들러를 실행시키는 방법을 이용할 수 있습니다.

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

   • key는 어떤 항목을 삭제, 변경, 추가할지 식별하는 것을 돕는데, 같은 컴포넌트가 여러 개 렌더링 될 때 서로 다른 컴포넌트임을 구분하기 위해 사용하는 속성입니다. 리액트는 컴포넌트의 속성이나 상태가 변경될 때마다 render 함수를 호출하는데, render 함수는 새로운 리액트 요소 트리를 반환하며 이를 기존의 요소 트리와 비교하여 새로운 변경점에 대해서 리렌더링을 합니다. 기존 요소보다 앞에 추가하게 될 경우엔 모든 부분에 대해 리렌더링 하는 불필요함이 발생하게 되기 때문에 키 속성을 부여하게 되면 모든 요소를 리렌더링 하지 않고 변화되는 부분만 리렌더링 하게 됩니다 이때, 키값은 반드시 고유한 값을 지정해주어야 하며 키값이 다를 경우 에러가 발생하게 됩니다.

   • key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 합니다. key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문입니다. uuid나 nanoid를 사용하여 무작위한 문자열로 id를 만들기도 합니다.
     인덱스 또한 유일한 값이지만, 리스트 아이템의 순서를 바꾸거나 아이템을 추가/제거할 때 변할 수 있기 때문에 사용을 추천하지 않는다고 알고 있습니다.

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

   • useEffect는 컴포넌트 내에서 특정 작업(Side Effect)을 실행하게 도움을 주는 리액트 hook입니다. 첫 번째 인자로는 Side Effect가 발생하는 콜백 함수를 받고 두 번째 인자로는 배열을 받는데 이때 이 배열을 dependency array라고 부릅니다.

   • dependency array는 종속성 배열이라고 부르는데, use Effect의 실행 화면에 첫 렌더링이 될 때와 종속성 배열의 value 값이 바뀔 때마다 실행이 됩니다. 배열 내에 여러 개의 값이 있다면, 그중의 단 하나만 다르더라도 effect를 재실행합니다. dependency array로 빈 배열이 전달 된다면 컴포넌트가 처음 생성될 때만 실행되며, 아무런 값도 전달하지 않는다면 컴포넌트가 새롭게 렌더링이 될 때 마다 실행됩니다.

     • 컴포넌트 생성 후 처음 화면에 렌더링(표시)
     • 컴포넌트에 새로운 props가 전달되며 렌더링
     • 컴포넌트에 상태(state)가 변경되며 렌더링

HTTP / 네트워크

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

   • GET 메서드는 서버의 리소스를 조회하고 POST 메서드는 서버의 리소스를 변경하는 HTTP 메서드입니다. GET은 단순히 조회를 요청하며, POST는 리소스의 생성 및 변경을 요청합니다.

   • GET 메서드와 POST 메서드의 차이점은 GET은 URL 파라미터에 요청하는 데이터를 담아 보내기 때문에 HTTP 메시지에 body가 없고 POST는 body에 데이터를 담아 보내기 때문에 HTTP 메시지에 body가 존재합니다. 또한 get 메서드는 멱등성을 띠는데 멱등성이란 동일한 연산을 여러 번 실행하였을 때 동일한 결과가 나타나는 것을 말합니다. 이처럼 멱등성을 띠기 때문에 값을 변경하지 않는 조회 기능에 사용해야 하며 post는 멱등성을 띠지 않기 때문에 서버의 상태나 데이터를 변경할 때 사용합니다.

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

   • SSR은 서버에서 페이지를 렌더링 하고 CSR은 브라우저에서 페이지를 렌더링 합니다. SSR은 경로가 변경이 될 때마다 새로운 정적 파일을 요청하며 CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고 동적으로 라우팅을 관리합니다.

   • SSR은 서버에서 렌더링 준비를 마친 상태로 클라이언트에 전달하는 방식이며 CSR은 서버가 요청을 받으면 클라이언트에 HTML이나 JS 같은 스크립트를 보내주고 받은 스크립트를 이용해 클라이언트 쪽에서 렌더링을 실행하는 방식입니다 SSR이랑 CSR의 가장 큰 차이는 웹 페이지 로딩 시간인데, 첫 페이지 로딩 시간 같은 경우엔 SSR이 필요한 부분만 서버에 요청하기 때문에 CSR보다 첫 페이지 로딩 시간이 빠릅니다, 반대로 CSR은 이미 첫 페이지를 로딩 할 때 모든 스크립트를 받아왔기 때문에 나머지 로딩 시간은 CSR이 더 빠릅니다.

   • SSR은 일반적으로 SEO(Search Engine Optimization)가 우선순위인 경우 사용하며, 블로그나 기사처럼 검색엔진에 최대한 노출되는 게 유리하고, 다른 웹사이트에 비해 사용자와 상호작용이 많지 않은 경우 SSR을 사용하는 것이 합리적입니다. TTV와 TTI의 공백이 발생합니다. (꽤 김)

   • SEO 가 우선순위가 아닌 경우, CSR을 이용할 수 있습니다. 사이트에 풍부한 상호 작용이 있는 경우, CSR은 빠른 라우팅으로 강력한 사용자 경험을 제공할 수 있습니다. 다만, SSR에 비해 SEO를 하기에 불리하다는 특징이 있습니다. TTV와 TTI가 같습니다.

   • TTV(Time to view): 화면이 보여지기까지의 시간

   • TTI(Time to interactive) : 상호작용까지의 시간

웹서버 기초

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

   • HTTP 메세지 구조란, 클라이언트와 서버 사이에 데이터가 교환되는 방식입니다. 요청과 응답 두 가지 유형이 있는데, 두 유형은 서로 유사한 구조를 가지고 있으며, start_line, header, body로 나뉘어져 있습니다.

   • start_line은 어떤 프로토콜을 사용하는지, 어떤 http 메서드인지 상태 코드는 무엇인지 등 해당 요청과 응답의 핵심 정보가 담겨 있습니다.

   • header는 요청과 응답에서 공통으로 자주 다루는 정보를 담고 content-type이 무엇인지, 캐시의 유효기간이 얼마나 되는지 등 자주 다루는 정보가 담겨있습니다.

   • body는 payload라고 부르며, 해당 요청과 응답에서 꼭 다뤄야 하는 중요한 정보를 담고 있습니다. 보통 추가, 변경, 삭제를 하고자 하는 리소스에 대한 데이터 또는 문서를 포함한 자세한 정보를 담습니다.

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

   • SOP는 동일 출처의 리소스만 공유가 가능하다는 정책이며 CORS는 다른 출처의 자원을 사용할 수 있도록 개발된 체제입니다.

   • SOP는 동일 출처 정책을 말합니다. 동일 출처 정책은 같은 출처의 리소스만 공유가 가능하다는 뜻이며 출처는 프로토콜, 호스트, 포트의 조합으로 이루어져 있습니다. 이중 하나라도 다르면 동일한 출처로 보지 않습니다, SOP는 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보가 타 사이트의 코드에 의해 새어나가는 것 등의 해킹을 방지할 수 있는 보안성이 있습니다. 때문에 SOP는 모든 브라우저에서 기본적으로 사용하고 있으며, 다른 출처의 리소스를 사용해야 하는 경우엔 CORS를 사용합니다.

   • CORS는 교차 출처 리소스 공유를 의미하며 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 권한을 부여하도록 브라우저에게 알려 주는 체재입니다. CORS는 기본적으로 프리 플라이트 요청 방식으로 동작하며 실제 요청을 보내기 전 OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근이 가능한지 확인 후에 응답 헤더에 요청을 보낸 출처가 돌아오면 실제 요청을 보낼 수 있습니다. 이처럼 프리 플라이트 요청을 사용할 경우 CORS에 대비되지 않은 서버도 보호하는 것이 가능합니다.

   • 프리플라이트 요청 방식은 서버에서 실제로 요청에 대한 처리를 하기 이전에 접근 가능여부를 체크하기 때문에 효율적이라고 볼 수 있습니다.