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

Achievement Goals

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

빌드

SSR

Server Side Rendering
서버에서 웹페이지를 렌더링

CSR

Client Side Rendering
클라이언트에서 웹페에지를 렌더링

정적 웹사이트

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

동적 웹사이트

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

링크

Static vs Dynamic Websites - What's the Difference?

소프트웨어 빌드

소스코드를 실행 가능한 결과물로 변환하는 작업

React 프로젝트 생성 툴

1. Create React App - react-scripts 모듈 사용
2. Next.js - next모듈 사용

빌드 툴

1. webpack: 모듈 번들러
2. babel: TypeScript, JSX 등과 같이 브라우저가 지원하지 않는 언어를 JavaScript로 바꿔주는 컴파일러
3. ESLint: 자바스크립트 Code convention 및 문법 검사기
4. Sass, less: CSS Preprocessor

배포

웹 호스팅 서비스

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

다양한 웹 호스팅 서비스

1. Amazon Web Service (AWS) S3
2. Google Cloud Storage
3. Vercel
4. GitHub Pages
5. Netlify
6. Heroku