프론트엔드 빌드에 대해

진행하는 프론트엔드 애플리케이션을 dockerize 하는 중에,

프론트엔드 빌드 과정에 대해서 제대로 파악하고 구성해야 할 것 같아서 작성

(자세하게 다루기보다는 전체 맥락을 파악하는 의도로 작성합니다)

(틀린 내용이 있는 경우 공유해주시면 감사하겠습니다!)

 

---

전체 flow

1. npm을 통해 package.json을 참고하여 패키지를 다운하고 관리

2. 번들링 툴을 사용해 구성 요소를 그룹화하여 빌드

3. 빌드한 파일을 배포

 

 

1. npm을 사용한 패키지 다운 및 관리

처음 프론트엔드 빌드를 할 때는 npm이 전부 빌드까지 해주는 줄 알았는데,

npm은 단순 패키지 모듈(Node Package Manager)로써 package.json을 보고 패키지를 관리해주는 역할만 하고

실제 빌드는 프레임워크자체에서 설정된대로 빌드가 진행되는 것이다.

 

근데 여기서 package.json과 package-lock.json의 차이가 궁금해질 수 있다.

package에서는 버전의 범위를 정의해놓지만, package-lock에서는 정확한 버전을 명시해놓는다.

(여러 개발자가 개발하는 경우 동일한 환경을 맞추기 위해 사용)

 

 

2. 번들링 툴을 사용한 빌드

번들링 툴에는 여러가지가 있다. 가장 유명한 Webpack이나, Rollup, Vite나.. 

이 번들링 툴은 서로 의존관계를 지닌 여러 모듈을 조합하여 하나의 파일로 합쳐준다.

번들러를 사용해 모듈간의 의존성 처리와 로딩 속도 개선 등의 효과를 얻을 수 있다.

 

 

3. 빌드한 파일 배포

마지막으로 빌드한 파일을 nginx나 node에 올려서 배포한다.

 

 

끝~