브라우저의 작동 원리(1. 보이지 않는 곳)URL, URI, IP, PORT, DNS, chrome 브라우저 에러

<목차>

• 브라우저의 작동 원리를 이해할 수 있다.
  • 1.  보이지 않는 곳의 통신을 이해할 수 있다.
    • 1-1 URL과 URI의 차이를 이해할 수 있다.
    • 1-2 IP 주소와 PORT에 대해 이해할 수 있다.
    • 1-3 DNS와 IP 주소의 관계를 설명할 수 있다.
    • 1-4 크롬 브라우저의 에러 메시지를 통해 문제를 파악할 수 있다.
  • 2. 보이는 곳의 통신을 이해할 수 있다.
    • 2-1 AJAX의 개념을 이해할 수 있다.
    • 2-2 SSR과 CSR의 차이를 이해할 수 있다.
    • 2-3 CORS의 개념을 이해할 수 있다.

 

---

 

 

👊 1-1 URL과 URI

---

브라우저의 주소창에 입력한 URL은 서버가 제공되는 환경에 존재하는 파일의 위치를 나타낸다.

위의 URL을 크롬 브라우저에 입력하면, 브라우저로 내 PC의 폴더와 파일을 탐색할 수 있다고 한다. 와...너무 신기하다....와...🙀

 

아무튼 위 URL을 크롬 브라우저에 입력하면, 크롬 브라우저를 파일 탐색기로 쓸 수 있다. 입력한 URL은 

URL, URI구성, 출처 : 코드스테이츠

🎟  URL (Uniform Resource Locator) and URI (Uniform Resource Identifier)

- URL

정의 : 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냄.  특정 리소스가 정확히 어디에 있고 어떻게 접근할 수 있는지 알려준다.

scheme	hosts	url-path	query
file://	127.0.0.1	Users/parksoyoung/Desktop
http://	www.google.com:80	/search	?q=JavaScript
http://	habit1014.tistory.com	/manage/newpost/	?type=post&returnURL=%2Fmanage%2Fposts%2F

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

✍🏻 hosts : 웹 서버의 이름 or 도메인, IP를 사용해 주소를 나타낸다.

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

 

-URI

정의 : URL의 기본요소인 scheme, hosts, url-path를 더해 query, bookmark를 포함한다. 인터넷 주소같은것으로 정보 리소스를 고유하게 식별하고 위치를 지정할 수 있다. URI에는 두 가지 형태가 있는데 이것이 URL, URN이다.

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

 

한눈에 URL, URI 보기 출처: 코드스테이츠

참고로 127.0.0.1은 로컬 PC를 나타낸다.

 

출처:  https://mygumi.tistory.com/139  [마이구미의 HelloWorld]

 

 

 

👊1-2  IP와 포트

---

🎟 IP : 인터넷 상에서 사용하는 주소 체계 IP(Internet Protocol address, IP주소)라고 한다. 인터넷에 연결된 모든 PC는 IP 주소 체계를 따라 네 덩이의 숫자로 구분된다. 이렇게 네 덩어리의 숫자로 구분된 IP 주소체계를 IPv4라고 한다.

(IPv4는 Internet Protocol version 4의 줄임말로, IP 주소체계의 네 번째 버전을 뜻한다. 아래 예시를 꼭 보자)

🎟 PORT : 네트워크 상에서 특정 PC를 나타내는 IP 주소와 그 주소에 진입할 수 있는 정해진 통로를 PORT(포트)라고 한다.(아래 예시 꼭보자)

 

 

IP 예시)

터미널에서 간단한 명령어와 함께 구글 IPv4 주소를 확인할 수 있다. 

IPv4는 각 덩어리마다 0부터 255까지 나타낼 수 있다. 이 시스템에 따르면 약 43억개의 IP 주소를 표현할 수 있다. 

다음과 같은 IP 주소는 꼭 기억하자

 

✍🏻 localhost  ✍🏻 127.0.0.1  

- 현재 사용 중인 로컬 PC를 지칭한다.

 

 

✍🏻 0.0.0.0 ✍🏻 255.255.255.255

broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소이다. 서버에서 접근 가능 IP 주소를 broadcast address 로 지정하면, 모든 기기에서 서버에 접근할 수 있다.

 

