브라우저 주소창에 주소를 입력하고 엔터키를 누르면 무슨일이 일어나는지 알아봅니다.
URL ( Uniform Resource Location )
브라우저 (클라이언트) ← http / https 통신 → 서버 ( 리소스가 있는 곳, 웹페이지, 이미지, 폰트등등)
| 브라우저 | ← https (http) → | 서버 |
|---|---|---|
| 클라이언트라고도 함 | http | 리소스가 있는 곳으로, 웹페이지, 이미지, 폰트 등등 |
| 주소창에 URL 입력하여 | 프로토콜을 | URL이 가리키는 도메인에 접속 |
| 요청 (Request) 보냄 | 이용하여 | 응답 (Response ) 함 |
| Request에는 아래와 같은 내용이 보내짐 ( 예시) | ||
| GET / index.html HTTP/1.1 Host: www.example.com | ||
| Accept-Language: en-us | 통신한다 | HTTP/1.1 200 OK |
| Date: 1 Jan 2023 09:00 | ||
| Content-Type: text/html | ||
| <!DOCTYPE html> | ||
| <html> … </html> | ||
| ( 받은 요청에 따라 이런 내용으로 응답합니다 ) 🅰️ | ||
| 🅰️ 받고나서 브라우저는 | ||
| <!DOCTYPE html> 부분의 html 코드 읽어서 구조화합니다 이것을 DOM 이라고 부릅니다. | ||
| (Document Object Model ) | ||
| DOM은 html 문서안에 있는 오브젝트 또는 엘리먼트에 해당 (대표)합니다 이것들은 paragraphs of text, images, links 그외 것들로 브라우저는 필요시 리소스를 얻기위해 서버에 다시 요청합니다. 병렬로 요청하므로 매우 빠르게 이루어집니다 🅱️ | ||
| 🅱️ 통해 리소스를 가져오면 랜더링하여 브라우저에 표현합니다. | ||
| HTML 문서를 랜더링한다는 것은 문서를 표시( display) 하는 것을 말합니다 | ||
| 1️⃣ 내컴에서 a.html를 만들고 이것을 웹호스팅 업체에서 할당받은 곳, 우리가 서버라 부르는 곳에 파일질라를 통해 업로드 한다. | 2️⃣ a.html는 닷홈서버에 올려져 있고 a.html에 사용된 이미지, 폰트 등등이 서버에 있다. | |
| a.html 페이지에 접속하려면 example.com 이라는 도메인을 사용해야 한다 | ||
| 3️⃣ 친구가 내 도메인주소http://example.com/a.html 로 접속하면 위에서 언급한 요청이 보내지고 | 4️⃣ 서버는 a.html 내용을 보낸다 | |
| 5️⃣ 응답을 받고 이것들로 DOM를 형성하면서 필요한 리소스를 다시 요청하여 받아온다. | 6️⃣ 리소스 요청이 있다면 해당 리소소를 보내준다. | |
| 7️⃣ 랜더링하여 브라우저에 표시합니다 |
<aside> 🔥 현재까지 랜더링은 클라이언트, 사용자의 브라우저에서 이루어지고 있다. 앞으로는 더 빠른 응답을 위해 서버에서 랜더링이 이루어지는 방법이 개발되고 있다.
</aside>
• 클라이언트에 의해 전송되는 메시지를 **요청(requests)**이라 하고, 요청에 대해 서버에서 응답으로 전송하는 메시지를 **응답(responses)**이라고 한다.
이미지출처 : https://e2e.ti.com/blogs_/archives/b/energyzarr/posts/the-true-cost-of-an-internet-click
이미지출처 :https://www.oreilly.com/openbook/webclient/ch03.html
예제는 https://www.geeksforgeeks.org/how-to-get-post-data-in-node-js/
app.post('/',
(req, res) => {
console.log("post req",req.body)}
console.log("post headers : " , req.headers)
input으로 유저이름과 비번을 입력하고 submit 하면
결과는 아래와 같이 객체형식으로 출력된다
post res : { username: 'cxcxc', password: 'sdcdsc' }
아래는 req.header가 출력되었는데, 요청본문에는 사용자이름과 비번이 포함되어 있고
**헤더에는 인증토큰이 포함**되어 있다.
