Achievement Goals
- 정적 웹사이트와 동적 웹사이트가 어떻게 다른지 이해할 수 있다
- 빌드가 무엇인지 이해할 수 있다
- 정적 웹사이트 형태로 만들어지는 현대의 웹 앱이 왜 빌드 과정을 필요로 하는지 알 수 있다
- 정적 웹사이트를 배포할 수 있다
- 정적 웹사이트 배포시 발생하는 문제를 이해하고 해결할 수 있다
- Landing Page라 불리는 정적 웹사이트에서 사용하는 다양한 프론트엔드 기술들을 스스로 찾아볼 수 있다
- 정적 웹사이트와 동적 웹사이트가 어떻게 다른지 이해할 수 있다
정적 웹사이트와 동적 웹사이트
- 정적 웹사이트: HTML 파일(코드) 자체로 배포되는 사이트 (CSR, Client Side Rendering)
- 동적 웹사이트: 서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR, Server Side Rendering)
SSR과 CSR의 차이
SSR은 Server Side Rendering의 줄임말.
웹 페이지를 브라우저에서 렌더링하는 대신, 서버에서 렌더링 -> 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송 > 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링
서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 함
CSR은 Client Side Rendering 을 의미.일반적으로 CSR은 SSR의 반대로 여겨짐.
CSR은 클라이언트에서 페이지를 렌더링 -> 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보냄 > 이때 서버는 웹 페이지와 함께 JavaScript 파일을 보냄 > 클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JavaScript 파일은 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 바꿈
- 정적 웹사이트 형태로 만들어지는 현대의 웹 앱이 왜 빌드 과정을 필요로 하는지 알 수 있다
웹사이트 렌더링 방식의 변천
AJAX 이전에는 요청에 따라 결과가 변하는 동적인 웹페이지를 만드려면, 서버가 매번 동적으로 생성하는 수 밖에 없음
동적 웹사이트를 받아오기 위해서는, 서버가 HTML의 형태로 브라우저에 제공해주어야만 했기 때문에, 헤더나 푸터 등의 페이지 구성요소의 중복 요청/응답이 빈번
점차 브라우저의 발달과 AJAX 기술이 보편화되면서, 모든 동적인 정보들을 서버가 부담할 필요X
필요한 부분만 클라이언트가 요청 -> 서버의 부하 감소
이에 따라 서버는 JSON과 같은 순수한 데이터 포맷만 제공해주는 형태로 흐름이 바뀌기 시작
웹페이지는 Single Page Application으로 변모하기 시작
- 빌드가 무엇인지 이해할 수 있다
소프트웨어 빌드는, 소스코드를 실행 가능한 결과물로 변환하는 작업을 의미
- 컴파일: 사람의 언어를 컴퓨터의 언어로 바꿔주는 것
- 빌드: 컴파일된 코드를 실제 실행할 수 있는 상태로 만드는 것
- 배포: 빌드가 완성되면 실행가능한 파일을 사용자가 접근 할 수 있게 배치하는것
1번과 2번의 과정을 묶어 빌드라고 한다.
예를 들어 사과주스를 만들기 위해선
1. 사과를 따야하고
2. 사과를 주스로 제조하고
3. 제조한 사과주스를 대형마트에서 판매하는 것
일반적인 제품을 만드는 과정에서 원재료 상태가 사람의 언어이며
원재료 상태를 제품으로 제작하는 과정이 컴파일, 제품이 컴퓨터의 언어
제품을 판매하기 위해 판매대에 전시하는 것이 배포이다.
종합선물세트 같은 여러개의 제품을 한대 담는것이 번들링
수많은 모듈을 하나로 묶어주는 작업이다.
다양한 모듈은 정적 파일들로 결과가 만들어져야만 하며, 따라서 이러한 빌드 과정은 배포에 필수적
React 프로젝트를 내 로컬 컴퓨터에서 자체적으로 실행하기 위해서는 npm start로 개발 서버를 실행해줘야 하지만, 인터넷 상에 배포하기 위해서는 이러한 개발 서버를 실행할 필요가 없으며, 정적 파일을 호스팅하는 서비스에 결과물만 업로드
참고자료
https://itholic.github.io/qa-compile-build-deploy/
- 정적 웹사이트를 배포할 수 있다
- 정적 웹사이트 배포시 발생하는 문제를 이해하고 해결할 수 있다
- Landing Page라 불리는 정적 웹사이트에서 사용하는 다양한 프론트엔드 기술들을 스스로 찾아볼 수 있다
위 목표의 경우 스프린트에서 vercel을 통해 웹사이트를 배포해 볼 수 있었지만 아직 이해했다고 하기엔 많이 부족한것 같다.
