프론트엔드
이번 시리즈에서는 현업 프론트엔드 개발 과정에서 익혔던 기본적이고 굉장히 유용한 정보들을 기록으로 남기고자 한다. 여담이지만 이러한 내용들을 모르고 현업에 종사하는 개발자들이 생각보다 많다. 충격적이다. 그러나 나는 꼭 기초부터 쌓아올려야겠다..
HTTP 프로토콜
Hypertext Transfer Protocol 으 웹을 개발하는 사람이라면 누가나 알아야 하는 통신 프로토콜이다. 프로토콜이랑 상호간에 정의한 규칙, 즉 HTTP 라는 통신 규칙이다.
특징
-
Connetless
한번 요청(Request) 에 대한 응답(Response) 가 한번 씩 이루어지고, 그 이후에는 관여하지 않는다. -
Stateless
연결 이후에 클라이언트측면에 정보를 가지고 있지 않아서 계속 사용중인지 아닌지에 대한 관심이 없는 것을 말한다.
Request 와 Response
클라이언트(요청을 보내는 쪽) 는 브라우저를 의미하고, 서버(요청을 받는 쪽) 은 데이터를 보내주는 원격지의 컴퓨터를 의미한다.
URI
URL(Uniform Resource Locator) 의 좀더 상위 개념으로 Information 을 가지고 있는 출처라고 이해하면 된다. 구체적으로는 Notation(Query String..) 을 포함하고 있어서 URL 에 정보를 함께 넘겨주는 것으로 이해하면 된다.
HTTP 요청 메서드
앞에서 살펴본 URI 를 이용해서 서버에 특정 데이터를 요청할 수 있다. 여기서 요청하는 데이터에 특정 동작을 수행하기 위해서 메서드가 존재한다.
일반적으로 http 요청 메서드는 http verbs 라고도 불리우며 아래와 같은 메서드를 가지고 있다.
- GET : 존재하는 자원에 대해 요청
- POST : 새로운 자원을 생성
- PUT : 존재하는 자원에 대한 변경 (단 모든 필드가 필요)
- DELETE : 존재하는 자원을 삭제
- PATCH : 존재하는 자원에 대한 변경 (변경하는 대상 필드만 필요)
그 외에도 아래와 같은 기타 요청 메서드도 존재한다
- HEAD : 서버의 헤더 정보를 획득, response.body 가 존재하지 않음
- OPTIONS : 서버 옵션들을 확인하기 위한 요청 (CORS 에서 사용)
HTTP 상태코드
앞에서 살펴본 URI 와 요청 메서드가 클라이언트에서 설정해야하는 정보라면 상태코드는 서버에서 응답해주는 정보라고 생각하면 된다.
프론트엔드 개발자 입장에서는 이 부분이 굉장히 중요한게... 이 상태 코드로 에러 처리를 할 수 있고, 디버그에도 유용하기 때문이다.
종류는 아래와 같다.
1. 2xx : 대부부분 성공을 의미한다.
- 200 : get 요청 성공
- 204 : No Content, 성공했지만 body 에 데이터가 없음
- 205 : Reset Content, 성공했으나 클라이언트의 화면을 새로고침 권고
- 206 : Partial Content, 성공했으나 일부 범위의 데이터만 반환
2. 3xx : 대부분 클라이언트가 이전 주소로 데이터를 요청해서 서버에서 새 URI 리 다이렉트를 유도하는 경우의 상태코드
- 301 : Moved Permanently, 요청한 자원이 새 URI 에 존재
- 303 : See Other, 요청한 자원이 임시주소에 존재
- 304 : Not Modified, 요청한 자원이 변경되지 않았으므로 클라이언트에서 캐싱된 자원을 사용하도록 권고
3. 4xx : 클라이언트 에러
- 400 : Bad Request, 잘못된 요청
- 401 : Unauthorized, 권한없이 요청
- 403 : Forbidden, 서버에서 접근 금지
- 404 : Not allowed, 허용되지 않은 메서드
- 405 : Conflict, 최신 자원이 아닌데 업데이트하는경우
4. 5xx : 서버 에러
- 501 : Not Implemented
- 503 : Service Unavailable
