개발야옹

HTTP Response Status Code

HTTP Response Status Code는 특정 HTTP Request가 성공적으로 완료되었는지 여부를 나타낸다.

응답은 5가지의 클래스로 구분된다.

1. 정보 응답(확인) 100 - 199
2. 성공적인 응답(통신 성공) 200 - 299
3. 리다이렉트 메시지(리다이렉트) 300 - 399
4. 클라이언트 오류 응답(클라이언트 오류) 400 - 499
5. 서버 오류 응답(서버 오류) 500 - 599

표준 응답 코드

10x :: 통신 성공

100 Continue

클라이언트가 요청을 계속해야 하거나 요청이 이미 완료된 경우

응답을 무시해야 함을 나타낸다.

101 Switching Protocols

클라이언트의 요청 헤더에 대한 응답으로 전송되며, 서버가 전환하는 프로토콜을 나타낸다.

102 Processing ( Web DAV 전용 )

서버가 요청을 수신하여 처리 중이지만 아직 응답이 없음을 나타낸다.

103 Early Hints

주로 헤더와 함께 사용되어 서버가 페이지에 리소스가 필요한 원본에 대한 응답 또는 사전 연결을 준비하는 동안 사용자 에이전트가 리소스 사전 로드를 시작할 수 있도록 하기 위함

:: 서버가 필요한 데이터를 가져오는 동안 클라이언트에게 필요한 css, js 파일을 넘겨주는 것

20x :: 통신 성공

200 OK

요청 "성공" 의미 (GET)

201 Create

요청 "성공" 새 리소스 생성

생성 성공(POST)

202 Accepted

요청 접수 "성공"

요청이 수신 되었지만 아직 실행되지는 않음.

204 No Contents

요청 "성공" 콘텐츠는 없음

처리 결과만 중요한 API의 경우 주로 사용

30x :: 리다이렉트

300 Multiple Choice

서버에서 여러 개의 응답이 있음을 알릴 때 사용

301 Move Permanenlty

요청 URI가 새 위치로 옮겨갔을 때 (영구적으로 컨텐츠가 이동했을 때 사용)

304 Not Modified

200 다음으로 많이 볼 수 있는 HTTP 상태 코드 이다.

요청된 리소스를 재전송할 필요 없음을 나타낸다.

304 인경우 보통 브라우저에 캐시되어 있는 버전을 사용한다.

40x ::  클라이언트 오류

400 Bad Request

서버에 API에 정의되어 있지 않은 요청이 들어온 경우, 즉 사용자가 잘못된 요청을 한 경우

401 Unauthorized

인증 오류

"인증되지 않은 클라이언트가 요청을 했을 경우", 사용자는 요청에 대한 응답을 얻기 위해서 인증한 후 다시 요청을 보내야 한다.

403 Forbidden

권한 밖의 접근 시도

클라이언트가 액세스 권한이 없는 콘텐츠에 대한 요청을 보냈을 경우

404 Not Found

요청 URI에 대한 리소스가 존재하지 않는 경우

클라이언트가 요청한 리소스를 서버가 찾을 수 없을 때

브라우저에서 404는 URL이 인식되지 않음을 의미한다.

405 Method Not Allowed

API에서 정의되지 않은 메소드 호출

ex) DELETE 메소드로 요청을 했는데, API가 DELETE 메소드를 허용하지 않은 경우 

406 Not Acceptable

처리 불가

요청한 콘텐츠의 차입을 서버가 응답할 수 없는 경우

408 Request Timeout

요청 대기 시간 초과

서버의 요청 대기가 시간을 초과한 경우

409 Conflict

서버가 요청을 수행하는 중에 충돌이 발생한 경우

429 Too Many Request

사용자가 일정 시간동안 너무 많은 요청을 보낸 경우

50x :: 서버 오류

500 Internal Server Error

서버 내부 오류

서버에서 처리 방법을 알 수 없는 상황이 발생했을 때 

서버 로직에서 Error가 발생한 경우

502 Bad Gateway

게이트웨이 오류

서버가 게이트웨이나 프록시 역할을 하고 있거나 업스트림 서버에서 잘못된 응답을 받았을 때

503 Service Unavailable

서비스 이용 불가

서버가 오버로드 되었거나 유지관리를 위해 다운되었기 때문에 현재 서버를 사용할 수 없는 상태

대부분 일시적인 상태

504 Gateway Timeout

게이트웨이 시간 초과

서버가 게이트웨이나 프록시 역할을 하고 있거나 업스트림 서버에서 제대 요청을 받지 못함.

HTTP Request Methods

HTTP는 주어진 리소스에 대해 수행할 작업을 나타내는 요청 메서드 집합을 정의한다.

각 메소드들은 서로 다른 의미로 사용되지만 몇 가지 공통 기능은 그룹별로 공유된다.

• GET
  • 리소스(데이터) 요청
  • 일반적으로 우리가 브라우저를 통해서 주소창에 URL을 입력하여 서버에 리소스를 요청하는 것
• HEAD
  • 응답 본문 없이 메시지 헤더 정보를 응답으로 요청
  • GET과 유사하지만 실제 문서를 요청(Body)하는 것이 아닌 문서에 대한 정보(Header)를 요청
• POST
  • 데이터를 서버에 전송
  • 클라이언트가 서버에 데이터(정보)를 제출하기 위해 사용된다.
• PUT
  • 데이터 갱신(업데이트)하기 위해 사용
  • POST와 유사하지만 PUT은 이미 서버에 존재하는 기존 데이터 값을 갱신(업데이트)할 때 사용한다.
• DELETE
  • 서버에 저장된 리소스(데이터)를 삭제하기 위해 사용
