JavaScript - 웹과 통신

fetch

fetch('https://www.google.com')
	.then((response) => response.text())
	.then((result) => { console.log(result); });

• 위의 명령어를 입력했을 때 나온 결과를 브라우저가 해석해서 우리에게 예쁜 화면을 보여준다.
• 명령어를 입력한 것 : request = 요청
• 결과를 받은 것 : response = 응답
• fetch메서드는 서버에 request를 보내고, response를 받는 함수이다.
• 서버에 request를 보내고 response를 받는 방법을 여러가지가 있지만 보편적으로 fetch를 많이 사용한다.
• fetch는 '보내다' 라는 의미를 가진다.

위코드를 한줄씩 해석하면 아래와 같다.

fetch('https://www.google.com')

• 서버에 request를 보낸다.

.then((response) => response.text())

• 서버에서 response가 오면 이 부분이 실행되는데, response가 파라미터로 들어온다.
• request를 보낼 때 같이 실행되는 것이 아니라, 서버에서 response가 와야 실행된다.
• '.then'이라는 것은 콜백을 등록하는 메서드이다.
• then메서드는 fetch함수가 리턴하는 객체(Promise객체)의 메서드이다.
• Promise객체의 then메서드로 콜백을 등록하면 서버에서 response가 왔을 때 그 콜백이 실행된다.
• response로 받는 것은 객체이다. 이 내용을 확인하기 위해 response.text()를 하고있다.

.then((result) => { console.log(result); });

• 이 then메서드는, 앞선 then메서드가 실행된 이후에 실행된다.
• 파라미터로 받고있는 'result'변수는, 앞선 then메서드가 return한 값이다.
• 그러니까 response.text() === result 이다.

 

fetch('https://www.google.com')
	.then((response) => console.log(response.text()));

• 위와같이 response를 받고 추가적인 then없이 바로 로그를 찍을 경우, text()메서드가 아직 끝나지 않았기 때문에 Promise객체를 로그에 찍어준다. text()메서드도 비동기로 동작하기 때문이다.

---

웹

• world wide web
• 전세계적인 연결망을 의미한다.
• 우리가 웹브라우저를 통해 돌아다니는 가상의 연결망 세계이다.
• 웹페이지의 텍스트들을 'Hyper Text'라고 부른다.
• Hyper Text는 '다른 텍스트에 대한 참조를 갖고있는 텍스트' 라는 의미이다.
• HTML 은 'Hyper Text Markup Language' 의 줄임말로, Hyper Text를 Markup하는 언어임을 나타낸다.
• 과거의 웹은 텍스트만을 볼 수 있었기에 이러한 단어들이 탄생했으나, 현재는 이미지나 동영상 등 다양한 매체를 다룰 수 있게 되었으니 의미상으로는 조금 안맞는 것 같다.

---

URL

• Uniform Resource Locator
• 우리말로 굳이 풀이하면 '규격화된 리소스 검색자' 라고 해석해볼 수 있다.
• 웹에 존재하는 특정 데이터를 나타내는 문자열이다.

 

url에서는 data를 path로 나타낸다.

https://www.shoping.com/men/shirts?color=blue

위와같은 url이 있을 때, 아래와같이 구분된다

https://www.shoping.com : Host

men/shirts : path
- path를 잘 설계하는 것이 개발자들의 역할이다.

?color=blue : query
- 쿼리는 데이터에 관한 세부적인 요구사항을 의미한다.

이 외에도 다른 구성요소들이 있지만 일반적으로는 호스트 + 경로 + 쿼리로 이루어져있다고 할 수 있겠다.

---

Domain Name Resolution

domain name

• domain name : 'google.com', 'naver.com' 같은 것을 의미한다.
• 우리말로는 '영역, 범위' 라는 의미.
• 'domain name system'이라고 하는 체계를 바탕으로 생성된 문자열 이름.
• 인터넷 세계에 존재하는 수많은 영역을 추상적으로 나타내기 위해 사용되는 개념이다.
• 하나의 도메인 네임은 여러개의 도메인으로 구성된다.
• 상위 도메인일수록 도메인 네임중에서 오른쪽에 작성한다.
• 예를들면 도메인 최상단에는 루트도메인이 있는데, 이 루트 도메인은 빈문자열로 나타내는 경우가 많다.
• 'www.google.com'  이라는 domain이 있다면, 루트도메인을 명시적으로 표현하려거든 'www.google.com.'  하고 끝에 '.'을 찍는다.

 

