[Course / TIL] Wanted Pre Onboarding FE Course 5주차 - 개인 과제 9 진행 및 면접 준비

Course

Wanted Pre Onboarding FE Course

Study

HTTP

HTTP 역사

HTTP/0.9 -> HTTP/1.0 -> HTTP/1.1 -> HTTP/2.0 -> HTTP/3.0

현재는 HTTP/1.1을 주로 사용 (가장 중요)

HTTP 특징

클라이언트 서버 구조

Request Response 구조

클라이언트는 서버에 요청을 보내고, 서버가 요청에 대한 결과를 만들어 응답하는 방식

Stateless

서버가 클라이언트의 상태를 보존하지 않기 때문에 무상태(stateless)라고 한다.

• 장점: 서버 확장성 높음 (스케일 아웃)
• 단점: 클라이언트가 추가 데이터 전송

Stateful
서버에서 클라이언트의 상태를 보존하므로 클라이언트쪽에서 매번 같은 정보를 넘겨주지 않아도 응답을 받을 수 있다. 중간에 응답자가 바뀌게 되면 상태 정보를 바뀐 응답자에게 미리 알려주어야 한다.
요청/응답을 하고 있던 서버에 장애가 생기면 다른 서버에 요청을 해야하는데 이때 처음부터 상태를 다시 알려주어야 한다.

• 로그인 유지: 브라우저 쿠키, 서버 세션

Stateless
클라이언트 상태를 서버는 모르기 때문에 클라이언트쪽에서 상태를 계속 알려준다.
서버에서 이를 기억하고 있지 않으므로 서버에 부담이 덜하고, 갑자기 요청이 많아져도 서버를 대거 투입할 수 있다.
응답 서버를 쉽게 바꿀 수 있다.(무한한 서버 증설)

• 로그인 필요없는 화면
• JWT 방식

Connectionless

Connection Oriented
TCP/IP는 기본적으로 연결을 유지한다.
클라이언트에서 요청을 보내지 않더라도 계속 연결을 유지해야한다.
연결을 유지하면 서버의 자원이 소모된다.

Connectionless
실제로 요청을 주고받을 때만 연결을 유지하고, 응답을 주면 TCP/IP 연결을 끊는다.
이를 통해 최소한의 자원으로 서버를 유지한다.
초 단위 이하의 빠른 속도로 응답한다.
1시간 동안 수천명이 서비스를 사용해도 서버에서 동시에 처리하는 요청은 수십개 이하이다.

하지만, TCP/IP 연결을 새로 맺어야 하기 때문에 3 way handshake 시간이 추가된다는 단점이 있다.
또한, 사이트를 요청할 경우 HTML, CSS, JS, 이미지 등 수 많은 자원이 다운로드된다.
이를 해결하기 위해 HTTP 지속 연결(Persistent Connections) 사용

• 지속 연결
  요청 하나하나에 대해서 연결과 종료를 반복하지 않고
  연결 후 모든 자원에 대한 응답이 돌아오고 난 후에 연결을 종료한다.

• Polling
  HTTP 통신에서는 클라이언트 요청 전에 서버가 응답을 줄 수 없다.
  websocket 프로토콜 이전에는 HTTP 프로토콜만을 이용해서 실시간 소통을 구현해야 했는데,
  이 때 등장한 모델이 Polling이다.

  서버와 실시간 통신을 하는 것처럼 클라이언트에서 일정 간격 동안 계속해서 요청을 보내는 방식이다.

• Long Polling
  계속해서 요청을 보내지 않고, 서버에서 time-out 시간을 두어서 보낼 데이터가 있으면 보내고,
  없으면 보내지 않는 것으로 해서 데이터 응답에 상관없이 time-out 시간이 지나면 클라이언트에서 다시 요청을 하는 방식이다.
  변경된 데이터가 있을 때만 응답이 이루어지므로 서버의 부하도 적고, 실시간성도 높다.
  데이터가 자주 바뀌게 되면 요청에 포함된 무거운 헤더로 인해 비효율적이다.

• Websocket
  Websocket은 양방향 연결을 위해 HTTP 내에서 별도로 정의한 연결부이다.
  ws 이외에도 wss 프로토콜이 있으며 wss가 신뢰성 및 보안성이 더 좋다.

• socket.io
  양방향 이벤트 기반 통신을 가능하게 하는 javascript 라이브러리 (클라이언트, 서버로 구성)

  • 장점:
    웹소켓이 지원되지 않을 경우 HTTP long polling 방식을 사용
    자동 재접속
    소켓 연결 전 발생한 이벤트는 연결때까지 버퍼링 (패킷 버퍼링)

HTTP 요청에 대한 이해

• HTTP 요청/응답 주기의 수명 주기

  • 수명 주기(Request Lifecycle)란?

    들어온 요청이 어떻게 처리되고, 응답은 어떻게 처리되는지를 말한다.

  • 미들웨어
    먼저 전역으로 바인딩된 미들웨어 실행
    이후 모듈에 바인딩된 순서대로 실행

  • 가드
    먼저 전역으로 바인딩된 가드 실행
    이후 컨트롤러에 정의된 순서대로 실행

  • 인터셉터 인터셉터의 실행순서는 가드와 유사

  • 파이프

  • 예외 필터

  

