면접질문

broccoli·2021년 7월 30일
0

면접

목록 보기
1/3
post-thumbnail

1. http는 stateful이 가능한가?

https://datatracker.ietf.org/doc/html/rfc7230

http는 상태비저장 응용프로그램레벨의 프로토콜이라고 이미 정의 되어있다.
따라서 절대 stateful할 수 없다.

http는 절대 stateful이 될 수 없다.

https://datatracker.ietf.org/doc/html/rfc6265

http는 쿠키 및 set-cookie 헤더 필드를 정의하는데 http상태저장을 하는데 사용할 수 있다.
하지만 그럼에도 불구하고 http는 절대 상태를 저장하는 프로토콜이 아님.

만약 stateful protocol이 필요하다면 websocket을 생각해볼 수 있다.

https://datatracker.ietf.org/doc/html/rfc6455

웹소켓 프로토콜은 클라이언트간의 양방향 통신을 가능하게 한다. TCP 레이어에서 오프닝 핸드쉐이크로 구성된다.

웹소켓은 TCP연결을 통해 양방향 채널을 제공하는 통신프로토콜. websocket은 HTTP와는 다른데 두 프로토콜 모두 osi모델의 레이어 7계층인 어플리케이션단에 있고 TCP는 4계층에 있다. 비록 프로토콜은 다르지만 웹소켓은 HTTP 포트 443, 80을 통해 작동하고 HTTP의 프록시 및 중개자를 지원하도록 설계되어있어서 HTTP와 호환된다. 이 호환성을 위해 websocket 핸드쉐이크는 http업그레이드 헤더를 사용해서 http에서 websocket 으로 프로토콜을 변경한다.

2. http와 tcp의 차이점과 계층을 알고 있나?

HTTP는 어플리케이션단에서 사용하는 프로토콜이고 TCP는 4계층에서 사용되는 프로토콜이다.

tcp는 byte array로 정보를 통신하고, http는 스트링으로 정보를 통신한다.

클라이언트로부터 특정 url로 요청이 들어오면 dns서버가 도메인에 매핑되는 ip주소를 받아온다. tcp계층에서 http메세지를 패킷으로 분해한다. 그리고 ip계층에서 전송위치를 확인하고 네트워크를 통해 전송한다. 그리고 받는 쪽은 위 과정 역순으로 진행해서 처리한다.

소켓도 TCP기반으로 나온건데 http와의 차이점은 연결지향 동기식 통신이 필요할 때 사용한다는 점이다.

3. http와 http2.0의 차이를 알고 있나?

http2.0의 주요 목표는 전체요청을 통해 지연시간을 줄이고 응답다중화를 지원하며, http헤더필드의 효율적 압축을 통해 프로토콜 오버헤드를 최소화하고 요청 우선순위 지정을 추가하며 서버 푸시를 지원한다.

http2.0은 애플리케이션의 의미체계를 어떤 식으로도 수정하지 않는다. http 메서드, 상태코드, uri, 헤더 필드는 그대로 유지한다. 대신 데이터가 전송되는 방식과 데이터 서식이 지정되는 방식을 수정한다.

브라우저에서 사용되는 http는 브라우저마다 콜수의 제한이 있다. 크롬은 보통 6개, 그런데 http2.0은 이런점을 해결해준다.

4. REST API의 정의가 무엇인가?

REST API는 간단히 이야기해서 HTTP 메서드를 활용해서 URI에 정보의 자원을 표현하는 방법의 대한 약속이다.

REST API는 HTTP메서드를 활용한다.

HTTP메서드에는 GET, PUT, POST, PATCH, DELETE, OPTIONS을 이야기하는데, REST API에 보통 활용되는 메서드는 GET, PUT, POST, PATCH, DELETE이다.

