이 글을 작성하게 된 계기는 벡엔드 공부를 시작하면서, 서버 쪽 기술을 학습하는데 공부하는 내용들이 잘 와닿지 않고 정리되지 않아서 왜 그런 것일까 생각을 해보고 찾아보니 문제점은 내가 인터넷, WEB 이 어떤 식으로 동작하는지에 대한 이해도가 없기 때문이라고 생각이 들었다. 그래서 나는 지금부터 인터넷이 무엇인지 그리고 지금까지 공부한 웹은 무엇이고 동작은 어떻게 하는지 큰 그림을 그릴 수 있는 정도를 위해 공부해 보겠다.
위 이미지는 내가 공부하고 정리 한 결과물이다. 1번부터 8번까지 주제별로 번호를 매겼다. 순서대로 알아가 보자!!!
1️⃣ WEB의 시작 / 발전
- 1990년 '팀 버너스 리'라는 컴퓨터 과학자에 의해 개발되었다.
- 웹브라우저에 정보를 표현하는 언어인 HTML과 함께 웹 서버와 웹 브라우저의 통신 규약인 HTTP를 정의 하였다.
2️⃣ URL -> DNS -> WEB Sever
- 우리가 웹 브라우저에서 원하는 사이트에 접속한다고 상상해 보자. 처음에 해야 할 행동은 당연히 접속하고 싶은 사이트의 주소를 주소창에 입력해야 한다. 이때, www.xxxx.com 이런 식의 형식을 입력하게 되는데 이것이 URL이다. URL은 주소이다. 더 자세히는 사람이 보기 편하고 외우기 쉬운 주소이다. 컴퓨터는 이 주소를 해석하지 못한다, 여기서 DNS가 필요하다. DNS는 URL과 숫자로 이루어진 IP주소를 기록하고 있는 전화번호부라고 생각하면 이해하기 쉽다. 사람이 URL주소를 입력하면 웹 브라우저는 거기에 맞는 IP주소를 DNS에서 가져와 웹 서버에게 전달한다!
3️⃣ HTTP , Internet???
- HyperText Transfer Protocol?
클라이언트(웹 브라우저)와 서버(웹 서버) 사이에서 Request와 Response가 이루어지는데 콘텐츠를 주고받기 위해 서버와 클라이언트가 함께 이해할 수 있는 메시지, 공통의 약속으로 작성된 규약이라고 정리할 수 있다!
- 웹 브라우저와 웹 서버는 어떻게 데이터(콘텐츠)를 주고받을 수 있을까? 모두가 알고 있겠지만, 인터넷이 연결되어 있으면 가능하다.
인터넷의 원리를 간단히 이해하자면, 우선 물리적으로 광섬유를 통한 빛형식의 데이터를 전달하고 그것을 라우터를 통하여 전기 형식 혹은 기지국을 통한 전자파 형식 등을 통하여 최종적으로 데이터를 가지고 있는 서버에서 우리가 요청한 기기로 전달받을 수 있다. 이때, 나오는 것이 TCP/IP이다. 이것은 따로 다뤄 보겠다.
4️⃣ REQUEST & RESPONSE
- 이제 우리가 웹 브라우저 주소창에 사이트 주소를 입력하여 웹 서버에게 데이터를 요청하면 어떤 일이 벌어지는지 알아보자!
예를 들어, 오늘 아침에 주식시장이 궁금해서 네이버 증권 사이트를 접속하려고, 주소창에 네이버 증권 사이트 주소를 입력하고 엔터를 땅!
하는 순간, 개발자 도구 네트워크창에서 확인할 수 있듯이 밑에 있는 사진에 보이는 것처럼 네이버 증권 사이트를 구성하기 위한 HTML, CSS 파일과, 수많은 이미지 파일들이 불러와지는 것을 볼 수 있고 상세하게는 Request와 Respose의 정보들에서 Get method를 써서 요청한 것을 볼수 있다.
초기의 WEB은 정적인 문서(글)만 보여주는 기술이었다. 하지만 사람들은 조금 더 가독성 좋고 이쁜 웹 페이지를 원하였고 여기서 추가된 것이 CSS이다. HTML과 CSS를 분리함으로써 파일의 유지보수와 가독성도 올라갔다!
여기서 멈추지 않고 Web은 한 단계 발전하게 되는데 이어서, 다음 글에서 정리해 보겠다.
