[Dev-Immersion] 2주차 개념 스터디

hj·2021년 8월 10일

Dev-Immersion

목록 보기

2/5

[공통]

HTTP

웹 서버와 웹 클라이언트(웹 브라우저)가 데이터를 교환할 때 사용하는 통신 방법이다. 웹 클라이언트는 웹 서버로 HTML 파일이나 이미지 등 웹 클라이언트가 필요한 리소스들을 요청할 수 있고, 웹 서버는 웹 클라이언트로부터의 요청에 대한 응답을 할 수 있다.

HTTP를 사용하는 이유는? 신뢰성 있는 데이터 전송 프로토콜을 사용하면 개발자는 자신의 기능 개발에만 집중할 수 있고, 사용자는 안전하게 정보를 이용할 수 있다.

웹 서버에 저장되는 데이터(리소스)의 종류는? 이미지, HTML 파일, 동영상 파일 등 다양하다. 리소스의 종류가 매우 많기 때문에 웹 서버는 브라우저가 요청한 데이터를 보낼 때 MIME라는 미디어 타입을 같이 보낸다. 브라우저는 MIME 타입을 보고 리소스를 내려 받았을 때 해야할 기본동작을 결정한다.

HTTP 트랜잭션이란? 클라이언트가 서버로 데이터 요청을 하거나, 서버가 클라이언트로 응답을 하는 것을 의미한다. 이 상호작용은 HTTP 메시지라는 데이터 덩어리를 통해 이루어진다.

HTTP 1.1 / 2.0

HTTP 1.1 가장 많이 사용되는 HTTP 버전이다. TCP 연결 당 하나의 요청과 응답을 보내므로 단순하지만 속도가 매우 느리다.
HTTP 2.0 HTTP 1.1을 보완하기 위해 나온 버전이다. 하나의 커넥션에 여러 개의 요청과 응답을 보낼 수 있어서 속도가 빠르다.

상태코드

HTTP 상태코드는 클라이언트가 요청한 것이 성공적으로 처리되었는지에 대한 여부를 알려주는 숫자이다. 모든 HTTP 응답 메시지는 상태 코드와 함께 보내어진다.

1xx: 정보(요청을 받았으며 프로세스를 계속한다.)
2xx: 성공(요청을 받았고 성공적으로 처리)
3xx: 리다이렉션(요청 완료를 위해 추가 작업 조치가 필요하다.)
4xx: 클라이언트 오류(요청 문법 오류/처리할 수 없는 요청)
5xx: 서버 오류(서버 측의 오류)

요청 메서드

서버가 해야할 행동을 나타내는 것으로 클라이언트가 요청을 보낼 때 HTTP 메시지의 첫번째 줄에 위치한다.

GET: 클라이언트가 서버로 데이터를 요청
PUT: 클라이언트가 보낸 데이터를 지정한 리소스로 저장
DELETE: 지정한 리소스를 서버에서 삭제
POST: 클라이언트에서 서버로 데이터를 전송
HEAD: 리소스의 헤더에 대한 정보를 요청

POST와 PUT의 차이는? PUT은 클라이언트에서 전송한 데이터가 존재하지 않는 경우 새로 생성하고, 존재하는 경우 갱신해준다. (똑같은 데이터를 여러번 전송하더라도 하나만 생성된다.) POST의 경우 클라이언트가 전송한 데이터가 존재하더라도 새로 생성한다.

GET과 HEAD의 차이는? GET과 HEAD의 요청 방식은 동일하지만 응답 메시지가 다르다. GET은 응답 메시지의 body 부분에 리소스를 포함하지만 HEAD는 body 부분없이 헤더 정보만 포함한다.

HEAD를 사용하는 이유는? 헤더를 통해 리소스 변경 여부에 대해 확인을 하거나 상태코드를 통해 개체 존재 여부를 확인할 수 있다.

HTTP vs HTTPS

HTTPS는 HTTP에 보안 계층이 추가된 프로토콜이다. HTTPS를 사용하면 모든 HTTP 메시지는 보내지기 전에 암호화 과정을 거치게 된다. 암호화를 위해서는 TLS(Transport Layer Security)나 SSL(Secure Sockets Layer)를 이용한다.

HTTP vs TCP vs IP

HTTP는 애플리케이션 계층의 프로토콜이다. 네트워크 통신의 핵심적인 세부사항에 대해서는 신경쓰지 않는다. 네트워크 통신에 관해서는 TCP/IP가 신경쓴다.

서버와 클라이언트가 HTTP 메시지를 주고 받기 전에 IP 주소와 포트 번호를 이용해 클라이언트와 서버 사이에 TCP/IP 커넥션을 맺어야 한다.

