빌드
정적, 동적 웹사이트
CSR - 정적 웹사이트 (클라이언트가 html 렌더링)
SSR - 동적 웹사이트 (서버가 html 렌더링)
AJAX 이전에는 동적 웹사이트가 많았으나 이후로는 정적 웹사이트가 많아졌다.
퍼포먼스를 위해 정적 동적 방법을 섞기도 한다. (서버 컴퓨터가 성능이 좋기 때문에)
빌드
현대의 웹 앱은 정적 웹페이지와 AJAX 기술을 함께 사용하며, SPA 로 변함에 따라 클라이언트 사이드의 규모가 커지게 되었다. React 와 같은 클라이언트 기술이 발전하면서, 단일 파일로 자바스크립트나 페이지를 만드는 작업은 보다 고도화되기 시작했다.
고도화된 클라이언트 웹 앱은 수많은 모듈로 이뤄져 있다. 많은 모듈을 하나로 묶어주는 작업을 bundling 이라고 하며, 이 과정에서 JSX를 파일처럼 브라우저가 해석하지 못하는 기술을 JavaScript 로 변환해 주는 작업 등이 있다. Software build 는 이런식으로 소스코드를 실행 가능한 결과물로 변환, 웹 어플리케이션의 경우 정적 파일(html, css, js)로 변환하는 작업이다.
Create React App 을 생성한 React 프로젝트는 npm build 명령어가 package.json 파일에 포함되어 있다.
React 프로젝트 생성 툴
- Create React App (react-scripts 모듈 사용)
- Next.js (next 모듈 사용)
빌드 툴
프로젝트 생성 툴은 다양한 툴의 조합으로 이루어져 있다.
- webpack: module bundler
- babel: TS, JSX -> JS 변환 compiler
- ESLint: JS code convention & syntax check
- Sass, less: CSS Preprocessor
배포
로컬 환경에서 개발한 코드를 실제 서비스로 만들기 위해서는 build 와 deployment 가 필요하다. build 한 static file들을 웹을 통해 serve 하려면 파일을 제공하는 웹 서버가 필요하다.
정적 파일을 제공할 수 있도록 서버의 공간을 대여해주는 서비스를 hosting service 라고 한다.
동적 웹사이트나 API 서버 제공을 위한 서버를 제공하려면 클라우드 컴퓨팅 서비스가 필요하다.
Web hosting services
- AWS S3
- Google Cloud Storage
- Vercel
- Github Pages
- Netlify
- Heroku