• CONNECT
  • 클라이언트와 서버 사이의 중간 경유를 위해 사용
  • 보통 Proxy를 통해 SSL 통신을 하고자할 때 사용한다.
• OPTIONS
  • 서버 측 제공 메소드에 대한 질의를 하기 위함
  • 서버에서 지원하고 있는 메소드가 무엇인지 알기 위해 사용한다
    • 서버가 어떤 method, headr, content-type을 지원하는지
• TRACE
  • Request 리소스가 수신되는 경로를 보기 위함
  • 서버로부터 받은 내용을 확인하기 위해 loop-back 테스트를 할 때 사용
  • XST 공격을 예방하기 위해 보통 TRACE METHOD는 막아둔다.
    • TRACE Method 요청을 통해서 쿠키값이 탈취 될 수 있기 때문에
    • 참고
• PATCH
  • 서버에 저장된 리소스(데이터)의 일부분만을 갱신(업데이트)하기 위한 메소드
  • PUT과 유사하지만 PUT은 모든 데이터 갱신 PATCH는 일부분만 수정할 때 사용된다.

Cookie?

HTTP Cookie(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각을 의미한다.

서버가 브라우저에게 쿠키를 전달하면 브라우저는 쿠키를 저장해두었다가(브라우저 저장소에), 쿠키를 전달해준 동일한 서버에 클라이언트가 재 요청을 하게 되면 저장된 쿠키를 서버에 함께 전송한다.

Cookie는 서버가 요청이 동일한 브라우저에서 왔는지 확인할 때 주로 사용한다. 예시로 쿠키를 통해 사용자의 로그인 상태를 유지할 수 있다.

Cookie의 사용 목적

• 세션 관리 (Session Management)
  • 서버에 저장해야 할 로그인, 게임 스코어 등의 정보 관리
• 개인화 (Personalization)
  • 사용자 선호, 테마 등의 세팅
• 트래킹 (Tracking)
  • 사용자 행동을 기록하고 분석하는 용도

Session?

Session은 쿠키를 기반으로 한다. 그러나 Cookie와 가장 큰 차이점은 사용자의 정보를 브라우저에 저장하는 쿠키와 달리 세션은 서버에서 관리한다.

사용자에 대한 정보를 서버에서 저장하여 관리하기 때문에 보안상 쿠키보다 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다.

Client가 Server에 Request를 보내면, Server가 Client에게 Unique한 Id를 부여한다. 이것이 SessionId이다.

Cookie VS Session

브라우저의 주요 기능

html과 css 명세에 따라 html 파일을 해석해서 사용자에게 보여줌.

• 명세 - W3C에서 정해짐
• 예전에는 브라우저들이 W3C의 일부 명세만 따르고, 독자적 방법으로 구현하고 확장하여 브라우저간 심각한 호환성 문제가 발생했었다. 최근에는 대부분의 브라우저들이 모두 표준 명세를 따르고 있다.
• 표준 명세
  • HTTP, HTTPS
  • HTML, XML, XHTML
  • GIF, PNG, JPEG, SVG 
  • CSS, Javascript
  • Cookie, 디지털 인증서
  • 즐겨찾기 아이콘 및 플러그인 지원

브라우저 기본 구조

사용자 인터페이스

• 주소 표시줄
• 이전/다음 버튼
• 북마크 
• 요청 페이지를 보여주는 화면을 제외한 그 외 다양한 메뉴들

브라우저 엔진 

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

렌더링 엔진

요청한 콘텐츠 표시 

사용자가 요청한 페이지가 response로 오면 해당 html, css 파일을 파싱해서 화면에 보여줌

통신

http 요청과 같은 네트워크 호출에 사용 

플랫폼의 독립적인 기능

UI 백엔드

플랫폼에서 명시하지 않은 일반적 인터페이스

콤보 박스나 글 입력 폼 등의 기본적인 장치를 그린다.

자바스크립트 해석기

자바스크립트 코드를 해석하고 실행

자료 저장소

HTML 5부터 추가된 기능

데이터를 클라이언트에 저장할 수 있는 저장소

영구적인 LocalStorage와 임시 저장소인 SessionStorage가 있음

Cookie와 같은 데이터를 저장

렌더링

브라우저의 렌더링 엔진은 요청 받은 내용 파싱하여 브라우저 화면에 보여준다.

기본적으로 html, xml, image를 표시할 수 있다. ( 브라우저 확장 기능으로 pdf 등 다른 유형의 파일도 표시가 가능 )

렌더링 엔진 종류

1. 웹킷(Webkit) - 크롬, 사파리
   • 최초 리눅스 플랫폼에 동작하기 위한 오픈소스 엔진
2. 게코(Gecko) - 파이어폭스

렌더링 동작 과정

1. HTML Parsing
2. Render Tree 구축
3. Render Tree 배치
4. Render Tree 그리기

HTML 문서 파싱

파싱된 HTML 태그를 모두 DOM Node로 변환

외부 CSS 파일, 스타일 요소 파싱

스타일 정보와 HTML 규칙으로 렌더 트리 생성

렌더 트리 생성 끝나면 렌더 트리 배치 (렌더 트리는 정해진 순서대로 화면에 표시 )

렌더 트리 배치가 진행되면서 DOM Node를 정확한 위치에 표시

UI 백엔드에서 렌더 크리를 그림

이러한 과정 점진적으로 진행

전송 받고 기다리는 동시에 받은 내용을 먼저 화면에 보여준다. 

DOM (Document Object Model)

Dom은 node와 객체로 문서를 표현한다. DOM은 웹 페이지의 객체 지향 표현이며, JS같은 Script 언어를 통해서 DOM을 수정할 수 있다. 

즉, DOM 은 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미(트리구조)