각각 C(POST), R(GET), U(PUT, PATCH) D(DELETE)를 표현하는데, 사실 DELETE를 사용하면서 실제 DB에는 UPDATE를 사용할 수도 있다. 이런식으로 실제디비에 적용하는 방식과 동일할 필요는 없지만 같이 일하는 조직간에 약속을 통해 이 REST API는 어떤 역할을 하는 API라는것을 명시적으로 알수있는 약속을 규정하기위한 방법론이 REST API인 것이다.

물론 표준적인 표현방식이 있기 때문에 그 표현방식을 따르는 한에서 조직안에 약속을 정하면된다.

5. url을 딱 치는 순간 일어나는 상황을 말로 표현해봐라

  1. 브라우저에서 URL을 통해 프로토콜(http)과 자원(/)을 해석한다.
  2. DNS 서버를 통해 IP를 변환한다.
  3. ARP (Adress resolution protocol)을 통해 IP로 목적지의 맥주소를 확인한다.
  4. 대상서버의 IP주소를 받으면 URL에서 해당포트번호를 가지고와서 TCP소켓요청을한다 3WAY HANDSHAKING을 통해 TCP 소켓통신을 한다.
  5. HTTPS인경우 TLS 핸드쉐이크를 추가한다. TLS세션이 대칭키로 암호화된 어플리케이션 HTTP데이터를 전송한다.
  6. 서버가 요청을 받아 HTML 및 데이터를 전송한다(응답)
  7. 서버가 전송한 데이터와 HTML이 클라이언트에 도착하면 DOM트리를 구축하고 HTML파싱을 한다. 동시에 CSS도 CSSOM으로파싱을 하면서 렌더트리를 만들고 레이아웃 및 페이트를 한다.

참고: https://owlgwang.tistory.com/1

6.이벤트리스너와 핸들러의 차이

리스터는 이벤트를 캐치하는 놈, 핸들러는 그렇게 캐치된 이벤트를 다루는 놈

7. 플럭스란?

플럭스는 웹애플리케이션을 개발하기 위한 아키텍처 가이드라인으로 페이스북에서 만들었다. 리액트 전용은 아니고, 리액트의 일부도 아니지만 리액트와 잘 어울린다.

플럭스의 개념은 애플리케이션에서 단방향의 데이터 흐름을 지원하는 것이다. 플럭스는 기본적으로 액션, 스토어, 디스패처의 세부분으로 구성된다.

MVC의 의존성, 순차적 업데이트의 데이터흐름 꼬임을 해결하기위해 고안한 방식

페이스북 개발팀은 양방향 데이터바인딩이 있기 때문에 한 모델을 업데이트한뒤 다른 모델을 업데이트해야하는 순차적인 업데이트가 발생할 수 밖에 없으며 앱크기가 커질수록 이런 순차업데이트가 사용자 인터렉션의 경과를 예측하기 어렵다고 한다고 언급했다.

7-1. store

  • store는 앱의 모든 상태를 유지하며 상태가 변경되면 이벤트르 발송한다.
    MVC의 모델부분과 비슷하며 스토어는 접근자메서드만 제공한다. 즉 외부에서는 스토어의 값을 변경할 수 없다.

7-2. action

액션은 앱에서 일어나는 일이다. 비동기, 동기등 모든 앱에서 일어나는 일을 액션이라고 보면된다.
스토어는 액션이 발송되면 자신의 데이터를 업데이트한다.

7-3. dispatcher

디스패쳐는 액션을 스토어로 전달하는 과정을 조율하고 스토어의 액션핸들러가 올바른 순서로 실행되도록 관리한다.

7-4. view

MVC에 화면에 렌더만 신경쓰는게 아니라 자식컴포넌트에 데이터를 전달하는 컨트롤러의 속성도 있다. 따라서 view-controller라고 보는게 맞다.

action > dispatcher > store > view(component) -> action...

8. redux

리덕스는 flux의 구현체이다. flux 보다 조금 단순화 되어 사용이 용이해졌다.

