SEB 섹션2. 22일차 TIL - 빌드와 배포

자율학습 코딩봇 2021. 9. 30. 21:20

빌드

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

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

과거에 동적인 웹페이지를 만드려면, 서버가 동적으로 생성하는 방법만이 존재하였다. 클라이언트로 서버가 지속적으로 웹 페이지의 내용을 전달하여야 하므로 이에 따른 네트워크 메시지의 빈도 수가 증가하고 서버의 부담이 큰 단점이 존재하였다.

하지만 기술의 발달로 모든 동적인 정보를 서버가 부담할 필요성이 없게 되면서 클라이언트에 필요한 정보만 전달하게 되고, 서버의 부담은 감소하였다. 서버는 순수한 데이터만 전달하게 되며 AJAX 기술을 응용한 SPA 와 같은 고도화 된 웹 앱으로 진화하게 되었다.

앞선 배경에 이어서 클라이언트 사이드의 규모가 커지게 되었다. 이 떄의 웹사이트 구성요소를 각 파일로 분리하는 모듈화가 진행되고 React와 같은 클라이언트 기술의 발전과 같이 단일 파일로 자바스크립트나 페이지를 만드는 작업이 훨씬 고도화 되었다.

이 떄, 고도화된 클라이언트 웹 앱은 다양하고 수 많은 모듈로 이뤄져있는데 이 처럼 수 많은 모듈을 하나로 묶어주는 것을 번들링(Bundling)이라고 한다.

이 과정에서 JSX와 같이 브라우저에서 알아서 해석이 불가능한 파일들을 브라우저가 해석할 수 있도록 변환해주는 등의 작업이 필요해졌다. 이러한 작업을 소프트웨어 빌드(Build)라고 부르게 되었다.

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

React 생태계에는 다양한 프로젝트 생성 툴이 존재한다. 이러한 프로젝트 생성 툴 중 대표적인 2가지는 아래와 같다.

- Create React App : 표준적인 React 프로젝트 생성 (아래 npm을 통한 프로젝트 생성 CLI명령)

npx create-react-app <directory>

- Next.js : React 기반의 앱의 SSR을 쉽게 구현할 수 있도록 해주는 프레임워크

(npm으로 아래와 같이 설치 진행 후, package.json에서 "next" 명령어를 등록하여 실행해주면 확인이 가능하다)

npm install react react-dom next

프로젝트 생성 툴의 구성을 조금 더 살펴보면, 내부적으로 다양한 툴의 조합으로 이루어져 있다.

- webpack : 모듈 번들러

- babel : TypeScript, JSX 등과 같은 브라우저에서 직접적으로 지원하지 않는 언어를 JS로 바꿔주는 컴파일러

- ESLint : 자바스크립트 Code Convention 및 문법 검사기

- Sass, less : CSS Preprocessor

로컬 환경에서 개발한 코드를 실제 서비스로 만들기 위해서는, 빌드 과정과 이를 웹에 노출시키는 배포 과정이 필요하게된다. 빌드를 통해서 만들어진 정적 파일이 웹을 통해 제공하는 웹 서버가 필요하다.

웹 서버라면 웹 서비스를 제공하는 모든 종류의 서버가 웹 서버일 수 있으나, 특별히 정적 파일을 제공할 수 있도록 서버의 공간을 대여해주는 서비스를 호스팅 서비스라고 부른다.

호스팅 서비스는 단순 파일을 웹에서 접근 가능하게 해준다. 동적 웹 사이트나 API 서버를 제공하려면, 별도의 클라우드 컴퓨팅 서비스가 필요하다.