멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 72 (리액트 빌드 환경 구성, 리액트 프로젝트 템플릿 구성)

 

목차

• 리액트 빌드 환경 구성
• 리액트 프로젝트 템플릿 구성
• 오늘 하루를 돌아보며

 

리액트 빌드 환경 구성

Bun 올인원 런타임 환경을 기반으로 다양한 개발 도구들을 직접 설정하고 효과적으로 활용하는 방법을 학습했다. Bun은 패키지 매니저, 번들러, 테스트 러너 등 다양한 기능을 하나의 런타임에 통합하여 복잡한 개발 환경을 간결하게 구성할 수 있도록 도와준다. Bun은 자바스크립트 실행 환경에서 Node.js보다 매우 빠른 성능을 제공한다.

 

만얄 Vite 빌드 도구를 선호한다면 Vite 환경에서 Bun을 사용할 수도 있다.

 

빌드 환경을 구성하기 위해서 React와 ReactDOM을 설치하고, JavaScript가 아닌 모듈을 불러오고, 타입 정의 파일을 설치했다. VSCode 인텔리센스를 구성하고 Prettier도 설치한 후 구성했다. 그리고 ESLint로 설치하고 구성해봤다.

 

리액트 프로젝트 템플릿 구성

bun create로 새로운 Bun 프로젝트를 템플릿화할 수 있다. 이 명령어는 로컬 템플릿이나 GitHub 저장소에서 새로운 프로젝트를 생성할 수 있는 유연한 명령어다.

아래는 빌드 환경을 구성해 보고 리액트 프로젝트 템플릿을 만들어서 GitHub에 배포한 것이다.
https://github.com/b1ackitty/react-js
https://github.com/b1ackitty/react-js-vite

GitHub - b1ackitty/react-js: Bun 올인원 런타임을 사용해 리액트를 빌드할 수 있는 환경 구성

 

GitHub - b1ackitty/react-js-vite: Bun 올인원 런타임과 Vite를 사용해 리액트를 빌드할 수 있는 환경 구성

 

 

 

오늘 하루를 돌아보며

매번 처음부터 설정하지 않아도, 템플릿을 언제든 원할 때마다 불러오면 리액트를 빌드할 수 있는 환경이 바로 구성되어서 정말 편리하다. Bun 올인원 런타임을 사용하면 환경 구성을 빠르게 할 수 있어서 더 좋다. GitHub에 올린 것도 불러올 수 있는 게 포인트인 것 같다. 로컬에 저장한 것뿐만 아니라 온라인에서도 불러올 수 있어서, 다른 사람들이 만들어 놓은 환경 구성 파일을 불러올 수도 있으니, 나에게 필요한 환경을 구성하기가 편리할 것 같다.