[TIL]Day 16. HTTP와 DOM의 개념

이번 포스팅은 http와 DOM의 개념에 대해 알아보도록 하겠습니다.

 

1. http

1) http의 뜻

 

http의 단어를 뜯어보면 다음과 같다.

ht: hyper-text

t: transfer

p: protocol

hyper-text라는 뜻은 문서와 문서가 링크로 연결된다는 뜻입니다. 

transfer는 전송한다라는 뜻을 가지고 있죠.

protocol은 규약이라는 뜻입니다.

 

즉, 직역하자면 '문서와 문서가 링크로 연결된 묶음들을 서로 전송하는 규약'이라고 할 수 있습니다. 

 

2) http의 두 가지 특징

 

(1) Request / Response (요청 / 응답)

 

http 통신의 핵심은 요청과 응답입니다. 통신을 한다는 것은 누군가가 메세지를 보내고 또 다른 누군가가 그 메세지를 받는다는 뜻이죠. 다시 말해, 보내는 주체가 받는 주체에게 요청을 보내면, 받는 주체는 해당 내용에 대한 응답을 보낸 주체에게 보낸다는 것입니다. http 통신이라는 것도 결국 이 틀에서 벗어나지 않는 것입니다.

 

(2) Stateless

 

http의 가장 중요한 특징이 바로 이 Stateless입니다. 이번에도 문자 그대로 직역하자면 State(상태) + less(없음) 을 의미합니다. 개별 http 통신은 독립적이기에 지난 통신의 내용에 대해선 전혀 기억하지 못합니다. 이러한 특징은 통신을 할 때마다 필요한 정보를 새로 주고 받아야함을 의미하게 됩니다. 비유를 하자면 이미 자기소개를 한  사람에게 매번 새롭게 자기소개를 한다는 뜻이죠.

이러한 소모적인 행동을 줄이고자 브라우저의 쿠키, 세션, 로컬 스토리지 같은 기능들이 개발되었습니다.

 

3) Response Status Codes

 

http 통신에 있어 응답의 상태코드를 아는 것은 중요합니다. 현재 이 통신이 잘 이루어지고 있는지, 오류가 발생했다면 어떤 이유로 발생했는지 등을 알 수 있기 때문이죠. 

200: OK

• 가장 자주 보게되는 Status Code.

• 문제없이 요청에 대한 처리가 백엔드 서버에서 이루어지고 나서 오는 응답코드

201: Created

• 무언가가 잘 생성되었을 때에(Successfully Created) 오는 Status Code

• 대게 POST 메소드의 요청에 따라 백엔드 서버에 데이터가 잘 생성 또는 수정 되었을 때에 보내는 코드

400: Bad Request

• 해당 요청이 잘못되었을 때 보내는 Status Code

• 주로 요청의 Body에 보내는 내용이 잘못되었을 때 사용되는 코드 ex) 전화번호를 보내야 하는데 숫자가 아닌 문자열의 주소가 대신 Body에 담겼을 경우

401: Unauthorized

• 유저가 해당 요청을 진행하려면 먼저 로그인을 하거나 회원가입이 필요하다는 의미 ex) wish list, 좋아요 기능은 회원이 아니면 요청을 보낼 수 없음

403: Forbidden

• 유저가 해당 요청에 대한 권한이 없다는 뜻

• 접근 불가능한 정보에 접근했을 경우 ex) 오직 유료회원만 접근할 수 있는 데이터를 요청 했을 때

404: Not Found

• 요청된 URI 가 존재하지 않는다는 의미

500: Internal Server Error

• 서버에서 에러가 났을 때의 Status Code

• API 개발을 하는 백엔드 개발자들이 싫어하는 코드 (프론트는 내 잘못 아니라는 것을 알 수 있는 코드)

4) http와 https의 차이

 

https는 http에서 한 단계 더 발전한 것이라고 할 수 있습니다. https의 s 는 secure의 약자로 더 보안이 강화되었다는 것을 의미합니다. 점점 더 웹에서 처리하는 데이터가 많아지고 정보 보안에 대한 중요성이 가중되면서 인터넷 통신의 새로운 규약으로 등장하게 되었습니다. https 로 시작하는 웹 페이지들은 해당 내용들이 암호화 되어 통신되고 있다는 것을 나타냅니다. https를 사용하면 속도가 다소 느려진다는 단점이 있지만, 그정도의 속도차이는 유저가 느낄 수 없는 수준이라고 합니다.  

 

 

2. DOM

 

DOM이란 Document Object Model의 약자로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미합니다. 다르게 표현하자면, '웹페이지의 html을 계층화 하여 트리구조로 만든 객체모델'이라고 할 수 있습니다. 기존의 html과 css는 정적인 웹페이지를 표현할 수는 있었지만, 그 이상의 무언가를 하긴 힘들었습니다. 이러한 문제를 해결하기 위해 자바스크립트가 등장하였고, 오늘날의 웹 3.0 시대에 보다 다양한 기능들이 등장하게 되었습니다. DOM은 이러한 맥락에서 등장하게 되었죠.

 

DOM을 통해서 html을 직접 제어할 수 있다보니, DOM에서는 태그 생성 및 컨텐츠 생성에서부터 사용자와의 이벤트 발생시 상호작용을 하는 기능을 수행합니다. 

 

3. 마무리

 

웹을 공부하면 반드시 만나게 되는 http와 DOM 기본 개념들을 잘 정리해서 앞으로 추가적인 공부를 하는데 많은 도움이 되었으면 좋겠습니다.

 

감사합니다.^^