소개

이 튜토리얼에서는 외부 라이브러리, 이미지, 폰트, CSS 같은 다양한 자원을 웹팩(Webpack)으로 한데 묶어보면서, 웹 개발에서 번들링이 왜 중요한지 직접 체험해볼 수 있어요. 간단한 예제 프로젝트인 오늘의 이모지를 만들어가며, 웹팩의 기본 개념부터 실전 사용법까지 차근차근 익혀볼 거예요.

준비사항

• 코드 에디터를 준비해요.
• HTML과 JavaScript의 기본 개념만 알고 있으면 충분해요.

이런 순서로 진행돼요

1. 웹 프로젝트의 시작을 준비해요

   • Node.js와 npm으로 프로젝트를 시작해요.
   • 웹팩을 설치하고 첫 번째 번들을 만들어요.

2. 모듈 시스템과 번들링을 이해해요

   • npm으로 라이브러리를 설치하고 모듈로 불러오는 방법을 배워요.
   • 웹팩으로 모듈을 하나로 합치는 과정을 이해해요.

3. 현대 프론트엔드 개발 방식에 익숙해져요

   • TypeScript로 타입 안전성을 높여요.
   • React로 컴포넌트 기반 개발을 해요.
   • CSS와 이미지, 폰트를 모듈처럼 다뤄요.

4. 개발 환경을 효율적으로 구성해요

   • 플러그인으로 기능을 확장해요.
   • 개발 서버로 생산성을 높여요.

예제 프로젝트 세팅하기

1. 오늘의 이모지 예제 프로젝트 ZIP 파일를 다운로드하고 압축을 풀어주세요.
2. 압축을 풀면 이런 폴더 구조가 보여요.

   example-project/
   ├── index.html
   ├── style.css
   ├── main.js
   ├── emoji.js
   └── assets/
       ├── logo.svg
       └── Inter-Regular.woff2

3. index.html 파일을 브라우저에서 열어 예제 프로젝트를 확인해보세요.

HTML 파일을 어떻게 여나요?

파일 탐색기에서 index.html 파일을 더블클릭하거나 브라우저에 파일을 드래그 앤 드롭하면 열 수 있어요. 이 방식은 파일을 로컬에서 직접 불러오는 방식으로, 개발 초기 단계에서 간단히 결과를 확인하기 좋아요.

나중에 웹팩 개발 서버를 사용하게 되면 자동 새로고침, 모듈 핫 리로딩 등 개발 생산성을 높이는 기능들을 활용할 수 있게 되니, 기대해주세요.

다음 단계

이제 프로젝트 환경을 설정하고 첫 번째 번들을 만들어 볼게요. 차근차근 따라오시면 어느새 웹 개발의 핵심 도구인 웹팩을 자유롭게 활용할 수 있게 될 거예요.