TIL: 2022-10-05

⚙️ 오늘 배운 주제

네트워크 기초

 

🐹 오늘의 기분

미지의 세계였던 네트워크에 발을 담궜다. 평소에 자주 봐왔던 단어들이었지만 막상 공부하려니 낯설게 다가왔다. 각종 에러 코드들이나 이런 게 다 번호대마다 체계적으로 짜여있다는게 신기하기도 했다. 어제 오늘을 대비해서 네트워크 관련 영상을 몇 개 찾아봤었는데 그게 도움이 됐다. 그리고 평소에 인터넷 쓸 때마다 url도 들여다보는 편이라 url의 작성 구조가 궁금했었는데 오늘 그 원리를 조금이나마 알게 되었다. url의 상위 개념으로 uri가 있다는 것도 배웠음. 근데 내용이 너무너무 많아서 조금 힘들었다..ㅜ! 한 학기 동안 배우는 걸 하루만에 소화하는 것은 역시 쉽지 않음. 당분간은 시간 남을 때 네트워크 관련된 자료들을 좀 찾아봐야겠다.

 

🗝 키워드

클라이언트, 서버, 데이터베이스, API, IP, Port, HTTP, HTTPS, URL, URI, ajax, SSR, CSR

 

🗣 스스로에게 설명

서버는 클라이언트에게 요청 받은 리소스를 전달해주는 역할을 한다.

데이터베이스는 그 리소스를 저장해두는 곳이다.

클라이언트 - 서버 = 2티어 아키텍처

클라이언트 - 서버 - 데이터베이스 = 3티어 아키텍처 

 

클라이언트와 서버가 정보를 주고받기 위해서는 그에 대한 약속이 필요하다. (=프로토콜)

프로토콜: 통신 규약. 

웹 애플리케이션 아키텍처에서 서버와 클라이언트는 HTTP(HyperText Transfer Protocol)를 기반으로 정보를 주고받는다. 

이렇게 둘이 주고받는 메시지를 HTTP Message라고 한다. 

 

출처 mdn

HTTP Message는 요청(Request)과 응답(Response)으로 구성된다. 

HTTP는 통신 규약일 뿐이므로 상태를 저장하지 않는다. (Stateless)

Request에는 origin, absolute, authority, asterisk 네 가지 형식이 있다. 

메시지는 start line(response에서는 status line), header, empty line, body로 구성되며, body는 모든 요쳥에 필요한 것은 아니다.

HTTP 버전에 따라 message의 구조가 달라지기에 start line에 HTTP 버전을 명시한다. 

Response의 첫 줄에는 요청의 처리 상태를 나타내는 status line이 온다. 

상태 코드는 1xx, 2xx, 3xx, 4xx 이렇게 번호대에 따라 분류되어 있다. 

자주 보이는 것은 200, 302, 404, 500 등이다. 

 

HTTP response status codes - HTTP | MDN

HTTP Messages - HTTP | MDN

 

프로토콜에는 HTTP, HTTPS, FTP, SSH 등 여러 종류가 있다.

API (Application Programming Interface)는 클라이언트가 리소스를 잘 쓸 수 있도록 제공하는 인터페이스이다. 

서버에 요청하려면 이렇게 주문하세요~ 하고 써놓은 메뉴판이라고 이해하면 됨. 

 

HTTP 메소드를 이용하여 CRUD(Create, Read, Update, Delete)가 가능하다. 

GET, POST, PUT(or PATCH), DELETE

각 메소드는 목적에 맞게 써야 한다.

HTTP 요청 메서드 - HTTP | MDN

 

https://hanseul-lee.github.io/2020/12/24/20-12-24-URL/

URL = Uniform Resource Locator

URI = Uniform Resource Identifier

URI는 URL의 상위 개념이다. URL은 path까지만을 의미하며 URI는 그 뒤의 query와 fragment까지 포함한다. 

포트(노란색)는 http와 https와 같이 잘 알려진 프로토콜을 쓸 때에는 생략해도 되지만, 그게 아니라면 도메인 이름 뒤에 꼭 명시해주어야 한다. 

http의 포트 번호: 80 / https의 포트 번호: 443 / ssh의 포트 번호: 22

 

출처 https://www.comparitech.com/blog/vpn-privacy/ipv6-vs-ipv4/

IP는 특정 PC를 나타내는 주소이다. 

몇 개의 IP는 용도가 정해져있다. 

기존에는 IPv4만 썼지만 인터넷의 발달과 개인이 보유하는 전자기기의 수가 많아지면서 네 숫자의 조합만으로는 부족한 상황이 됐다.

새롭게 등장한 IPv6는 여섯 덩어리의 16진수로 구성되어 있어 고갈될 걱정이 없다. 

 

터미널에서 nslookup 사이트 주소를 입력하면 IP 주소를 볼수 있다. 

이 IP 주소를 일일이 기억하고 있기란 여간 쉬운 일이 아니다.

우리는 네이버에 접속할 때 IP 주소가 아닌 www.naver.com을 입력한다.

www.naver.com 같은 것을 도메인 이름이라고 한다. 

하지만 주소창에 입력된 도메인 이름을 그대로 웹 서버에 보내면 웹 서버는 알아먹지 못한다.

이걸 IP 주소로 변환해주는 네트워크 서버를 DNS(Domain Name System)라고 한다. 

 

크롬 브라우저에 chrome://network-errors/ 를 입력하면 각 에러 코드 목록과 원인을 볼 수 있다.

 

Ajax(Asynchronous JavaScript And XMLHttpRequest)를 이용하면 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다.

SPA 구현에 유용함. 

장점: html을 완성하여 보내지 않아도 페이지 만들 수 있음. 표준화, 유저 중심, 대역폭 작음

단점: 검색 엔진 최적화(SEO)에 불리, 뒤로가기 버튼 동작이 생각대로 되지 않음 -> History API를 사용해야 함.

 

SSR(Server Side Rendering)

서버에서 웹페이지를 브라우저(클라이언트)로 보내기 전에 렌더링을 다 마친 상태로 보낸다.

브라우저가 다른 경로로 이동할 때마다 서버는 같은 작업을 다시 수행하기에 전체적인 화면이 바뀐다. 

 

CSR(Client Side Rendering)

클라이언트 측에서 페이지를 렌더링한다. 

브라우저가 다른 경로로 이동하면 서버에 웹 페이지를 다시 보내지 않고 브라우저에서 페이지가 다시 렌더링된다.

 

검색엔진에 노출되는 것이 중요하다면 검색 엔진 최적화가 잘 되는 SSR을, 유저와 상호작용이 많고 검색엔진 노출이 우선순위가 아니라면 CSR을 채택하는 것이 적합하다. 

 

🔍 공부가 더 필요한 부분

how the internet works 글 읽어보고 흐름 이해하기

인터넷의 작동 방식 혼자 말로 설명해보기

OSI 7 layers