패키지란? 프론트를 실행하려면 빌드를 해야하는 이유

그동안 프레임 워크를 쓰지않고 순수 자바스크립트를 사용해봤기에 리액트나 뷰가 어렵게 느껴졌다. 이러한 빌드과정이 필요없었기 때문이다.
기존에는 전통적인 웹 개발 방식을 유지했었기 때문에 복잡한 빌드 과정이 필요하지 않았다. 이러한 경우, 자바스크립트 코드는 HTML 문서에 직접 포함되거나, <script> 태그를 통해 외부 파일로 참조되어, 브라우저가 이를 해석하여 실행하기 때문에 코드를 서버에 저장하면 바로 적용되었었다.

 

이전에 `PHP`, `JavaScript`, `jQuery`를 사용하여 개발할 때는, 서버 사이드 렌더링(Server-Side Rendering, SSR) 방식을 주로 사용했다. 이 방식에서는 서버에서 페이지의 전체 `HTML`을 생성하고, 그 결과를 클라이언트(브라우저)에 전송한다. `JavaScript`와 `jQuery`는 주로 클라이언트 사이드에서 동적인 상호작용을 추가하기 위해 사용되었고, 이러한 스크립트들은 서버에서 바로 `HTML` 페이지에 포함되어 전송되었다.

 

이 경우, `JavaScript` 코드는 별도의 빌드 과정 없이 `HTML` 내에 직접 포함시키거나, 외부 스크립트 파일로 링크하여 사용되었다. 코드 변경사항은 서버에 파일을 업로드하는 것만으로 바로 반영될 수 있으며, 복잡한 빌드 과정이나 모듈 번들링이 필요하지 않았다. 하지만..

 

클라이언트 사이드 JavaScript 프레임워크와의 차이

• 빌드 과정: React, Vue.js와 같은 현대적인 클라이언트 사이드 JavaScript 프레임워크를 사용할 때는, 애플리케이션의 구조가 더 복잡하고 모듈화되어 있다. 이러한 프레임워크를 사용하면 SPA(Single Page Application) 개발이 가능해지며, 애플리케이션의 상태 관리, 라우팅, 컴포넌트 기반 개발 등 고급 기능을 활용할 수 있다.
• 모듈 번들링: 여러 JavaScript 파일과 모듈을 하나의 파일 또는 몇 개의 파일로 번들링하는 과정이 필요하다. 이는 네트워크 요청을 최소화하고, 전체 애플리케이션의 로딩 시간을 개선하는 데 도움이 된다.
• 트랜스파일링: 최신 JavaScript(ECMAScript 2015+) 문법을 사용하여 개발할 수 있으나, 모든 브라우저에서 최신 문법을 지원하지 않기 때문에, Babel 같은 트랜스파일러를 사용하여 오래된 브라우저에서도 호환될 수 있도록 코드를 변환해야 한다.
• 개발 서버: 개발 중에는 Webpack, Vite 등의 도구를 사용하여 로컬 개발 서버를 실행하고, 핫 리로딩(Hot Reloading) 기능을 통해 코드 변경사항을 실시간으로 반영할 수 있다.

 

이러한 차이로 인해, 현대의 프론트엔드 개발 환경에서는 코드를 최종 사용자에게 제공하기 전에 빌드 과정을 거치게 된다. 이 과정은 성능 최적화, 호환성 보장, 개발 효율성 향상 등 여러 이점을 제공한다.

 

---

웹 개발에서 "패키지"와 "빌드 과정"은 프론트엔드 개발, 특히 현대의 `JavaScript` 프레임워크(예: `React`, `Vue.js`)를 사용할 때 중요한 개념이다. `PHP`와 `Python` 개발과는 다른 접근 방식이 있기 때문에, 이러한 개념이 처음에는 다소 생소할 수 있다.

 

 

패키지란?

패키지는 코드와 리소스의 묶음으로, 특정 기능을 수행하도록 미리 작성된 소프트웨어 컴포넌트이다. 예를 들어, UI를 만들기 위한 라이브러리인 `React`나, 애플리케이션의 구조까지 제공하는 프레임워크인 `Vue.js` 모두 패키지의 일종이다. 개발자는 이러한 패키지를 사용하여 애플리케이션 개발 시간을 단축하고, 이미 검증된 기능을 재사용할 수 있다. `JavaScript` 개발에서는 `npm`(Node Package Manager) 또는 `yarn`과 같은 패키지 매니저를 사용하여 필요한 패키지를 관리한다.

React

Vue.js

React는 라이브러리, Vue.js는 프레임워크이다.

라이브러리와 프레임워크의 차이

핵심 차이: 제어의 역전 (Inversion of Control)

"누가 주도권을 가지는가" 라는 개념을 기술적으로 제어의 역전(IoC)라고 부른다. 이것은 프레임워크를 정의하는 가장 중요한 특징이다.

라이브러리 (내가 주도)

애플리케이션의 전체 흐름을 내가 직접 만들 수 있다. 특정 기능이 필요할 때, 라이브러리를 '호출'해서 사용한다.