리덕스에서만 생긴 용어는 reducer이다. 액션은 어떤 일이 일어났는지 알려주지만 앱에 어떻게 상태를 변경해야할지는 알려주지 않는다. redux에서는 reducer가 이 역할을 한다.

즉 flux에서 스토어객체를 업데이트하는 콜백함수와 하는 역할을 비슷하다. 단 array의 reduce처럼 동작하기에 reducer라고 부른다.

리듀서를 작성시 유의할 점은 다음 두가지이다.

  • 상태값은 뮤테이션하면 안된다. 새로 객체를 생성해서 반환해야한다.
  • 디폴트케이스에서 기존 state를 반환해야한다.

8-1. Why? redux

리덕스는 상태관리를 하는데 사용하는데, 여기서 이 상태는 단방향의 흐름을 가지고 앱전체를 관리해야한다. 이때 앱사이즈가 너무커지만 부모와 자식사이의 간격이 너무커져서 개발을 하기가 너무 어렵고 힘들다. 따라서 전역적인 역할을 해주는 store를 사용함으로서 좀더 개발을 용이하게 할 수 있다.

9. React

9-1. React 요소에 핸들러를 바인딩할때

리액트는 자바스크립트나 jQuery와 달리 DOM노드에 직접 이벤트 리스터를 연결하는 방식이 아닌 다른 방법으로 이벤트를 처리한다. 이벤트를 노드에 직접 연결하는 방식은 UI라이프 사이클에서 이벤트를 추가하거나 제거할 때 문제가 생길 수 있기 때문이다.

리액트는 최상위 부모인 document이벤트 리스너를 연결한다. 그리고 새로운 리액트컴포넌트가 렌더링할 때 이벤트 핸들러 함수는 react 에 의해 유지되는 내부 매핑에 추가된다. 이벤트가 발생해서 document 객체에 도달하면 핸들러에 이벤트를 매핑하며 일치하는 핸들러를 호출한다.

리액트는 document에 모든 이벤트리스너를 할당하고 event delegate기법을 사용해 처리한다고 생각하면 된다.

기본적으로 react로 만들어진 영역을 DOM을 컨트롤하는 코드와 같이 사용하면 신경을 써야하는 부분이 생긴다. 그래서 가급적 쓰지 말아야한다. 만약 써야한다면 DOM을 컨트롤하는 코드에서 이벤트의 전파를 막으면 안된다. React는 document엘리먼트에 버블링으로 이벤트리스너를 할당하기 때문에 DOM을 직접제어하는 이벤트 핸들러에서 stopPropagation()을 호출하면 React로 이벤트가 전달되지 않고 멈춘다.

반대로 React의 stopPropagation()메서드는 외부에 등록된 이벤트에 영향을 주지 않는다.

9-2. Virtual DOM

ℹ️ 해당 링크에서 아주 자세히 작성되어있음 React 적용 가이드 - React 작동 방법

리액트는 실제 DOM을 제어하는 것이 아니라 중간에 가상DOM을 두어 배치처리(ReactReconcileTransaction)로 DOM을 변경한다.

9-2-1. render함수를 호출

이때 주로 생성하는 컴포넌트는 주로 ReactCompositComponent, ReactDOMComponent

  • ReactCompositComponent: 돔이아닌 컴포넌트생성시
  • ReactDOMComponent: 돔을 만들때 생성하는 컴포넌트

9-2-2. ReactReconciler.mountComponent()메서드를 호출

실제 ReactCompositeComponent 객체와 ReactDOMComponent 객체의 mountComponent() 메서드를 호출하며, 이 시점에 주요 작업이 시작된다.

  • constructor() 메서드 실행
  • componentWillMount() 메서드 실행
  • 렌더링 실행
  • 배치 처리 작업(ReactReconcileTransaction 객체)에 메서드나 속성 등록
    • componentDidMount() 메서드가 있으면 componentDidMount() 메서드 등록
    • ref 속성이 있으면 attachRefs 속성 등록
  • 하위 ReactComponent 객체가 있으면 ReactComponent 객체를 생성하고 다시 ReactReconciler.mountComponent() 메서드를 실행