domain name의 구성

1. root domain

 

2. top-level domain(TLD)

• 도메인 네임 끝에서 일반적으로 볼 수 있는 [ .kr, .jp, .net, .gov ] 등이 모두 TLD이다.
• TLD는 사이트가 속한 국가 또는 사이트가 제공하는 서비스의 카테고리를 나타낸다.

 

3. second-level domain

• google, naver와 같이 서비스를 대표하는 이름이다.

 

4. thrid-level domain

• www 를 third-level domain이라 부른다.

 

5. fourth-level domain

• 'test.www.example.kr' 이라는 url의 'test'부분에 해당한다.

 

실제 서비스에서는 보통 third-level domain까지만 사용하는 경우가 많다.

 

 

정리

• 우리가 사용하던 url이 사실은 domain name이고, domain name은 계층적인 구조를 이루고 있다.
• 오른쪽이 가장 상위도메인, 왼쪽이 가장 하위 도메인이며 계층별로 '.'을 사용해 구분한다.

 

domain name resolution

• 우리가 주소줄에 domain name만 입력해도 해당 서버를 찾아가 통신이 가능한 이유는, domian name을 IP주소로 변환해주는 절차가 존재하기 때문이다.
• 이 절차를 해주는 것이 name server이다.
• name server란 도메인 네임을 IP주소로 변환하는 과정에 참여하는 서버들을 말한다.
• 내 컴퓨터에서 맨 처음 어떤 name server에 요청할 것인지는 미리 설정이 되어있고, 기존의 설정에서 다른 name server로 바꾸는 것도 가능하다.
• 내 컴퓨터가 사용하는 name server에 관한 설정은 OS마다 다르다.

1. 내 컴퓨터는 기본적으로 설정된 네임서버에 codeit.kr 의 ip주소를 알려달라는 요청을 보낸다.
2. 내 컴퓨터의 요청을 받은 네임서버는 root name server에게 "'.kr로 끝나는 도메인 네임을 관리하는 네임서버의 주소'를 알려줘" 라는 요청을 보낸다.
3. root name server는 '.kr로 끝나는 도메인 네임을 관리하는 네임서버의 주소'를 네임서버에게 알려준다.
4. 그럼 네임서버는 응답받은 '.kr도메인 관리하는 네임서버'에게 "'codeit.kr의 ip주소 알려줄 수 있는 네임서버의 ip주소'를 알려줘" 라는 요청을 보낸다.
5. .kr도메인관리 네임서버는 네임서버에게 'codeit.kr의 ip를 알려줄 수 있는 네임서버'의 ip주소를 준다.
6. 네임서버는 'codeit.kr의 ip를 알려줄 수 있는 네임서버'에게 "codeit.kr의 ip주소 알려줘" 라고 요청을 보낸다.
7. 'codeit.kr의 ip를 알려줄 수 있는 네임서버'가 네임서버에게 codeit.kr의 ip주소를 알려준다.
8. 네임서버는 내 컴퓨터에게 codeit.kr의 ip주소를 알려주고, 본격적으로 이 ip와 통신을 시작한다.

• 이 과정을 domain name resolution이라고 한다.
• 내 컴퓨터에서 codeit.kr에 접속할 때 마다 이 모든 과정이 발생하는 것은 아니다.
• 한 번 방문하면 해당 사이트의 IP주소를 내 컴퓨터가 저장해놓기 때문이다.
• 내 컴퓨터는 자주 요청받는 도메인 네임, 가장 근처의 네임서버 를 캐시로 관리하는 경우가 많다.
• 캐시로 관리되는 domain은 별도로 외부에 요청할 필요가 없다.
• 따라서 1~8의 모든 과정이 일어나는 경우는 일반적으로 처음 접속하는 도메인 주소인 경우 뿐이다.

---

http / https

• Scheme.
• 스킴에는 프로토콜의 이름이 들어간다.
• http : HyperText Transger Protocol의 줄임말이다.
• https : HyperText Transger Protocol Secure의 줄임말이다.

프로토콜

• 네트워크분야에서 쓰이는 용어.
• 통신을 하는 두 주체가 지켜야하는 통신 규약.
• 웹브라우저와 서버가 통신할 때 지켜야하는 규약이다.
• 이 규약의 이름 중 하나가 https 인 것.
• 클라이언트에서 request를 보낼때도, 서버에서 response를 보낼때도 이 프로토콜을 준수해야한다.