사전학습 1주차 - 웹 사이트 구성 원리 / Bootstrap / CDN

- 웹 사이트의 구성 원리

웹 사이트의 구성 원리

사용자가 브라우저에 주소 입력 -> 브라우저가 서버에 웹 페이지 요청

-> 서버로부터 전달받은 코드를 브라우저가 해석함 -> 웹 사이트를 보여줌

 

 

- Bootstrap

웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크

다양한 디자인을 제공함 (layout, content, form, component 등)

1) 기본 Bootstrap 불러오기

시작하기 -> 빠른 시작 -> CSS, JS 번들 copy 해서 head에 삽입

 

2) Bootstrap 사용자 변경

다운로드 -> 컴파일된 파일 다운로드 -> vscode 탐색기에 변경하고자 하는 파일 복사 -> 원하는 부분 변경

Ctrl + F로 검색창 활성화 -> 1번 변경할 값 | 2번: 대체할 값 -> 치환 or 전체 치환 선택

 

https://getbootstrap.kr/

Bootstrap

 

- CDN (Content Delivery Network)

• WHAT

지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술

• HOW

각 지역에 캐시 서버(PoP)를 분산 배치해, 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달하여 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩 시간을 최소화 함

PoP(Points of presence) -  네트워크 상호간 또는 개별 네트워크에 대한 연결 지점

• WHY

웹 사이트에서 OTT 서비스 이용, 고화질 이미지, 온라인 게임, 대용량 파일 전송 등 안정적인 서비스를 제공하기 위해 활용

IF 콘텐츠 로딩 시간이 길어지면? => 영상 버퍼링, 이미지 화질 깨짐, 게임 핑차이 등의 문제 발생

BUT 특정 국가나 지역 대상으로 웹 서비스 운영시 CDN 사용 필요 X => 불필요한 연결 지점 생겨 성능 저하

 

 

 

Ref)

https://library.gabia.com/contents/infrahosting/8985/

http://www.ktword.co.kr/test/view/view.php?m_temp1=1759