9-2-3. App 컴포넌트가 생성되면 실제엘리먼트를 생성한다.

  • 실제 DOM을 생성
  • style 속성과 attr 속성 추가
  • 배치 처리 작업(ReactReconcileTransaction 객체)에 사용자 이벤트 등록
  • 하위 ReactComponent 객체가 있으면 ReactComponent 객체를 생성하고 다시 ReactReconciler.mountComponent() 메서드를 실행
  • 최상위 DOM(root DOM)에 DOM을 추가(현재 최상위 DOM은 document 객체에 추가되지 않은 상태)

9-2-4. 이렇게 Virtual DOM이 완성된 후 등록된 배치 처리 작업이 다음과 같이 실행된다.

  • ReactReconcileTransaction 객체
    • componentDidMount() 메서드를 실행한다(componentDidXXX() 메서드 실행 시점에는 DOM에 접근할 수 있다).
    • 기본 이벤트를 등록한다.
    • 추가한 이벤트를 등록한다.
    • ref 속성 추가 등 기타 작업을 실행한다.
  • ReactDefaultBatchingStrategy 객체
    • componentWillMount() 메서드와 componentDidMount() 메서드에서 상태를 변경했다면 이 시점에 상태를 갱신하는 작업이 시작된다.

9-3. Reconciliation(조화시키다)

Virtual DOM을 만든 후 Virtual DOM을 갱신할 때 Reconciliation 작업을 한다. Reconciliation 작업은 Virtual DOM과 DOM을 비교해 DOM을 갱신하는 작업이다. Virtual DOM을 갱신하는 방법은 2가지이고 갱신하는 유형도 2가지다.

9-3-1. setState

setState는 해당 컴포넌트를 기준으로 갱신한다.

setState를 사용해서 상태를 변경하면 변경대상 컴포넌트로 등록이 되고 배치처리작업에서 처리된다.

9-3-2. redux

render는 제일위부터 virtual DOM의 갱신이 필요한지 확인한다. store를 사용한다면 store가 변경되었을 때 다시 최상위 render를 호출해 virtualDOM을 갱신하는 작업을 한다.

이때 비교대상의 위치가 최상위부터이냐 해당 컴포넌트부터이냐에 따라 다르다

9-3-3. virtual DOM 갱신유형

Virtual DOM이 갱신될 때 2가지 유형

  • 하위에 있는 ReactComponent객체를 새로 만들지 않고 속성만 갱신(동일한 virtual DOM일때)
  • 비교하는 ReactCompoenent객체가 다르다면 변경된 Virtual DOM의 마운트를 해제하고 모두 새로만들어 갱신한다. (기존의 VirtualDOM 과 다를때)

9.3-4. Transaction객체

컴포넌트에서 componentDidMount() 메서드는 항상 모든 컴포넌트의 작업이 끝난후 발생하도록 되어있기 때문에 큐에 등록하고 나중에 한번에 발생시킨다.

따라서 React App의 성능을 최대로 이끌어내려면 DOM과 VirtualDOM의 동기화를 최소화하는 것이 중요하다.

10. Event Delegation

만약 버튼이 수백개가 있다면 이 모든 버튼에 클릭이벤트를 다는 것은 좋지않다.
가장 좋은 방식은 이벤트 대리인 방식이다.

  • 즉 상위엘리먼트에 이벤트리스너를 등록한다.
  • 상위엘리먼트는 모든 자식의 이벤트를 캐치한다.

이때 주의할 사항은 타겟이 우리가 원하는 엘리먼트가 맞는지 체크하는 것이다.

11. Generator

function*을 통해 정의된 객체이다. 이 객체는 Iterable이면서 Iterator이다.

