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

그동안 프레임 워크를 쓰지않고 자바스크립트를 사용해봤기에 리액트나 뷰가 어렵게 느껴졌다. 이러한 빌드과정이 필요없었기 때문이다.
기존에는 전통적인 웹 개발 방식을 유지했었기 때문에 복잡한 빌드 과정이 필요하지 않았다. 이러한 경우, 자바스크립트 코드는 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 개발과는 다른 접근 방식이 있기 때문에, 이러한 개념이 처음에는 다소 생소할 수 있다.

 

 

패키지란?

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

 

 

빌드 과정이 필요한 이유

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

 

 

PHP와 Python 개발과의 차이

PHP와 Python과 같은 서버 사이드 언어는 클라이언트(브라우저)에 HTML을 직접 제공한다. 서버에서 코드가 실행되며, 클라이언트에게는 실행 결과인 HTML이 전송된다. 반면, React나 Vue.js와 같은 클라이언트 사이드 JavaScript 프레임워크는 브라우저에서 실행된다. 따라서, 서버에서 제공하기 전에 클라이언트에서 실행될 수 있도록 코드를 준비(빌드)해야 한다.

이러한 차이로 인해, 현대의 프론트엔드 개발에서는 빌드 과정이 필수적인 부분이 되었다. 이 과정을 통해 개발자는 더 나은 사용자 경험을 제공하고, 개발 효율성을 높일 수 있다고 한다.