IP 주소와 포트번호를 알아내는 방법은? URL을 이용해 알아낼 수 있다.
우선 사용자가 입력한 URL('https://www.practice.com:80/index.html')에서 서버의 호스트 명(www.practice.com)을 얻는다. 호스트 명은 DNS를 통해 IP 주소로 바꿀 수 있다. 그리고 포트 번호(80)를 추출한다. (포트 번호가 없는 경우 기본적으로 80 포트를 사용한다.)

TCP를 사용하는 이유는? 전송 계층에서 사용되는 프로토콜은 크게 TCP와 UDP가 있다. TCP는 연결 지향적(connection-oriented)이고 신뢰성(reliable)있는 프로토콜인 반면, UDP는 connectless하고 신뢰성이 없는(unreliable) 대신 오버헤드가 적고 빠른 프로토콜이다. HTTP는 신뢰할 수 있고, 메시지 손실이 없는 네트워크 통신을 원하기 때문에 TCP를 사용한다.

HTTP 요청을 할 때마다 커넥션을 맺는가? HTTP의 버전마다 다르다.
HTTP/1.0+는 keep-alive 커넥션을, HTTP/1.1에서는 지속 커넥션을 사용한다.

병렬 커넥션은 HTTP 요청마다 커넥션을 맺고 끊기 때문에 지연 시간이 존재하고, 지속 커넥션은 계속 연결된 상태를 유지하기 때문에 불필요한 리소스가 소모된다.
-> 두 개의 커넥션이 동시에 사용될 때 가장 효과적이다.

서버와 클라이언트란

서버는 서비스 제공자로, 클라이언트가 요구한 것을 처리해주는 역할을 한다. 클라이언트는 서비스 요구자이다. 서버로 자신의 요청을 보낸다. 그리고 서버와 클라이언트는 프로토콜의 규약에 따라 통신한다.

가장 대표적인 클라이언트 서버 구조는 웹 시스템이다. 웹 브라우저가 클라이언트, 웹 서버는 서버 역할을 하며 HTTP라고 하는 통신 프로토콜을 사용한다.

세션 & 쿠키란 무엇인가

세션과 쿠키를 사용하는 이유는? HTTP는 상태가 없는 프로토콜이다. 따라서, HTTP 메시지는 독립적이다. 각 요청과 응답이 독립적으로 일어나기 때문에 서버는 사용자를 식별할 수 없다.
이 때문에 사용자는 웹 페이지에 접속할 때마다 인증을 해야하는 번거로움이 생기는데 이 문제를 세션과 쿠키를 통해서 해결 할 수 있다. 그리고, 웹 페이지는 사용자 개인에게 맞춤화된 서비스를 제공할 수 있다.

세션은 브라우저가 종료되기 전까지 클라이언트의 요청을 유지하게 해주는 기술이다. 클라이언트가 로그인 요청을 한 경우 서버는 해당 클라이언트에게 세션 ID를 부여한다. 세션ID를 통해 사용자를 식별하게 된다.
쿠키는 사용자를 식별하고 세션을 유지하는 방식 중에 현재 가장 널리 사용하는 방식이다. 웹 브라우저에 key-value쌍으로 저장된다.

Prettier & ESLint

Prettier
코드의 스타일을 관리해주는 도구이다. JavaScript, HTML, CSS 등 여러 언어의 스타일을 관리해준다. React, Angular, Vue 등의 라이브러리도 지원해주고 있다.

탭의 크기, 세미콜론 여부, 따옴표의 종류(쌍/홑따옴표)를 설정할 수 있다.
저장할 때마다 자동으로 Prettier를 실행하고 싶을 때는 Code > 기본 설정 > 설정 > format on save 검색하여 체크를 해주면 된다.
ESLint
자바스크립트이 문법을 관리해주는 도구이다.

[FE]

브라우저의 동작과 DOM

브라우저는 서버로부터 HTML, CSS, Javascript 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.

DOM(Document Object Model)은 HTML 문서를 객체로 표현한 것이다.

Webpack / Babel

Webpack

웹팩은 HTML, CSS, JavaScript 등과 같은 파일들을 모두 하나로 묶어주는 모듈 번들러이다.

Babel

최신 버전으로 작성된 코드(ES6, JSX, TypeScript 등)를 브라우저의 자바스크립트 엔진에서 실행할 수 있는 코드로 변환해주는 컴파일러이다.

// ES2020 nullish coalescing
function greet(input) {
  return input ?? "Hello world";
}

자바스크립트 최신 문법(ES2020)으로 작성된 코드를 ES5 문법으로 바꿔준다.

function greet(input) {
  return input != null ? input : "Hello world";
}

React / Vue / Angular 기술별 차이점과 장단점

React

자유도가 높다. (여러가지 코딩 스타일 존재)
커뮤니티나 자료가 많다.
자바스크립트 문법을 잘 알고 있어야 사용하기 쉽다.

Vue

러닝커브가 낮다.
자유도가 낮다.

Angular

프로젝트의 생성, 테스트, 빌드, 배포를 위한 모든 기능을 제공한다.
러닝커브가 높다.