TIL - 211104 [배포] 클라이언트 빌드와 배포

Achievement Goals

• 정적 웹사이트와 동적 웹사이트가 어떻게 다른지 이해할 수 있다
• 빌드가 무엇인지 이해할 수 있다
• 정적 웹사이트 형태로 만들어지는 현대의 웹 앱이 왜 빌드 과정을 필요로 하는지 알 수 있다
• 정적 웹사이트를 배포할 수 있다
• 정적 웹사이트 배포시 발생하는 문제를 이해하고 해결할 수 있다
• Landing Page라 불리는 정적 웹사이트에서 사용하는 다양한 프론트엔드 기술들을 스스로 찾아볼 수 있다

Chapter 1 - 빌드

(1) SSR과 CSR

The Difference

페이지 렌더링 위치

(2) 정적 웹사이트 vs. 동적 웹사이트

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

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

(3) 빌드

현대 웹앱은 정적 페이지와 AJAX 기술을 함께 사용하며 SPA으로 변모. 클라이언트 사이드의 규모가 커지게 되었음

번들링: 수많은 모듈을 하나로 묶어주는 작업

소프트웨어 빌드: 번들링 과정에서 JSX 파일과 같은 브라우저에서 해석이 불가능한 다양한 보조기술들을 브라우저가 해석할 수 있도록 만들어주는 작업. 수많은 모듈을 하나의 정적 파일로 만들어내는 번들링 과정.

(4) 주요 빌드 툴

React 프로젝트 생성툴 : CRA(react-scripts), Next.js(next)

빌드 툴 : webpack(모듈 번들러), babel: TS, JSX와 같은 브라우저가 지원하는 않는 언어를 JS로 바꾸어 주는 컴파일러

ESLint: JS code convetion 및 문법 검사기

SaSS, less : CSS 전처리기

(5) 클라이언트 웹 앱 배포

빌드와 배포가 필요.

빌드를 통해 만든 정적 파일이 웹을 토해 제공(serve)되려면 정적파일을 제공하는 웹 서버가 필요

호스팅 서비스: 정적 파일을 제공할 수 있도록 서버의 공간을 대여해주는 서비스

클라이언트 앱이 아닌 서버 앱(API 서버)의 경우는, 실제로 node.js를 실행할 수 있는 컴퓨터가 필요

다양한 웹 호스팅 서비스

• Amazon Web Service (AWS) S3
• Google Cloud Storage
• Vercel
• GitHub Pages
• Netlify
• Heroku