따라서 함수의 실행을 중간에 멈추고 재개할 수 있다.

  • 실행을 멈출 때 값을 전달할 수 있기 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용할 수 있음
  • 제너레이터는 보통의 컬렉션과 달리 값을 미리 만들어 놓지 않음
    → 필요한 순간에 값을 계산해서 전달 가능하기에 메모리 측면에서 효율적
  • 다른 함수와 협업 멀티태스킹(cooperative multitasking) 가능
  • 제너레이터가 실행을 멈추고 재개할 수 있기 때문에 멀티태스킹이 가능해짐
  • 협업이라고 부르는 이유는 제너레이터가 실행을 멈추는 시점을 자발적(non-preemptive)으로 선택하기 때문

12. 프로세스와 스레드

  • 프로세스는 운영체제로부터 자원을 할당받는 작업의 단위
  • 스레드는 프로세스가 할당받은 자원을 이용하는 실행의 단위

12-1. 싱글스레드의 장점.

  • 공용 자원접근에 동기화 신경쓰지 않아도 된다.
  • 여러개의 프로세스가 하나의 프로세서에 공유할 때 발생하는 작업이 필요없다.

12-2. 싱글스레드의 단점.

  • 여러개의 CPU를 활용하지 못한다.
    • 프로세서를 최대한 활용하게 하기위해 외부에서 여러개의 프로그램 인스턴스를 실행시키는 방법을 사용해야함.
  • 하나의 작업을 두개의 스레드가 처리할 경우 짧은 시간동안 2개의 스레드가 번갈아가며 작업을 수행한다. 그래도 동시에 두 작업이 처리되는 것처럼 느끼게 된다.
    만약 두개의 스레드가 더 오래걸린다면 스레드간 전환에 시간이 소요됬기 때문이다.

12-3. 멀티스레드의 장점.

  • 프로그램을 다수의 실행단위로 나누어 실행하기에 프로세스의 자원과 상태를 공유하여 효율적 운영가능하다. 프로세스의 작업전환보다 스레드의 작업전환이 더 빠르다.

12-4. 멀티스레드의 단점.

  • 하나의 스레드만 실행중일때 실행시간이 오히려 지연될 수 있다.
  • 운영체제의 지원이 필요하다.
  • 스레드 스케줄링에 신경써야한다.

13. 자바스크립트는 왜 싱글쓰레드일까?

이렇게 불리는 이유는 이벤트루프 때문인데, 자바스크립트의 메인쓰레드인 이벤트 루프가 싱글 쓰레드이기 때문에 자바스크립트가 싱글 쓰레드라고 부른다. 하지만 자바스크립트 런타임은 싱글쓰레드가 아니다.

자바스크립트가 멀티쓰레드 였다면 웹페이지에서 발생하는 동시성 문제를 해결해야했지만 단일쓰레드이기 때문에 교착상태같은 다중쓰레드에서 발생할 수 있는 복잡한 시나리오를 신경쓸 필요가 없이 비동기로 여러요청을 쉽게 처리할 수 있다.

  1. call stack
  2. call stack이 비워지면 이벤트 루프는 task queue에 있던 callback을 call stack에 옮겨 작업을 수행한다.

14. SSR VS CSR

서버사이드 렌더링 VS 클라이언트 사이드 렌더링

14-1. CSR

웹서버에 처음 요청할 때 데이터가 없는 문서를 반환한다. 이후 HTML, STATIC파일들이 로드되면서 데이터가 있다면 데이터또한 서버에 요청하고 그것이 화면성에 로드된다.

CSR은 최초 1번 서버에서 전체페이지를 로딩하고 이후에는 사용자의 요청이 올때마다 리소스를 서버에서 제공한후 클라이언트가 해석하고 렌더일하는 방식.

