클라이언트 빌드와 배포

클라이언트 빌드와 배포

학습 내용

로컬 환경에서 개발한 코드를 실제 서비로 만들기 위해서는 빌드 과정과 이를 웹에 노출시키는 배포 과정을 필요로 한다. 그래서 이번 시간에는 빌드의 개념과 배포의 개념 그리고 개발 방식의 차이인 정적 웹사이트와 동적 웹사이트에 대해 학습하고자 한다.

정적 웹사이트와 동적 웹사이트

정적 웹사이트란 HTML 파일(코드) 자체로 배포되는 사이트(CSR)를 말하고, 동적 웹사이트란 서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR)을 말한다. AJAX 이전에는 요청에 따라 결과가 변하는 동적인 웹페이지를 만들기 위해서 서버가 매번 동적으로 생성해야만 했다. 그래서 그 동적 웹사이트를 받아오기 위해서 서버가 HTML의 형태로 브라우저에 제공해주어야 했기 때문에, 헤더나 푸터 등의 페이지 구성요소의 중복 요청/응답이 빈번했다. 그러다 보니 당연히 네트워크 상에서 주고받는 패킷의 크기가 다소 클 수밖에 없었다. 이런 동적 웹사이트를 만드는 기술들로 PHP, JSP, ASP 등이 있다.

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

물론 그렇다고 동적 웹사이트가 완전히 사장된 것은 아니다. 필요에 의해, 특히 포털사이트와 같은 곳에서는 SSR을 활용한 동적 웹사이트로 구현했고, 뿐만 아니라 성능의 향상을 극대화하기 위해 CCR, SSR과 같은 하이브리드 형태로 구성하여 활용되고 있다.

빌드

현대 웹 앱이 정적 웹페이지로 AJAX 기술을 사용하거나 SPA(Single Page Application)으로 변모함에 따라 클라이언트 사이즈의 규모가 매우 커지게 되었다. 이로 인해 웹사이트 구성요소를 각 파일로 분리하는 모듈화가 이뤄지게 되었고, React와 같은 클라이언트 기술이 발전하면서 단일 파일로 자바스크립트 페이지를 만드는 작업이 고도화되기 시작했다. 그러다 보니 이런 고도화된 클라이언트 웹 앱의 수많으 모듈들을 하나로 묶어주는 작업이 필요했다. 이것이 번들링(bundling)이라고 한다. 또 이과정에서 JSX파일과 같이 브라우저에서 자체적으로 해석이 불가능한 다양한 보조 기술들을 브라우저가 해석할 수 있도록 만들어주는 작업들 역시 수반되었는데, 이런 과정들을 통칭해 '소프트웨어 빌드'라고 부른다. 즉, 소스코드를 실행 가능한 결과물로 변환하는 작업을 말한다.

정적 웹페이지에서 다양한 모듈이 정적 파일들로 결과가 만들어져야 하기 때문에 이러한 빌드 과정이 배포에 필수적이라고 할 수 있다. Create React App 등으로 생성한 React 프로젝트의 경우 npm build 명령어가 package.json 파일에 포함되어 있다. 이 것을 통해 모듈을 정적인 파일로 만들 수 있다.

React에서 다양한 프로젝트 생성 툴이 존재하는데 대표적으로 Create React App과 Next.js가 있다. Create React App 프로젝트의 경우 react-scripts라는 모듈을 사용하고 Next.js는 next모듈을 사용한다. 프로젝트 생성 툴의 구성은 다양한 툴의 조합으로 이뤄져 있는데 아래와 같은 것들이 있다.

webpack 모듈 번들러 babel TypeScript, JSX 등과 같이 브라우저가 지원하지 않는 언어를 JavaScript로

바꿔주는 컴파일러 ESLint 자바스크립트 Code Convention 및 문법 검사기 Sass, less CSS Preprocessor(전처리기)

클라이언트 웹 앱 배포

로컬 환경에서 개발한 코드를 실제 서비스로 만들기 위해서는 빌드 과정과 이를 웹에 노출시키는 배포 과정을 필요로 한다. 빌드를 통해 만든 정적 파일이 웹을 통해 제공되려면 이러한 정적 파일을 제공하는 웹 서버가 필요한 것이다. 보통 웹 서버는 웹 서비스를 제공하는 모든 종류의 서버를 말하지만 특별히 정적 파일을 제공할 수 있도록 서버의 공간을 대여해주는 서비스를 호스팅 서비스라고 부른다. 호스팅 서비스는 단순 파일을 웹에서 접근 가능하게 만들어주며, 동적 웹사이트나 API 서버를 제공하려면 별도의 클라우드 컴퓨팅 서비스가 필요하다. 다소 저렴하고 인기 있는 웹 호스팅 서비스들을 이렇다.

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

느낀 점

내가 지금 진행하고 있는 부트 캠프의 Section2를 끝냈다. 물론 Section2의 시험 역시 끝마친 상태이다. 이번 섹션을 진행하면서 느낀 것은 공부해야 할게 무궁무진하다는 것이다. 개발자가 된다는 것은 아니 무엇을 하든지 간에 새로운 것이 쏟아져 나오는 지금은 계속해서 배우고 익혀야 한다. 이것을 볼 때 내가 진행하는 부트캠프인 코드 스테이츠는 개발을 가르치기보다 개발자가 되는 법을 가르친다는 생각이 들었다. 하나의 개념을 가르쳐줄 때도 그냥 가르쳐주는 법이 없다. 불친절하고 스스로 하게 끔 한다. 그러나 생각해보면 개발자로 살려면 이 것은 당연한 것이다. 공부는 쉴 수 없고 누구도 무엇을 어떻게 공부해야 하는지 가르쳐주지 않는다. 지금도 앞으로도 스스로 해야 하는 것이다. 하면서 이렇게 공부하면 개발자가 아니 좋은 개발자가 될 수 있을까 생각한다. 그러면서도 한편으론 어떤 것이든 쌓이고 있다는 생각을 한다. 코드 스테이츠의 과정은 반이 남았다. 그러나 개발자로의 삶은 이제 시작해야 한다. 이 모든 것에 그냥 즐겨야겠다는 생각을 한다.

from http://anhyang.tistory.com/33 by ccl(A) rewrite - 2021-12-08 17:00:59