2022-04-15 면접 질문

라이프 사이클에 대해서 설명해주세요

컴포넌트는 크게 세 가지 주기를 가집니다. 컴포넌트를 브라우저에 그리는 마운트(Mount), 컴포넌트를 브라우저에 그린 후 변경 사항을 그리는 업데이트(Update), 컴포넌트를 브라우저에서 제거하는 언마운트(Unmount)과정을 가지고있습니다.

마운트

DOM이 생성되고 웹 브라우저상에서 나타나는 것을 마운트라고 한다.

마운트 할 때 호출하는 메서드

컴포넌트 만들기 - constructor - getDerivedStateFromProps - render - componentDidMount

• constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
• getDerivedStateFromProps : props에 있는 값을 state 넣을 때 사용하는 메서드
• render : 우리가 준비한 UI를 렌더링하는 메서드
• componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

업데이트

컴포넌트는 다음과 같은 경우 업데이트를 합니다.

• props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• this.forceUpdate로 강제로 렌더링을 트리거할 때

컴포넌트를 업데이트 할 때는 다음 메서드를 호출한다.

 

업데이트 발생 - getDerivedStateFromProps - shouldComponentUpdate (true 반환 시 render 호출, false 반환 시 여기서 작업 취소) - render (forceUpdate) - getSnapshotBeforeUpdate - 웹 브라우저상의 실제 DOM 변화 - componentDidUpdate

언마운트

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 한다.

언마운트 할때 호출하는 메서드

언마운트 하기 - componentWillUnmount

 

자바스크립트의 비동기 처리 과정

Event Loop 와 Queue

Event Loop에서 Loop의 사전적인 의미는 '반복. 순환'이다. Event Loop는 사전적인 의미처럼 계속 반복해서 call stack과 queue 사이의 작업들을 확인하고, call stack이 비워있는 경우 queue에서 작업을 꺼내어 call stack에 넣는다. 자바스크립트는 이 Event Loop와 Queue들을 이용하여 비동기 작업을 수행한다. 직접적인 작업은 Web API에서 처리되고, 그 작업들이 완료되면 요청시 등록했던 callback이 queue에 등록된다.
Event Loop는 이 작업들을 Queue에서 꺼내어 처리한다.
Event Loop는 stack에 처리할 작업이 없을 경우 우선적으로 microtask queue를 확인한다. microtask queue에 작업이 있다면 microtask에 있는 작업을 꺼내서 call stack에 넣는다. 만약 microtask의 queue가 비어서 더 이상 처리할 작업이 없으면 이때 task queue를 확인한다. task queue의 작업도 꺼내서 call stack에 넣는다. 이렇게 Event Loop와 Queue는 자바스크립트 엔진이 하나의 코드 조각을 하나씩 처리할 수 있도록 작업을 스케줄하는 동시에 이러한 이유로 우리는 자바스크립트에서 비동기 작업을 할수 있도록 해준다.

 

REST API에 관하여_6가지 제약조건

• Client-Server architecture
  • 서버는 클라이언트가 브라우저이던지 모바일 이던지 상관없이 다양한 어플리케이션에 데이터를 제공할 수 있는 그런 architecture를 유지해야한다.
• Stateless
  • 서버에서 클라이언트의 상태 정보를 저장하지 않고 들어오는 요청에 대해서만 처리하여 구현을 단순화 하는 것이다.
  • 즉 하나의 요청이 다른 요청과 연결되는 state 상태가 아니라 없는 상태로 디자인해야합니다.
• Cacheable
  • 요청에 대한 응답 내의 데이터에 해당 요청은 캐시가 가능한지 불가능 한지 명세를 해줘야 합니다.
  • 캐시 사용이 가능하면 클라이언트는 응답 데이터를 재사용 할 수 있어야 합니다.
• Layered System
  • 서버는 중개 서버(게이트웨이, 프록시)나 로드 밸런싱, 공유 캐시 등의 기능을 사용하여 확장성 있는 시스템을 구성할 수 있다.
• Code-On-Demand(필수조건은 아닙니다.)
  • 클라이언트는 서버에서 자바 애플릿, 자바스크립트 실행 코드를 전송받아 기능을 일시적으로 확장할 수 있다.
• Uniform Interface(중요)
  • REST가 HTTP의 표준만 따른다면 어떠한 기술이던지 접목하여 사용할 수 있기 때문에 플랫폼이나 언어의 제약에 구애받지 않는다.
  •  

RESTful 하게 API 를 디자인 한다는 것은 무엇을 의미하는가.

1. 리소스 와 행위 를 명시적이고 직관적으로 분리한다.

• 리소스는 URI로 표현되는데 리소스가 가리키는 것은 명사로 표현되어야 한다.
• 행위는 HTTP Method로 표현하고, GET(조회), POST(생성), PUT(기존 entity 전체 수정), PATCH(기존 entity 일부 수정), DELETE(삭제)을 분명한 목적으로 사용한다.

1. Message 는 Header 와 Body 를 명확하게 분리해서 사용한다.

• Entity 에 대한 내용은 body 에 담는다.
• 애플리케이션 서버가 행동할 판단의 근거가 되는 컨트롤 정보인 API 버전 정보, 응답받고자 하는 MIME 타입 등은 header 에 담는다.
• header 와 body 는 http header 와 http body 로 나눌 수도 있고, http body 에 들어가는 json 구조로 분리할 수도 있다.

1. API 버전을 관리한다.

• 환경은 항상 변하기 때문에 API 의 signature 가 변경될 수도 있음에 유의하자.
• 특정 API 를 변경할 때는 반드시 하위호환성을 보장해야 한다.

1. 서버와 클라이언트가 같은 방식을 사용해서 요청하도록 한다.

• 브라우저는 form-data 형식의 submit 으로 보내고 서버에서는 json 형태로 보내는 식의 분리보다는 json 으로 보내든, 둘 다 form-data 형식으로 보내든 하나로 통일한다.