---

참고로 인터넷 보급률이 낮았던 초기에는 IPv4(IP version 4)으로 네트워크에 연결된 PC에 주소를 할당하는 일이 가능했지만, 전세계적으로 인터넷 사용이 보편적여지면서 IPv4로 할당할 수 있는 한계를 넘어서게 되었다. 그래서 이를 해결하기 위해 IPv6(IP version 6) 가 나왔다. IPv6 는 표기법을 달리 책정하여 2^(128)개의 IP 주소를 표현할 수 있게 되었다. 최종적으로 IPv4를 대체하기 위한것이지만, 현재 두 가지 모두 사용중이다.

IPv6 주소 크기는 128비트이다.. IPv6 주소의 우선 표시는 x:x:x:x:x:x:x:x이다. 여기서 x는 16비트 여덟 조각으로 구성된 주소의 16진 값이다. IPv6 주소의 범위는 0000:0000:0000:0000:0000:0000:0000:0000에서 ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff이다.(잘 모르겠으니까 나주엥 다시 정리해서 올리자)

 

PORT 예시)

터미널에서 리액트를 실행하면 로컬 PC의 IP 주소인 127.0.01 뒤에 :3000과 같은 숫자가 붙는데 이 숫자는 IP 주소가 가리키는 PC에 접속할 수 있는 통로(채널)을 의미한다.  리액트를 실행했을 때에는 로컬 PC의 IP 주소로 접근하여, 3000번의 통로를 통해 실행 중인 리액트를 확인할 수 있다. 이미 사용중인 포트는 중복 사용이 불가하다. 

 

포트 번호는 0-65,535까지 사용 가능하다. 그 중에 0-1024번까지의 포트 번호는 규약에 따라 이미 정해져 있다. 

• 22 : SSH
• 80 : HTTP
• 443: HTTPS
• 더 많은 포트 번호 확인하기

 

 

 

👊 1-3 도메인과 DNS

---

🎟 Domain name : 웹 브라우저를 통해 특정 사이트에 진입을 할때, IP 주소를 대신하여 사용하는 주소. 사람이 식별하기 쉬운 문자 형태

🎟 DNS : Domain Name System의 줄임말로, 도메인과 IP주소 사이에 변환 기능을 해주는것( 호스트의 도메인 이름을 IP주소로 변환하거나 반대의 경우 수행할 수 있도록 개발된 데이터베이스 시스템이다.)

 

Domain name 예시)

IP는 도로명 주소(서울시 중구 세종대로 110) / 도메인는 서울시청과 같은 상호명 (택시탔을때 기사님한테 도로명주소를 알려주어도 되지만 서울시청가주세요 해도 잘 도착한다)

 

터미널에서 도메인 이름을 통해 IP 주소를 확인하는 명령어 nslookup으로 google.com의 IP 주소를 확인할 수 있다.

 

DNS 예시)

네트워크 상에 존재하는 모든 PC에는 IP 주소가 있지만, 모든 IP 주소가 도메인 이름을 가지고 있는것은 아니다. 

로컬 PC를 나타내는 127.0.0.1은 localhost라는 도메인으로 사용가능하지만, 그 외의 모든 도메인 이름은 일정 기간 동안 대여하여 사용한다.

도메인 이름과 IP 주소는 어떻게 매칭이 되는것일까?

브라우저의 검색창에 도메인 이름을 입력하여 해당 사이트로 이동하기 위해서는, 해당 도메인 이름과 매칭된 IP 주소를 확인하는 작업이 반드시 필요하다. 네트워크에는 이것을 위한 서버가 별도로 있다.

출처: 코드스테이츠

만약 브라우저의 검색창에 google.com을 입력한다면, 이 요청은 DNS에서 IP 주소(142.250.196.142)를 찾는다. 그리고 이 IP 주소에 해당하는 웹 서버로 요청을 전달하여 클라이언트와 서버가 통신할 수 있도록 한다.

 

 

👊 1-4 크롬 브라우저 에러 읽기

---

 

출처: 코드스테이츠

전체 에러 메시지 목록은 크롬 브라우저의 검색창에 chrome://network-errors/를 입력하여 확인할 수 있다.