CodeStates/CS

Section2 기술 면접 연습

yeeendy 2023. 6. 8. 11:52
질문리스트

JavaScript

  • Promise의 기능과 필요한 이유에 대해서 설명해주세요.
  • 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

React

  • React의 state와 props에 대해서 설명해주세요.
  • React 컴포넌트의 key 속성에 대해서 설명해주세요.
  • useEffect의 dependency array에 대해서 설명해주세요.

HTTP/네트워크

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

웹서버 기초

  • HTTP 메세지 구조에 대해 설명해주세요.
  • Same-Origin Policy와 CORS에 대해서 설명해주세요.

JavaScript

  • Promise의 기능과 필요한 이유에 대해서 설명해주세요.
    • promise는 비동기로 작동하는 코드의 순서를 제어하고 Callback Hell을 방지하기 위해 사용합니다.
      promise를 사용하지 않고 비동기 코드의 순서를 제어할 수 있지만 코드가 길어지고 복잡해지고 가독성이 낮아지는 콜백 헬이 발생하는 단점이 있어, 콜백 헬의 현상을 방지하기 위해 promise가 사용되기 시작했습니다.

    • <사용법>
      promise의 인자로 비동기 처리를 수행할 콜백 함수를 전달받는데, 이 콜백 함수의 인자로는 resolve, reject를 전달받습니다.
      resolve, reject 인자로 성공, 에러 여부를 확인할 수 있습니다.

    • <promise 객체의 내부 프로퍼티>
      promise 객체는 state와 result 내부 프로퍼티를 갖습니다. 하지만 직접 접근할 수 없어 .then, .catch, .finally 메서드를 사용하여 접근해야합니다.
      state의 기본 상태는 pending, 즉 대기 상태이고 비동기 처리를 수행할 콜백 함수가 성공적으로 작동했다면 fulfilled(이행) 상태로 변경이 되고, 에러가 발생했다면 rejected(거부) 상태가 됩니다.
      result는 처음 상태는 undefined입니다. 비동기 처리를 수행할 콜백 함수(executor)가 성공적으로 작동하여 resolve(value)가 호출되면 value로, 에러가 발생하여 reject(error)가 호출되면 error로 변합니다.
    • then, catch, finally, promise chaining
  • 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
    • 순수 함수란, 외부의 상태를 변경하지 않으며 동일한 인자에 대해 항상 똑같은 값을 반환하는 함수를 의미합니다.
      순수 함수의 특징으로는
      불변성, 즉 데이터가 변경되지 않고 항상 같은 결과를 반환 하기 때문에 예측 가능한 함수이며
      이 불변성 때문에 함수의 실행 결과 외에도 함수 외부의 상태를 변경하는 사이드 이펙트가 없습니다.

React

  • React의 state와 props에 대해서 설명해주세요.
    • state는 React 컴포넌트 내부에 저장되는 데이터이며, 동적인 데이터를 다룰 때 사용합니다.
      state를 다루는 방법 중 하나로 useState라는 함수를 이용하는데,
      state는 컴포넌트가 렌더링될 때 초기값을 가지며, state의 변경은 setState 함수를 통해 이루어집니다.
    • props는 컴포넌트 간의 데이터 전달을 위해 사용되며, 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용합니다.
      (변하지 않는 값이므로)읽기 전용 데이터 이기 때문에 부모 컴포넌트에서 props가 변경되면 리액트는 자동으로 자식 컴포넌트를 리렌더링합니다.
  • React 컴포넌트의 key 속성에 대해서 설명해주세요.
    • React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고,
      엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정합니다.
  • useEffect의 dependency array에 대해서 설명해주세요.
    • 함수형 컴포넌트 내부에서 발생하는 사이드 이펙트를 처리할 때 리액트 모듈에서 제공하는 useEffect함수를 사용합니다.
      이 때 두 번째 인자로 입력하는 dependency array는 렌더링 시점을 의미합니다.
    • 만약 dependency array로 빈 배열이 전달된다면, useEffect는 첫 렌더링 될때만 실행됩니다.
      dependency array가 전달되지 않으면, 렌더링 시마다 실행되고
      빈 배열을 전달받으면 컴포넌트가 처음 생성될 때만 effect 함수가 실행됩니다.

HTTP/네트워크

  • CSR과 SSR의 차이점에 대해서 설명해주세요.
    • CSR과 SSR은 웹 애플리케이션의 페이지 렌더링 방식을 나타내는 용어로, 다음과 같은 차이점이 있습니다.
    • 렌더링 위치가 다릅니다. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링합니다.
    • 검색 엔진 최적화의 차이가 있습니다. 
      SSR은 서버에서 완성된 HTML을 제공하기때문에 검색 엔진이 페이지를 크롤링할 때 콘텐츠를 빠르게 인식하고,
      CSR은 HTML을 크롤링하고, 자바스크립트를 실행하여 렌더링하기 때문에 html파일 이외의 동적으로 생성된 콘텐츠는 검색 엔진이 인식하기 어려울 수 있습니다.
  • GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
    • GET, POST 메서든 HTTP 프로토콜에서 사용되는 메서드입니다.
    • GET 메서드는 데이터를 조회할 때 사용하고(url에 데이터를 포함하여 전송) 보안
    • POST 메서드는 데이터를 생성할 때 사용합니다.(요청 본문에 데이터를 담아 전송)

웹서버 기초

  • HTTP 메세지 구조에 대해 설명해주세요.
    • HTTP 메세지는 요청과 응답으로 구분됩니다.
    • 각각의 요청과 응답의 구성은 스타트 라인, 헤더, 빈 줄, 바디로 유사한 구조를 가지고 있습니다.
  • Same-Origin Policy와 CORS에 대해서 설명해주세요.
    • Same-Origin Policy는 동일 출처 정책으로 프로토콜, 호스트, 포트가 모두 일치하는 경우에만 상호작용 할 수 있도록 제한합니다.
    • CORS는 교차 출처 리소스 공유의 의미로, 다른 도메인 간의 리소스 요청을 허용하는 메커니즘 입니다.