[토스] CLI 기반 리액트 세팅 툴킷 기능 추가

2025.05.20

지난 번 만들었던 react-kit-cli가 기능적으로 아직 부족한 부분이 많다고 생각되어 상태관리 툴인 redux, recoil에 대한 세팅까지 추가로 자동화 시키는 기능을 추가했다.

먼저 package.json에 관련 의존성을 추가하고, Redux Store 설정을 위한 기본 템플릿을 생성했다.

의존성 추가, 기본 템플릿 설정

카운터 슬라이스 예제와 같은 경우엔 아래와 같이 작성해주었다.

카운터 슬라이스 예제

이후 Recoil 설정을 위한 기본 템플릿을 지정해주었고, CLI에도 상태 관리 옵션을 추가해주었다.(bin/index.ts)

Recoil 설정, CLI 옵션 추가

react-kit init test-redux-project --with-redux --with-tailwind 명령어로 새 프로젝트를 생성해주었고,

생성완료!

이후 npm install, npm run dev를 통해 브라우저 환경에서 테스트를 진행했다.

기본적인 예제를 추가해줌으로서 처음 접하는 개발자들도 빠르게 설정을 완료할 수 있도록 작업하였고, 타입스크립트와 함께 설정이 가능하다는 점이 장점이라고 생각한다.! 다행히 이번 기능 추가는 어렵지 않아 빠르게 작업할 수 있었던 것 같다,,,