📂 개발
expo_wind_zustand_logo.png

npx로 React Native 초기세팅 한번에 하기

#NPM, #Expo, #React Native, #Tailwind, #Nativewind, #Zustand,2025-06-10

NPM에 배포된 CLI

expo-wind-zustand 레포지토리

npx 명령어로 초기 설정을 받아올 수 있도록 환경을 만들어보자.

최근 React Native를 사용할 일이 많아졌고 초기세팅을 진행하며 겪었던 어려움을 해소하고 배포하는 경험을 해보고 싶어 이 과정을 진행했다.

목차

  • 배포한 이유
  • 초기 설정 과정
  • npm 배포 과정
  • 결과

배포한 이유

크게 두가지 이유가 있다.

  1. 평소 create-react-app, shadcn의 컴포넌트처럼 간단하게 명령어만으로 틀을 제공하는 것을 만들어보고 싶었다.
  2. Expo 기반 React Native 프로젝트에서 버전 불일치로 고생했다. 버전차이 이슈로 시간 투자를 많이했고, 이와 같은 이슈를 겪지 않았으면 했다.
  3. 새로 시작하는 프로젝트였기에 이왕이면 최신버전을 적극 반영한 세팅으로 프로젝트를 진행하고 싶었다. 배포한 것을 지속 업데이트하며 다시 활용하기 위함이다.

초기 설정 과정

초기 설정은 다음 과정으로 진행했다.

  1. Expo 최신 버전의 React Native 프로젝트를 구성한다.
  2. 해당 프로젝트에 Tailwind를 적용한다. Eslint, Prettier를 함께 적용하고 prettier-plugin-tailwindcss를 함께 적용한다.
  3. Zustand를 적용한다.

이 과정중 2번 과정에서 버전 차이로 인한 에러가 발생했다.

ReanimatedError: Mismatch between JavaScript part and native part of Reanimated

ios로 테스트를 진행하는 과정에 위와 같은 에러가 발생했고, 원인을 파악한 결과 Expo에선 3.17.4 버전을 사용함을 알게되었다. Nativewind를 적용을 위해 metro, babel 설정을 하며 도중 나도 모르게 npm update라는 명령어를 입력했나보다.

개인적으로 Nativewind를 적용하는 과정이 깔끔하지도 않았기에 나중에 진행할 프로젝트를 위해 expo-wind-zustand를 배포했다.

npm 배포 과정

expo_wind_zustand_logic.png

이와 같은 구조를 가지도록 배포를 진행했다. 내가 가지고 있는 레포지토리를 클론하는 CLI를 배포하여 expo-wind-zustand를 수정하면 npm을 추가적으로 관리할 필요 없도록 했다.

또, degit 명령어를 활용하여 .git을 제거한 상태로 해당 템플릿을 가져오도록했다. Create React App, SvelteKit등이 이와 같은 방법을 사용하는 것으로 안다.

CLI 구성은 이 레포지토리를 확인해보자.

아무튼 CLI는 npm publish를 진행했다. package.json에 homepage 등의 값들을 넣어 npm페이지에서 나의 레포지토리에 접근할 수 있도록 했다.

결과