이는 프로젝트를 하다 해당 강의를 들으며 작성한 글입니다. 학습 과정에서 작성되었기 때문에 잘못된 내용이 있을 수 있으며 강의 내용이 정말 좋기 때문에 꼭 들어보실 것을 추천드립니다.
1. IP주소 찾아오기
우선 도메인 이름이 www.naver.com에 속해있는 IP주소를 알아야 합니다. 따라서 DNS 서버에 질의를 해야 하는데요, DNS는 분산형 DB로(DDNS) 여기서 IP주소를 찾아옵니다. 그런데 그 전에 host 파일을 먼저 찾아보는데요, 여기는 웹 통신에 대한 결과(DNS 결과)를 캐싱하며 만약 이전에 통신했던 기록이 있다면 DNS에 질의를 하지 않습니다. 물론 이는 DS의 설정에 따라 다른데 DC에 따라 공유기에 DNS 포워딩을 해서 전달할 수도 있습니다. 여튼 DNS나 host 파일을 통해 IP주소를 획득하게 됩니다. ** 혹은 ISP에서 설정한 설정을 따릅니다.
2. TCP 연결
이후 TCP 연결을 하게 되는데, 연결이 성공하면 HttpRequest가 가게 되며 이후 Response가 오게 됩니다. 이 과정에서 추가로 학습할 수 있는 것들이 존재하는데, 바로 GSLB와 CDN입니다. 둘에 대해 간략하게 알아보겠습니다.
| CDN | 사용자에게 웹 콘텐츠를 효율적으로 제공할 수 있는 서버의 분산 네트워크 |
| GSLB | 전통적인 DNS와 같이 동작하며 추가적으로 health check와 active/backup을 지정 가능하게 하여 재해 복구(DR), 지역적인 부하분산, 응답시간 중심의 서비스를 제공 가능 하게 할 수 있습니다. |
큰 회사들은 이미 CDN과 GSLB를 이용하고 있는데, 때문에 nslookup을 입력하게 되면 아래와 같은 주소가 나옵니다. 해당 아이피는 고정 아이피가 아닌 변할 수 있는 아이피인데 이를통해 정적 콘텐츠는 캐싱하고 최적의 아이피를 제공해 우리가 효율적이고 안정적인 서비스를 이용할 수 있게 해줍니다.
이 원리는 대략적으로 아래와 같은데, CDN은 우리가 PC에 접속을 하면 우선 접속자 IP를 보고 위치를 파악합니다. 이후 헬스체크를 통해 안전한/최적의 IP주소를 찾아 우리에게 알려(GSLB) 줍니다. **GSLB를 구현할때는 DNS로 특정 시스템을 만들어 사용합니다.
GSLB를 구현할때는 DNS로 특정 시스템을 만들어 사용하는데 이를통해 만약 한 서버가 다운되더라도 나머지 살아있는 서버 중 정상적인, 가장 효율적인 서버를 찾아 우리에게 연결해줄 수 있습니다.
한 가지 더 고려해볼 수 있는 점이 있는데 만약 지진이 나서 다른 서버로 돌아가면 어떤 문제가 발생할까요? 또 로그인을 한 상태로 다른 서버로 하게되면 어떻게 될까요? 과연 세션이 유지될까요? ** 이에대한 답은 스스로 고민해보실 것을 추천드립니다.
3. 프론트엔드 개발자용
최근에는 브라우저를 Middle웨어라고까지 부를 수 있을만큼 진화하게 되었습니다. 브라우저에서 www.naver.com을 입력하게 되면 웹 서버에서 리소스를 가져옵니다. 리소스란 html / css / js / imgs 등을 말하는데요, 이 과정에 대해 간략하게 살펴보겠습니다. ** 여담으로공인인증서는 로컬 스토리지에 저장되게 됩니다.
해당 URL을 검색하면 프론트 입장에서 아래와 같은 구조를 거치게 되는데요, 우선 사용자 인터페이스(UI)를 지나 브라우저 엔진을 만나고, 이후 렌더링 엔진을 거쳐 우리가 원하는 화면을 보게 되는 것입니다. 이 과정에서 자료 저장소(XML 파서)를 뒤지는데, 이는 문서 저장부라고 보시면 됩니다. UI는 항상 자료구조에 의존적인데, 이를 DOM트리라고도 합니다. 즉, 가장 먼저 DOM트리를 통해 HTML을 가져와서 렌더링 트리가 만들어지면 이를 통해 화면을 만들고 이후 자바스크립트로 동적인 것들을 구현하게 되는 것입니다.
XML 파서
다시 정리해보면 가장 먼저 html을 가져옵니다. 그 다음으로 구문을 분석해서 DOM-TREE를 만드는데, 이것만으로는 렌더링을할 수 없습니다. 따라서 이후 이 경우 CSS(Style Sheet)가 넘어오고 이를 파싱해서 (언래는 HTML에 하나에 넣을수있지만 ㅏ눠놓음) 자바스크립트 엔진이 개입하게 됩니다. 즉 기본적인 HTML로 렌더링은 되지만 JS를 통해 스크립트를 파싱해서 syntax tree를 만들고 문서나스타일 시트의 내용을 변경합니다. 이를 합성해서 렌더 트리가 완성되는데, 트리는 비선형 자료구조입니다.
TCP는 이후 끝나게 되는데.
3. 추가 키워드 및 질문
웹 브라우저에 URL을 입력하면 어떤 일이 발생할까?
1. URL과 URI의 차이는? 하나는 식별자/하나는 위치 지정자
2. HTML CSS로 도 되는데 사진이 날아오고 자바스크립트가 날아와서 동적렌더링이 가능해진다.
웹 개발을 하다보면 프레임워크를 사용하는데
DNS 스쿠핑은 어떻게 해결할 수 있을까요? GSLB, CDN을 말한다.
# 도커 # 쿠버네티스 # 무중단 배포 # 데브옵스 # 장애대응
# 유저모드 # 하드모드 # 커널모드 #소켓
'✨기타 > 학습 정리' 카테고리의 다른 글
| [널널한 개발자] 유해사이트 차단원리 (0) | 2022.08.30 |
|---|---|
| Jacoco (0) | 2022.08.25 |
| 쿠키와 세션 (0) | 2022.03.09 |
댓글