기술면접 준비

리액트

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

uesEffect는 첫 번째 인자로 콜백 함수를 받고 두 번째 인자로 종속성배열을 받습니다. 이것이 dependency array 인데, 배열에 지정된 종속성이 변경될 때마다 함수가 다시 실행되게 합니다.
빈 배열일 경우 useEffect가 상태 변수에 종속되지 않음을 나타냅니다 . 따라서 콜백 함수는 이 경우 페이지가 렌더링된 후에만 호출됩니다.

-(추가질문) useEffect에 대해 설명해주세요.

useEffect란 컴포넌트 내에서 Side Effect를 처리를 위해 실행할 수 있게 하는 Hook입니다.

-(꼬리질문1) Hook이요?

Hook이란,새로 추가된 기능인데 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해주고, 함수 컴포넌트에서 React state과 생명주기 기능을 “연동(hook into)”할 수 있게 해주는 함수입니다

- Side Effect

-(꼬리질문1) Side Effect?

일반적으로 사이드 이펙트라는 말을 할 때는 '의도하지 않은 결과, 부작용 등'을 의미합니다.
함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 것으로 이해하면 편합니다.

-(꼬리질문2) side Effect를 useEffect로 처리하는 이유.

useEffect()를 통해서 Side-Effect 코드를 등록할 수 있으며 React가 알아서 적절한 시점에 Side-Effect 작업을 수행해 줄 것입니다. 이러한 처리는 함수형 컴포넌트가 빠르게 렌더링 될 수 있게 도와주며, 프로그램을 복잡하게 만드는 Side-Effect 영역을 함수와 분리할 수 있게 도와줍니다.

-(꼬리질문) useEffect의 실행방식?

1. 페이지가 처음 렌더링 되고 난 후
2. useEffect에 배열로 지정한 useState값이 변경될 때
   즉 useEffect는 랜더링, 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트 해주는 함수이다.

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

state 는 컴포넌트 상태를 뜻하고 상태의 값이 변할수도 있습니다. , props는 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘겨줄 때 사용하는 것 이고 읽기전용이며, 변하지 않는 데이터 입니다..

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

리액트 공식 문서에서는 key를 다음과 같이 설명하고 있다.
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

• 꼬리질문: key를 지정 안해주면요? React는 인덱스를 key로 사용합니다. 하지만 권장하지 않습니다. state 문제가 발생할수도 있다고 합니다.

---

---

JavaScript

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

  프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다..
  필요한 이유는?
  일반적으로 서버에서 데이터를 요청하고 받아오기위해 API를 사용하는데, API가 실행되면 서버에다가 데이터 요청을 보냅니다.그런데 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다.

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

  순수 함수란 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다.
  순수함수는 side effect가 없고, 입력으로 전달된 값을 수정하지 않는 불변성을 가지고 있습니다.
  순수함수는 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됩니다.

HTTP/네트워크

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

  Client Side Rendering 은 렌더링이 클라이언트 쪽에서 일어난다.
  Server Side Rendering 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
  처음 페이지를 로딩할땐 CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다. 반면 SSR은 필요한 부분만 렌더링 되기때문에 속도가 더 빠르다.
  그런데 다른 페이지의 경우 csr은 이미 한번에 불러왔기때문에 빠르지만, ssr은 첫페이지 로딩할때 처럼 불러오기때문에 더 느리다.
  페이지 로딩처럼 ssr은 계속 서버에게 요청을 하기 때문에 서버부하가 있지만 csr의 경우 클라이언트에서 렌더링이 일어나서 서버부하가 적다.

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

GET: URL뒤에 쿼리 스트링(Key와 Value)을 붙이고 서버에 데이터를 요청하기 때문에 POST방식보다 보안에 취약하지만, POST 방식보다 상대적으로 전송 속도가 빠릅니다.
POST: 정보를 Body에 담아서 전송합니다.데이터들을 Body에 담기 때문에 서버로 보내는 데이터의 양은 제한 없음
간단하게-
GET 방식은 이름 그대로 무언가를 가져오는 것,
POST 방식은 포스트를 붙이듯이 무언가를 만들거나 수정하는 것

웹서버 기초

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

  HTTP 메세지 구조는 요청(Requests)과응답(Responses)으로 이뤄져있습니다.

  1. start line
     첫 번째 줄에 위치한다.
  2. HTTP headers
     요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합이다.//생략도 가능하다.
  3. empty line
     헤더와 본문을 구분하는 빈 줄이 있다. 그 줄을 말한다.
  4. body
     요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함한다.
     요청과 응답의 유형에 따라 선택적으로 사용한다.

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

  SOP는 웹 브라우저에서 동작하는 프로그램은 로딩된 위치에 있는 리소스만 접근 할 수 있다는 정책이다.즉 동일한 출처에서만 리소스를 주고 받도록 하는 정책인데
  다른 출처로부터 리소스를 받아오는 것은 필수 요소가 되었고, 이러한 문제를 해결하기 위해 나온 정책이 바로 CORS(교차 출처 자원 공유 Cross-Origin Resource Sharing)이다.
  CORS는 동일한 출처가 아닌 다른 출처에서 데이터를 주고 받는 것을 허용하는 정책입니다.