Static / Dynamic Web Pages

정적 웹사이트: HTML 파일(코드) 자체로 배포되는 사이트 (CSR: Client Side Rendering)

동적 웹사이트: 서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR: Server Side Rendering)

AJAX 이전에는 요청에 따라 결과가 변하는 동적인 웹페이지를 만드려면 서버가 매번 동적으로 생성하는 수 밖에 없었다.
동적 웹사이트를 받아오기 위해서는 서버가 HTML의 형태로 브라우저에 제공해주어야만 했기 때문에 헤더나 푸터 등의 페이지 구성요소의 중복 요청/응답이 빈번해서 네트워크 상에서 주고받는 패킷의 크기가 다소 컸다.

이처럼 AJAX 이전에는 서버에서 웹페이지를 만드는 기술이 보편화되었고 이러한 동적 웹사이트를 만드는 기술로는 PHP, JSP, ASP 등이 널리 사용됨

점차 브라우저의 발달과 AJAX 기술이 보편화되면서 모든 동적인 정보들을 서버가 부담할 필요는 없게 되었고 필요한 부분만 클라이언트가 요청할 수 있게 되었으며 이로 인해 서버의 부하가 다소 줄어들게 되었다.
=> 서버는 JSON과 같은 순수한 데이터 포맷만 제공해주는 형태로 흐름이 바뀌기 시작했으며 클라이언트 사이드인 웹페이지는 자바스크립트와 AJAX 기술을 이용한 보다 고도화된 웹 앱 즉 SPA(Single Page Application)으로 변모하기 시작
=> 자바스크립트가 동적인 렌더링을 지원하나 결국 서버가 웹페이지를 렌더링하지 않으며 HTML/CSS/JS 파일의 소스 코드 그대로 작동하는 특징을 갖고 있기 때문에 이는 정적 웹사이트다.

클라이언트 사이드가 고도화된것이 사실이지만 앞서 SSR의 장점을 살리기 위해서 다양한 방법으로 동적 웹사이트가 만들어지기도 한다.
성능의 향상을 극대화하기 위해 CCR, SSR의 하이브리드 형태로 구성하는 경우도 많다.

	정적 웹사이트	동적 웹사이트
HTML 결과물	고정되어 있음	서버가 만들어줌
HTML내 변경	서버와 AJAX로 연결해서 콘텐츠를 바꿈	서버가 응답 주는대로 표현

Build

현대의 웹 앱은 정적 웹페이지와 AJAX 기술을 함께 사용하며 SPA(Single Page Application)으로 변모함에 따라 클라이언트 사이드의 규모가 커지게 되었다.
이 때 웹사이트 구성요소를 각 파일로 분리하는 모듈화가 이뤄지게 되며 React와 같은 클라이언트 기술이 발전하면서 단일 파일로 자바스크립트나 페이지를 만드는 작업은 보다 고도화되기 시작함

고도화된 클라이언트 웹 앱은 수많은 모듈로 이뤄져 있다. 이처럼 수많은 모듈을 하나로 묶어주는 작업을 번들링(bundling)이라고 하며 이 과정에서 JSX 파일과 같이 브라우저에서 자체적으로 해석이 불가능한 다양한 보조 기술들을 브라우저가 해석할 수 있도록 만들어주는 작업들이 수반되었다. 이러한 과정을 통칭해 "소프트웨어 빌드"라고 부른다. 소프트웨어 빌드는 소스코드를 실행 가능한 결과물로 변환하는 작업을 의미함

다양한 모듈은 정적 파일들로 결과가 만들어져야만 하며 따라서 이러한 빌드 과정은 배포에 필수적이다.
예를 들어 React 프로젝트를 내 로컬 컴퓨터에서 자체적으로 실행하기 위해서는 npm start로 개발 서버를 실행해줘야 하지만 인터넷 상에 배포하기 위해서는 이러한 개발 서버를 실행할 필요가 없으며 정적 파일을 호스팅하는 서비스에 결과물만 업로드하면 된다.

Create React App 등으로 생성한 React 프로젝트의 경우에는 npm build 명령어가 package.json 파일에 포함되어 있으며 이는 모듈을 정적인 파일로 만들어주게 된다.

주요 빌드 툴

React 프로젝트 생성 툴
Create React App으로 만든 프로젝트의 경우 react-scripts라는 모듈이 사용되고 있으며 Next.js의 경우 next 모듈이 사용됨

빌드 툴 구성

• webpack: 모듈 번들러

• Babel: TypeScript, JSX 등과 같이 브라우저가 지원하지 않는 언어를 JS로 바꿔주는 컴파일러

• ESLint: JS Code convention 및 문법 검사기

• Sass, less: CSS Preprocessor (전처리기/변환기)

Deployment

로컬 환경에서 개발한 코드를 실제 서비스로 만들기 위해서는 빌드 과정과 이를 웹에 노출시키는 배포 과정이 필요
빌드를 통해 만든 정적 파일이 웹을 통해 제공(serve)되려면 이러한 정적 파일을 제공하는 웹 서버가 필요

정적 파일을 제공할 수 있도록 서버의 공간을 대여해주는 서비스를 호스팅 서비스
호스팅 서비스는 단순 파일을 웹에서 접근 가능하게 만들어주며 동적 웹사이트나 (express 등을 사용한) API 서버를 제공하려면 별도의 클라우드 컴퓨팅 서비스가 필요

다양한 웹 호스팅 서비스

개발자들이 선호하고 비교적 낮은 가격에 사용할 수 있는 다양한 웹 호스팅 서비스들

• Amazon Web Service (AWS) S3

• Google Cloud Storage

• Vercel

• GitHub Pages

• Netlify

• Heroku

AWS의 경우 Infrastructure 자체를 제공하는 다소 복잡한 서비스들의 집합

코드 연결과 빌드, 배포까지의 과정을 매우 단순하게 만들어주는 Vercel
Vercel의 특징 중 하나는 GitHub와 같은 코드베이스(저장소)를 연결하여 즉시 빌드를 실행하고 배포까지 원클릭으로 할 수 있다는 점이 특징