S2) Unit 7. [HTTP/네트워크] 브라우저의 작동 원리(보이지 않는 곳)

📣  Client Server Architecture (2-tier Architecture)

✔️ Client Server Architecture(2-tier Architecture) : 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것

✔️ 클라이언트 : 리소스를 사용하는 앱

✔️ 서버 : 리소스를 제공하는 곳

✔️ 클라이언트 <-> 서버 : 요청과 응답을 주고받는 관계

✔️ 데이터베이스 : 리소스를 저장하는 별도의 공간

✔️ 3-tier Architecture : 2-tier Architecture + 데이터베이스

 

📣  클라이언트와 서버의 통신

✔️ 요청과 응답으로 구성되며, 요청이 있어야 응답이 온다.

✔️ 프로토콜(통신규약) : 클라이언트와 서버가 통신하는 방식

✔️ API(Application Programming Interface) : 서버가 클라이언트에게 리소스를 잘 활용할 수 있도록 제공하는 인터페이스

✔️ 서버는 리소스 전달을 위한 메뉴판, API 문서를 작성해야 클라이언트가 이를 활용할 수 있다.

✔️ 보통 인터넷에 있는 데이터를 요청할 때에는 HTTP 프로토콜을 사용하며, 주소(URL, URI)를 통해 접근할 수 있다.

✔️ HTTP 요청에는 메서드라는 것이 존재하며, CRUD각각 메서드가 존재한다.

Read	GET
Create	POST
Update	PUT or PATCH
Delete	DELETE

---

📣  URL과 URI (URL ⊂ URI)

✔️ URL (Uniform Resource Locator) : 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다.

➰ scheme, hosts, url-path로 구분할 수 있다.

➰ scheme : 통신 방식(프로토콜)을 결정한다. -> 일반적인 웹 브라우저에서는 http(s)를 사용한다.

➰ hosts : 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타낸다.

➰ url-path : 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타낸다.

:sheme  :hosts:           :url-path:  :query:
httl:// www.google.com:80 /search     ?q=JavaScript

 

✔️ URI (Uniform Resource Identifier) : URL의 기본 요소 3가지에 query, fragment를 포함한다.

➰ query : 웹 서버에 보내는 추가적인 질문이다.

➰ fragment : 일종의 북마크 기능을 수행하며, URL에 fragment(#)와 특정 HTML 요소의 id를 전당하면 해당 요소가 있는 곳으로 스크롤을 이동할 수 있다.

➰ 브라우저의 검색창을 클릭하면 나타나는 주소가 URI이다.

➰ 127.0.0.1 : 로컬 PC

➰ port : 서버로 진입할 수 있는 통로

---

📣  IP와 포트

✔️ IP 주소(Internet Protocol 주소) : 네트워크에 연결된 특정 PC의 주소를 나타내는 체계

➰ IPv4 : 인터넷에 연결된 모든 PC는 IP 주소체계를 따라 네 덩이의 숫자로 구분된다.

➰ IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있다.

➰ localhost or 127.0.0.1 : 현재 사용 중인 로컬 PC를 지칭한다.

➰ 0.0.0.0 or 255.255.255.255 : broadcast address로, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소이다.

-> 서버에서 접근 가능 IP주소를 broadcast address로 지정하면, 모든 기기에서 서버에 접근할 수 있다.

➰ 개인 PC의 보급으로 IPv4로 할당할 수 있는 PC가 한계를 넘었고, 이를 위해 IPv6가 나왔다.

 

✔️ Port(포트) : IP주소에 진입할 수 있는 정해진 통로

➰ 이미 사용 중인 포트는 중복해서 사용할 수 없다.

➰ 0부터 65535까지 사용할 수 있다.

➰ 0부터 1024번 까지의 포트 번호는 주요 통신을 위한 규약에 따라 이미 정해져 있다.

➰ 22: SSH / 80: HTTP / 443: HTTPS

➰ 이미 정해진 포트 번호라도 필요에 따라 자유롭게 사용할 수 있다.

➰ 잘 알려진 포트 번호는 URI에 생략할 수 있지만, 그 외의 경우(3000과 같은 임시 포트)는 반드시 포트 번호를 포함해야 한다.

---

📣  도메인과 DNS

✔️ Domain name : IP 주소를 대신하여 사용하는 주소

➰ IP주소는 3.34.153.168

➰ 도메인 이름은 codestates.com

➰ 주소창에 IP주소를 입력하면 codestates.com으로 이동할 수 있다.

 

✔️ DNS(Domain Name System) : 도메인 이름과 매칭된 IP 주소를 확인하는 작업을 위한 서버

➰ 호스트의 도메인 이름을 IP 주소로 변환하거나, 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템

➰ 만약 브라우저에 naver.com을 검색 -> DNS에서 IP주소를 찾고 이 IP주소에 해당하는 웹 서버로 요청을 전달 -> 클라이언트와 서버가 통신 가능

---

📣  크롬 브라우저 에러 읽기

✔️ Aw. Snap! (앗, 이런!)

➰ 웹페이지 대신 위와 같은 에러 페이지 또는 다른 에러 메시지가 표시된다면, 크롬 브라우저가 웹 페이지를 로드하는 데에 문제가 발생한 경우

➰ 크롬에서 chrome://network-errors/ 를 입력하면 에러 메시지 목록을 확인할 수 있다.

➰ 에러 메시지를 만나면 여러 문제가 발생할 수 있다.

    ➰ 웹페이지에 연결할 수 없다

    ➰ 웹페이지가 열리지 않는다.

    ➰ HTTPS가 적용된 웹페이지가 열리지 않는다.

    ➰ 사진이 로드되지 않는다.

    ➰ 새 탭이 로드되지 않는다.