• HTTP 메서드

  • 주요 메소드 5가지
    GET: 리소스 조회
    POST: 요청 데이터 처리, 주로 데이터 등록에 사용
    PUT: 리소스를 대체, 해당 리소스가 없으면 생성
    PATCH: 리소스를 일부만 변경
    DELETE: 리소스 삭제

  • 기타 메소드 4가지
    HEAD: GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환
    OPTIONS: 대상 리소스에 대한 통신 가능 옵션을 설명(주로 CORS에서 사용)
    CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을 설정
    TRACE: 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행

• 헤더

• 컨텐츠 유형

• 응답 코드

  • 1xx (Informational): 요청이 수신되어 처리중(거의 사용하지 않음)

  • 2xx (Successful): 요청 정상 처리
    200 (OK): 요청 성공
    201 (Created): 요청 성공, 새로운 리소스 생성
    202 (Accepted): 요청이 접수되었으나 처리가 완료되지 않았음
    204 (No Content): 요청 성공, 페이로드 본문에 보낼 데이터가 없음

  • 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요
    301 (Moved Permanently): 리다이렉트 시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음
    302 (Found): 리다이렉트 시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음
    303 (See Other): 리다이렉트 시 요청 메서드가 GET으로 변경
    304 (Not Modified): 캐시를 목적으로 사용
    307 (Temporary Redirect): 리다이렉트 시 요청 메서드와 본문 유지
    308 (Permanent Redirect): 요청 성공, 페이로드 본문에 보낼 데이터가 없음

  • 4xx (Client Error): 클라이언트 오류, 잘못된 문법 등으로 서버가 요청을 수행할 수 없음
    400 (Bad Request) : 클라이언트가 잘못된 요청을 해서 서버가 요청을 처리할 수 없음
    401 (Unauthorized) : 클라이언트가 해당 리소스에 대한 인증이 필요함
    403 (Forbidden) : 서버가 요청을 이해했지만 승인을 거부함
    404 (Not Found) : 요청 리소스를 찾을 수 없음

  • 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함
    500 Internal Server Error : 서버 문제로 오류 발생, 애매하면 500 오류
    503 Service Unavailable : 서비스 이용 불가

  [참고] https://kyun2da.dev/CS/http-%EB%A9%94%EC%86%8C%EB%93%9C%EC%99%80-%EC%83%81%ED%83%9C%EC%BD%94%EB%93%9C/

면접

면접 정리

React의 라이프 사이클 (useEffect와 라이플 사이클 메서드)

useState와 useRef 변수 업데이트의 차이점

State의 종류와 관리 방법

Redux를 왜 사용했는지

thunk가 무엇인지. 미들웨어가 무엇인지

프로젝트에서 redux를 어떻게 구현하였는지, Flux 패턴과 함께 설명

Javascript로도 프로젝트하고 React로도 했는데 React로 했을 때의 장점

본인이 새로운 것을 개발하는 것을 좋아하는지, 리팩토링을 좋아하는지

이전 코드를 알아볼 수 없게 되는 것은 코드 수명이 다했다고 볼 수 있는데, 코드 수명을 늘리려면 어떻게 하면 좋을지

팀 프로젝트 간단 소개

팀 프로젝트에서 가장 힘들었던 부분

팀 프로젝트에서 맡은 부분과 본인이 생각하는 참여 비율

요새 눈여겨보고있는 웹 서비스

그 서비스의 UI/UX적 장점 및 단점

말한 단점에 대해서 어떻게 개선할 수 있을 것인지

그 서비스를 운영하는 데에도 개발자가 꽤 될텐데 왜 개선이 안되고 있는 것인지, 말한 답변이 최선인지

기술 스택에 관한 것도 좋지만, CS 공부는 어떻게 할 것인지

소통을 잘한다고 쓰여져 있는데, 아무 것도 모르는 사람한테 javascript가 아닌 react로 개발하는 이유와 react가 도대체 무엇인지 설명해보세요.

아무리 사수가 있더라도 문하생처럼 가르쳐 줄 수는 없다. 어떻게 성장할 것인지 앞으로 3~4개월 혹은 1년 내의 구체적인 계획 (굉장히 파고듬)

만약 입사하게 된다면 온보딩 기간에 프로젝트 코드/레포를 주고 분석하도록 할텐데 구체적으로 어떤식으로 분석할 것인지

스스로 성장하기 위해서 회사에서 해주어야 할 것. 바라는 것이 있는지

회고 (TIL)

2022.03.23 Daily 회고

✏오늘 한 일

• 개인 과제 수행
• study
  • http
• 면접

⁉느낀 점

React가 무엇인지, React를 왜 쓰는지에 대한 이런 원초적인 질문들도 준비를 해두어야 할 것 같다.

🎃현재 나의 상태

너무 피곤하다!

---