Network - DNS 이해하기 + 기본 동작원리

 

 

요즘 가장 큰 고민은

브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 

며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다.

한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다.

 

다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 

 

1. DNS 이해하기

Network - DNS 이해하기 + 기본 동작원리

 

2. 브라우저 렌더링 이해하기

Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom)

 

3. 가상돔(Virtual DOM) 이해하기

React- 가상돔(Virtual DOM) 이해하기

 

4. useState 동작원리 이해하기

React - useState 동작원리 이해하기

 

---

DNS 이해하기

DNS 는 Domain Name System 의 약자이다.

 

우리가 접속하려고 하는 웹사이트 URL 을 입력하면,

DNS 서버로 이동하여 해당 URL 이 등록되있는지 확인하고 IP 주소를 받아온다.

 

그림을 보자, 컴퓨터가 중간 서버한테 뭘 물어보면 그 서버가 다른 서버들한테 1 : 1 로 뭘 하고 있다.

요 정도만 이해한다면 일단 반은 이해한 거라고 생각한다.

중간에 어떤 애가 한명씩 전담마크하면서 뭘 하고 있다.

 

DNS 기본동작

 

그럼 어떻게 IP 주소를 받아오는지 기본동작을 알아보자

네이버 웹 사이트로 이동하기 위해, 주소창에 URL (www.naver.com) 을 입력한다.

 

1. 로컬 DNS 서버에 IP주소가 있는지 확인한다. (해당 URL 이 등록되어 있으면 IP 주소를 알려준다)

 

2. 로컬 DNS 서버에 IP주소가 없으면,

    로컬 DNS 서버는 → 루트 DNS 서버 에게 IP주소가 있는지 확인한다.

    (루트 DNS 서버는 최상위 도메인 (.com) 을 관리하는 DNS 서버에 문의할수있게 com DNS 서버의 IP주소 를 알려준다)

 

3. 로컬 DNS 서버는 → com DNS 서버 에게 IP주소가 있는지 확인한다.

    (com DNS 서버에는 해당 URL (naver.com) 을 관리하는 DNS 서버에게 문의할수있게 naver.com DNS 서버의 IP주소를 알려준다)

 

4. 로컬 DNS 서버는 → naver.com DNS 서버 에게 IP주소가 있는지 확인한다. 

   (naver.com 도메인을 관리하는 DNS 서버 에는 해당 URL (naver.com) 에 대한 로컬 DNS 서버에게 정확한 IP 주소를 알려준다)

 

5. 로컬 DNS 서버는 → client 에 IP 주소를 캐싱한 후, 전달해준다. 

   (캐싱하기 때문에 최초 접속 한번만 이 과정을 진행하게 된다)

 

** 로컬 DNS 서버가 여러 DNS 서버 들에게 차례대로 물어보며 답을 찾는 과정을 Recursive Query라고 부른다.

(내가 이해한 DNS 서버는 한마디로 원하는 것 (IP주소) 을 얻어낼 때까지 이집저집 문 두들기며 있는지 물어보는 느낌이었다.)

 

 

그렇다면 이렇게 돌고돌아 전달받은 귀중한 IP 주소를 전달받은 client 에서는 과연 어떤식으로 우리에게 사이트를 보여주는 걸까

다음 포스팅에서는 브라우저의 렌더과정에 대해서 알아보도록 하자

 

 

 

참고 자료

하단 블로그 참고

 

• http://www.naver.com/index.html : 이런 형식을 URL이라고 부른다.
• www.naver.com : 이런 형식을 Host Name이라고 부른다.
• .com : 이것은 Top-level Domain Name이라고 부른다.
• .naver.com : 이것은 Second-level Domain Name이라고 부른다.

 

 

 

 

ref:

https://it-mesung.tistory.com/180#:~:text=DNS%EC%9D%98%20%EA%B3%BC%EC%A0%95%EC%9D%84%20%EA%B0%84%EB%9E%B5%ED%9E%88,%ED%95%98%EC%97%AC%20%EC%A0%91%EA%B7%BC%ED%95%98%EA%B2%8C%20%EB%90%98%EB%8A%94%20%EA%B2%83%EC%9D%B4%EB%8B%A4.