정적 웹사이트와 동적 웹사이트의 차이점

예전에는 서버 사이드에서 완성된 페이지를 렌더링하여 클라이언트에게 전송하였음.

클라이언트가 새로운 정보를 요청하여, 화면에 수정사항이 생길 때마다 서버가 동적으로 웹사이트를 만들어주는 식이다.

반면 정적 웹사이트는 클라이언트 측에서 렌더링을 하기 때문에 수정사항이 생긴 부분만 서버에게 요청하므로 서버의 부담을 줄일 수 있다. CSR, SSR과 연관이 되어 있다. 최근에는 이 둘을 합한 하이브리드 렌더링 방식, Next.js나 Gatsby 등이 있다.

빌드

소스 코드들을 실행 가능한 형태의 정적 파일로 만드는 것.

빌드의 필요성

CSR이 대두되기 시작하면서, react과 같은 클라이언트 사이드에서 사용하는 기술들이 증가하였고, 이에 따라 클라이언트 사이드의 규모가 커지게 되었다. 따라서 이를 관리하는 작업도 점차 고도화가 되었다.

특히 브라우저에서 해석할 수 없는 언어들이 모듈에 포함이 되었기 때문에 이를 한번에 전처리할 수 있는 도구가 필요하게 되었고, 이 과정을 빌드라고 부른다. 다시 정리하면, 소스코드들을 웹에서 실행 가능한 형태로 만들어 주는 것을 빌드라고 이야기한다.

예를 들면 ,CSS 전처리기인 sass, less, JSX 컴파일러인 Babel, 번들링 도구 webpack, 문법 검사기 ESlint 등이 다 빌드 도구라고 보면 된다. 다 공통적으로 소스코드들을 브라우저에서 실행 가능한 형태로 만들어주기 때문이다.

웹팩: 여러 개의 모듈로 이루어진 파일들을 하나의 js 파일로 번들링 해 주는 도구이다. 만약에 여러 개의 파일 자체를 번들링 없이 배포한다면 네트워크 비용이 많이 발생할 수 밖에 없다. 이를 해소하고자 만든 것이 웹팩이다.

Untitled