장점: 첫로딩에 HTML과 STATIC파일들만 다 받으면 동적으로 빠르게 렌더링하기 때문에 사용자 UX가 뛰어나다
단점: 모든 HTML과 STATIC파일이 로드될때까지 기다려야한다. 리소스를 스플릿해서 요청할때만 다운받는방식으로 완화는 가능하다. SEO 문제가 발생할 수 있다.

14-2. SSR

완전하게 만들어진 HTML파일을 가져오고 렌더링한다.
웹서버에 요청할 때 브라우저 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식

장점: 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 볼 수 있다. 모든 검색엔진에 검색엔진 최적화가 가능하다
단점: 매번페이지를 요청할 때마다 새로고침되기 때문에 사용자 ux가 다소 떨어진다. 서버에 매번 요청하기 때문에 트래픽 서버 부하가 커진다.

CSR, SSR을 렌더링을 어디서 하느냐의 차이일뿐 그리고 SPA, MPA는 페이지를 하나를 쓰느냐 여러개를 쓰느냐의 차이일뿐이다.

15. SPA

하나에 페이지로 구성된 앱이다. 사용자가 요청한 각각의 페이지를 서버가 생성해서 전달해주는 방식이 이니라. 클라이언트가 동적으로 페이지를 다시 작성하는 방식

첫 페이지 요청시 단 한번만 리소스를 로딩하고 기 이후에는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아와 화면을 갱신한다.

필요한 부분만 갱신하기 때문에 네이티브앱에 가까운 자연스러운 페이지 이동과 사용자 경험을 제공할 수 있다.

15-1. SPA 단점

처음 접속시에 사이트 구성과 관련된 모든 리소스를 한 번에 받기 때문에 초기 구동 속도가 느릴 수 있습니다.
데이터를 별도로 요청하고 받아와서 화면을 구성하므로 설계 방식에 따라서는 화면이 변하는 모습이 사용자에게 노출될 수 있습니다. 별로 보기 좋지는 않습니다.
SPA 구조 상 데이터 처리는 클라이언트에서 하는 경우가 많은데, 중요한 비즈니스 로직이 존재한다면 사용자가 굳이 파헤쳐 보겠다 하면 막기 어렵습니다.
검색엔진 최적화(SEO)가 어렵습니다.

1번과 2번 단점은 lazy loading, pre-rendering을 통해서 어느 정도 극복이 가능합니다. (이 부분은 다음 챕터에서 다시 다루도록 하겠습니다)

3번과 같은 경우, 노출되어서는 안 되는 중요한 로직이 있다면 해당 기능만 API를 통해서 서버에서 처리하도록 하면 그만이니까 다소 비효율적이긴 하더라도 큰 문제는 아닐 것 같습니다.

사실 근본적인 문제는 결국 SEO 입니다. 이는, 검색 엔진이 크롤링할 때 JavaScript를 실행하지 않고 있는 그대로 긁어가기 때문에 문제가 발생합니다. 즉, 사용자가 인지하는 화면과 검색 엔진이 인지하는 화면이 다르게 되는 것이죠. 요즘 구글은 JavaScript 처리도 가능함...하지만..

16. virtual DOM에 대해 설명해봐라

16-1. virtual dom과 일반 dom의 차이

17. typescript의 htmlElement, htmlNode 차이

18. 쿠팡의 첫 페이지를 띄운다 했을때 구조를 설계해봐라

  • 검색, 리스트업 등 구상은 맘대로

19. class 와 함수형 프로그래밍의 차이에 대해 설명

20. dom tree, render tree의 설명

21. 스크립트를 html에서 비동기적으로 실행하도록 하는 방법

21.1 언제 호출이 되고 언제 다운이 되는가?

22. CORS가 일어나는 때와 해결법

23. 요즘 공부하는 것과 학습법

24. 상태관리 써본것 무엇 무엇인가?

24.1 react 18에서 나온 상태관리의 문제점을 아는가?

25. 디자인패턴

참고링크

profile
🌃브로콜리한 개발자🌟

0개의 댓글