TIL 22 (1): 웹 구동 방식

오늘은 Solo Day로 개인적으로 추가 공부를 하는 날입니다!

 

평상시에 궁금했던 웹 구동 방식이나 컴퓨터 하드웨어에 대해 공부해보려고 합니다.

물론 개발자들한테는 코딩 실력이 제일 중요하겠지만, 컴퓨터 관련 전공자들에 비해 비전공자로서 부족한 부분이라고 생각되는 부분이 컴퓨터 관련 기본지식이라 생각했어요!

코딩 실력에 직접적인 영향이 있지는 않겠지만 그래도 내가 매일 쓰는 컴퓨터와 웹이 어떻게 작동하는지에 대해 기본적으로 아는 것이 나중에 좋은 백그라운드가 될 수 있겠다고 생각합니당

 

웹 구동 방식과 관련해서는 MDN 공식문서와 '비전공자를 위한 이해할 수 있는 IT 지식'을 참고해서 공부했습니다!

 

How the Web works - Learn web development | MDN

How the Web works - Learn web development | MDN

비전공자를 위한 이해할 수 있는 IT 지식 - YES24

비전공자를 위한 이해할 수 있는 IT 지식 - YES24

 

 

블로그에서는 간단하게 내용 요약정도로 해보려고 합니다!

 

 

웹에서는 기본적으로 두 컴퓨터가 필요합니다.

Client(클라이언트) 와 Server(서버) 입니다.

(참고로 컴퓨터 뿐만 아니라 핸드폰이나 태블릿 PC와 같이 인터넷에 연결할 수 있는 전자기기도 가능해요.)

클라이언트는 한국말로 고객이라는 뜻을 갖고 있는데 이 점을 고려해보면 이해하기 더 좋을 것 같아요!

클라이언트는 서버에게 웹 연결을 요청하는 컴퓨터입니다.

서버는 웹페이지나 앱 등을 저장하는 컴퓨터입니다.

그래서 클라이언트가 하나의 페이지에 접속하기 위해 서버에 요청하면, 서버는 클라이언트에게 웹페이지 사본을 전달합니다.

 

 

이외에도 인터넷 관련 기본 용어를 추가로 정리해보겠습니다.

MDN에는 집에서 상점까지의 경로를 비유해서 설명했는데, 낯선 용어를 보다 쉽게 이해할 수 있게 도와줬습니다.

• TCP/IP: 집에서 상점까지 가는데 이용하는 교통수단
• DNS: 상점 등 여러 장소들의 정확한 주소들이 저장되어 있는 곳
• HTTP: 물건을 주문하는데 사용하는 언어
• Component files: 상점에서 파는 다양한 종류의 상품들 여기에는 HTML, CSS, JS 등과 같은 코드파일과 이미지, 음악, 비디오와 같은 자원들이 있습니다.
• Packet: 상품들이 구성요소

위의 용어를 사용해서 이제 브라우저에 웹주소를 입력할 때 무슨 일이 생기는 지에 대해 알아보도록 하겠습니다.

 

 

브라우저는 DNS 서버로 가서 웹사이트의 제대로 된 주소를 확인합니다. 이후 클라이언트 브라우저는 서버에게 웹사이트 사본을 보내달라고 HTTP로 된 메세지를 보냅니다. 이 때, 클라이언트와 서버는 TCP/IP 연결을 통해 Request/Response를 합니다. 클라이언트의 HTTP 메세지를 받은 서버는 요청을 승인하고, 웹사이트의 파일들을 작은 데이터 패킷들로 브라우저에 전송합니다. 이렇게 패킷 단위로 전송하는 이유는 하나의 큰 덩어리로 전송하는 것보다 더 효율적이라고 합니다.

 

 

패킷과 관련해서 공부할 때 SPA가 생각났습니다. HTML의 전체를 받아오는 것보다 여러 컴포넌트로 나누어서 바뀌는 부분만 불러오는 것이 더 효율적이라고 배웠습니다. 패킷의 존재이유도 이와 비슷한 것 같습니다. 여러모로 컴퓨터와 관련된 것들은 효율성을 제일 추구하고 있다고 생각이 드네요.