Section 2 질문과 답변

Dongwoo Joo·2023년 4월 10일
0

codestates bootcamp

목록 보기
26/48

기술면접

질문과 답변

JavaScript

  • Promise의 기능과 필요한 이유에 대해서 설명해 주세요.
    프로미스는 객체로서, 비동기 처리 상태와 처리 결과를 관리하는 기능이 있다.
    기존 비동기 처리의 문제점인 콜백 헬, 에러 처리의 어려움을 극복하기 위해 필요하다.

pending, fulfilled, rejected 3가지 상태를 가지며, 비동기 작업을 처리한다.
비동기 작업 결과를 성공/실패로 전달하고, 결과에 따른 후속처리를 한다.
이 후속처리는 후속처리 메서드인 .then .catch .finally 로 수행한다.

기존 자바스크립트는 비동기 처리를 위한 패턴으로 콜백함수를 사용한다.
그런데, 콜백 패턴은 콜백 헬(콜백함수가 반복되는)이나, 에러 처리가 어려운 문제점이 있었다.
따라서, 이 문제를 극복하기 위해 프로미스가 도입되었다.

  • 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요.
    순수함수는 같은 입력에 대해 항상 같은 결과를 반환하는 함수이다.
    이처럼 입력과 결과가 변하지 않는 성질을 불변성이라 하는데,
    이는 코드 가독성과 유지보수성을 높일 수 있다.
    side effect는 한글로 부작용이라 표현할 수 있다.
    함수의 내부 구현에 의해서 함수 외부에 영향을 끼치는 경우(외부의 변수 값이 변경된다거나, 다른 함수의 결과값에 영향을 미치는 경우)이다.

이렇게 되면, 함수의 side effect가 파일 전체에 어떤 영향을 주는지 일일이 파악해야 하기 때문에, 디버깅하기 어렵다. 함수형 프로그래밍이라는 패러다임은 side effect를 지양하는 특징을 갖고 있다.

React

  • React의 state와 props에 대해서 설명해 주세요.
    React에서 컴포넌트는 상태(state)와 속성(props)를 가집니다.

state는 컴포넌트 내부에서 변경 가능한 값을 저장하는 객체입니다.
컴포넌트의 상태가 변경될 때마다 React는 자동으로 컴포넌트를 다시 렌더링해서 UI를 업데이트 합니다.

props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 값입니다.
부모 컴포넌트에서 prop를 변경하면 자식 컴포넌트의 UI가 렌더링 됩니다.

회원가입을 할 때,
props는 이름, 주민등록번호가 될 수 있고,
states는 나이, 주소, 닉네임 등이 될 수 있습니다.

  • React 컴포넌트의 key 속성에 대해서 설명해 주세요.
    key 속성은 React가 컴포넌트를 추적하는 데 사용됩니다.
    따라서, React에서 컴포넌트 리스트를 렌더링할 때,
    각각의 컴포넌트에 고유한 key 속성을 부여해야 합니다.
    key 속성은 unique한 id값을 부여해서 설정합니다.

key가 없거나 중복되는 경우, React는 성능상의 문제를 일으킬 수 있습니다.
key 속성은 컴포넌트가 생성될 때 한 번 설정되며, 이후에는 변경되지 않아야 합니다.

  • useEffect의 dependency array에 대해서 설명해 주세요.(X)
    React의 useEffect 훅은 컴포넌트가 렌더링될 때마다 실행되는 함수입니다.
    이때 useEffect는 첫 번째 인자로 함수를, 두 번째 인자로 종속성 배열을 받습니다.

종속성 배열은 useEffect의 두 번째 인자입니다.
배열에 포함된 값이 변경될 때만 useEffect가 실행됩니다.

종속성 배열에는 어떤 값의 목록이 들어가고, 이게 조건이 됩니다.
종속성 배열을 비우면 컴포넌트가 최초로 렌더링될 때만 useEffect가 실행되며,
배열에 값을 포함시키지 않으면 모든 렌더링 시마다 useEffect가 실행됩니다.

HTTP/네트워크

  • CSR과 SSR의 차이점에 대해서 설명해 주세요.
    이 두 가지는 웹 어플리케이션을 렌더링하는 방식이다.
    (Client-Side Rendering) / (Server-Side Rendering)

CSR은 클라이언트(브라우저)에서 JavaScript를 사용하여 UI를 렌더링합니다.

이 방식은 초기 로딩 시간이 오래 걸릴 수 있지만,
이후에는 적은 데이터 양으로 빠르게 렌더링할 수 있습니다.
또한, CSR은 브라우저 측에서 렌더링을 수행하므로
서버의 부하를 줄일 수 있습니다.

SSR은 서버에서 UI를 렌더링하고,
렌더링된 HTML을 클라이언트에게 전달하는 방식입니다.
이 방식은 초기 로딩 시간이 빠르지만,
사용자 인터랙션이 필요한 경우 서버와의 통신이 필요하므로
응답 시간이 느려질 수 있습니다.

CSR과 SSR의 선택은 애플리케이션의 특성에 따라 다릅니다.
CSR은 대부분의 로직이 클라이언트에서 수행되기 때문에
애플리케이션의 규모가 커지면 로딩 시간이 길어질 수 있습니다.
SSR은 초기 로딩 시간이 짧지만, 서버의 부하가 많이 걸릴 수 있습니다.
이러한 차이점(장단점)을 고려하여 적절한 방식을 선택해야 합니다.

  • GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요.
    우선 GET 메서드, POST 메서드는 HTTP의 요청 방식입니다.

GET 요청은 서버로부터 정보를 가져오는 요청 방식이며, 주로 조회 작업에 사용됩니다.
이 때 요청 파라미터는 URL 뒤에 쿼리 스트링 형태로 전송됩니다.

반면 POST 요청은 서버에 정보를 제출하는 요청 방식이며, 주로 생성, 수정, 삭제 작업에 사용됩니다. POST 요청은 요청 바디에 정보를 담아 전송하며, URL에 파라미터가 노출되지 않아 보안성이 더 높습니다.

웹서버 기초

  • HTTP 메세지 구조에 대해 설명해 주세요.
    HTTP 메세지는 클라이언트와 서버 간의 통신에 사용되는 메시지입니다.
    요청(Request) 메시지와 응답(Response) 메시지로 나뉩니다.
    메시지는 헤더와 바디로 구성됩니다.
    헤더는 요청이나 응답에 대한 정보를 담고 있으며,
    바디는 실제 데이터를 담고 있습니다.

  • Same-Origin Policy와 CORS에 대해서 설명해 주세요.
    SOP는 웹 브라우저가 보안을 위해 사용하는 정책입니다.
    다른 출처(도메인, 프로토콜, 포트) 간의 자원 공유를 제한합니다.
    이를 통해 해킹, 악성 스크립트로부터 사용자 정보를 보호할 수 있습니다.

만약 다른 출처에서 데이터를 요청해야 하는 경우에는,
CORS 정책을 사용할 수 있습니다.
CORS를 해석하면, (Cross-Origin Resource Sharing) 다른 출처 간의 자원 공유한다는 뜻입니다.
CORS는 서버 측에서 특정 HTTP 헤더를 설정하는 방법으로 구현될 수 있습니다.

profile
pursue nature

0개의 댓글