// 내가 전체 흐름을 제어한다.
function 내애플리케이션() {
  // 1. 내가 무언가 하기로 결정한다.
  어떤작업을_한다();

  // 2. 날짜를 다뤄야 해서, 'moment.js' 라이브러리를 호출한다.
  const 오늘날짜 = moment().format('YYYY-MM-DD');
  console.log(오늘날짜);

  // 3. 다시 내 코드의 흐름을 이어간다.
  다른작업을_한다();
}

 

프레임워크 (프레임워크가 주도) 

프레임워크가 전체 구조와 생명주기(lifecycle)를 제공한다. 프레임워크가 정해놓은 규칙에 맞춰 코드를 채워 넣으면, 프레임워크가 적절한 시점에 그 코드를 실행(호출)한다.

// Vue.js 프레임워크가 흐름을 제어한다.
new Vue({
  // 나는 데이터와 템플릿만 제공한다.
  el: '#app',
  data: {
    message: '안녕 Vue!'
  },
  // 프레임워크가 자신의 생명주기 중 적절한 시점에 내 'created' 코드를 호출한다.
  created() {
    console.log('프레임워크가 나를 호출했어!');
    // 이 코드가 '언제' 실행될지는 내가 정하는 게 아니다.
  }
});

 

요약 비교

구분	라이브러리 (예: React, jQuery)	프레임워크 (예: Vue.js, Angular, Spring)
제어 흐름	내 코드가 라이브러리를 호출	프레임워크가 내 코드를 호출
비유	도구 상자, 자동차 부품	집 뼈대, 자동차 섀시(차대)
유연성	높음 (모든 것을 내가 선택)	낮음 (정해진 규칙 안에서 작업)
범위	특정 문제에 집중 (예: UI, 날짜)	애플리케이션 전체 구조 제공
주요 역할	재사용 가능한 함수/컴포넌트 제공	아키텍처를 결정하고 흐름을 지휘

 

=> 나는 라이브러리를 호출, 프레임워크는 나를 호출

 

빌드 과정이 필요한 이유

1. 최적화: 빌드 과정을 통해 애플리케이션의 자바스크립트 코드, CSS, 이미지 등 리소스가 최적화되어, 로딩 시간이 단축된다. 코드 압축, 불필요한 코드 제거(tree shaking), 이미지 크기 최적화 등이 포함된다.
2. 모던 JavaScript 사용: 최신 JavaScript(ECMAScript 2015+)를 사용하여 개발할 수 있지만, 모든 브라우저가 최신 문법을 지원하지는 않는다. Babel과 같은 트랜스파일러를 통해 최신 문법으로 작성된 코드를 오래된 브라우저에서도 실행 가능한 형태로 변환한다.
3. 모듈 번들링: 현대 웹 애플리케이션은 수많은 모듈과 패키지로 구성된다. `Webpack`이나 `Parcel`과 같은 모듈 번들러를 사용하여 여러 개의 파일을 하나 또는 몇 개의 파일로 묶어(번들링) 네트워크 요청을 최소화한다.
4. 환경 구분: 개발 환경과 프로덕션 환경을 위한 다른 설정을 적용할 수 있다. 예를 들어, 개발 중에는 디버깅을 위한 소스 맵을 포함시키고, 프로덕션 빌드에서는 추가적인 최적화와 압축을 수행한다.

 

 

PHP와 Python 개발과의 차이

전통적으로 PHP나 Python과 같은 서버 사이드 언어는 서버에서 직접 HTML을 완성하여 클라이언트에게 제공하는 서버 사이드 렌더링(SSR) 방식으로 동작했다.

반면, React나 Vue.js는 클라이언트(브라우저)가 서버로부터 최소한의 HTML과 JavaScript를 받아 브라우저에서 동적으로 화면을 그리는 클라이언트 사이드 렌더링(CSR) 방식을 기반으로 한다.

지금은 PHP/Python은 HTML 대신 JSON 데이터를 제공하는 API 서버로 주로 활용되며, React/Vue는 Next.js나 Nuxt.js와 같은 프레임워크를 통해 서버에서 코드를 실행하여 SSR을 구현하는 경우가 많다.

 

이러한 구조적 차이 때문에, 현대 프론트엔드 개발에서 빌드(Build) 과정은 선택이 아닌 필수 이다.

빌드 과정은 단순히 코드를 변환하는 것을 넘어, 사용자 경험(UX)과 개발 효율성(DX)을 모두 극대화하는 핵심적인 역할을 합니다. 예를 들어, 코드를 압축하고 최적화하여 로딩 속도를 높이고, 최신 `JavaScript` 문법을 구형 브라우저에서도 동작하도록 호환성을 보장해 준다. 또한 개발 중에는 수정 사항을 즉시 화면에 반영해주거나(Hot Reloading) TypeScript, SCSS 같은 코드를 자동으로 변환하여 개발자의 생산성을 크게 향상시킨다.

결론적으로 빌드 과정은 현대 웹 개발의 복잡성을 다루고, 더 견고하고 효율적인 애플리케이션을 만들기 위한 핵심 엔진이라고 할 수 있다.