콘텐츠로 건너뛰기

[React-Native] 개발환경 세팅 간 오류 해결책 with Perplexity

[문제] React-Native 설치 간 오류 발생

sudo npm install -g react-native-cli 명령어를 입력했더니 다음과 같이 에러코드가 뜬다.

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm error code EEXIST
npm error path /opt/homebrew/bin/react-native
npm error EEXIST: file already exists
npm error File exists: /opt/homebrew/bin/react-native
npm error Remove the existing file and try again, or run npm
npm error with --force to overwrite files recklessly.
npm error A complete log of this run can be found in: /Users/mink/.npm/_logs/2025-01-05T15_07_03_870Z-debug-0.log

한참을 고민해도 답이 안나와서 퍼플렉시티(Perplexity)한테 물어보고 해결을 했다.
그 내용을 공유하고자 한다.

[해결책] React-Native 설치 간 오류 발생

<퍼플렉시티(Perplexity) 답>

이 오류는 주로 두 가지 문제로 인해 발생합니다:

  1. 파일 충돌: /opt/homebrew/bin/react-native 파일이 이미 존재하여 npm이 새 파일을 설치하지 못하고 있습니다.
  2. 권한 문제: sudo를 사용했음에도 불구하고 npm이 해당 위치에 파일을 쓸 수 있는 권한이 없을 수 있습니다.

이 문제를 해결하기 위해 다음 단계를 시도해 보세요:

  1. 기존 react-native-cli 제거:
sudo npm uninstall -g react-native-cli

2. npm 캐시 정리:

npm cache clean --force

3. 재설치 시도:

sudo npm install -g react-native-cli --force

--force 옵션을 사용하면 npm이 기존 파일을 덮어쓰게 됩니다. 그러나 이 방법은 주의해서 사용해야 합니다.

만약 위의 방법으로도 해결되지 않는다면, Homebrew를 통해 react-native-cli를 설치하는 것도 고려해 볼 수 있습니다:

brew install react-native-cli

또한, 최근에는 react-native-cli 대신 npx를 사용하여 React Native 프로젝트를 생성하는 것이 권장됩니다. 다음과 같이 사용할 수 있습니다:

npx react-native init MyProject

이 방법을 사용하면 전역 설치 없이 최신 버전의 React Native CLI를 사용할 수 있습니다.

마지막으로, 경고 메시지에 나온 패키지들(inflight, rimraf, glob)의 deprecation 문제는 현재로서는 무시해도 괜찮습니다. 이는 react-native-cli의 의존성 패키지들의 문제이며, 직접적으로 해결하기 어려운 부분입니다. 향후 react-native-cli가 업데이트되면 이러한 경고들이 해결될 것입니다.

[문제] React-Native 프로젝트 생성 간 캐시폴더 권한오류 발생

다음으로, npx react-native@latest init AwesomeProject 명령어를 입력했더니 다음과 같이 에러코드가 또 뜬다. 하…

npm error code EACCES
npm error syscall open
npm error path /Users/mink/.npm/_cacache/tmp/4aa552ae
npm error errno EACCES
npm error
npm error Your cache folder contains root-owned files, due to a bug in
npm error previous versions of npm which has since been addressed.
npm error
npm error To permanently fix this problem, please run:
npm error sudo chown -R 501:20 "/Users/user/.npm"
npm error A complete log of this run can be found in: /Users/user/.npm/_logs/2025-01-13T11_25_23_738Z-debug-0.log

이번에도 퍼플렉시티(Perplexity)한테 물어보고 해결을 했다.

[해결책] React-Native 프로젝트 생성 간 캐시폴더 권한오류 발생

<퍼플렉시티(Perplexity) 답변>

이 오류는 npm 캐시 폴더의 권한 문제로 인해 발생한 것입니다. 해결하기 위해 다음 단계를 따라해보세요:

  1. 터미널에서 다음 명령어를 실행하여 npm 캐시 폴더의 소유권을 변경합니다:
sudo chown -R 501:20 "/Users/user/.npm"

이 명령어는 오류 메시지에서 제안한 것과 동일합니다. 실행 시 관리자 비밀번호를 입력해야 할 수 있습니다.

2. 소유권 변경 후, npm 캐시를 정리합니다:

npm cache clean --force

3. 캐시 정리 후, 다시 React Native 프로젝트를 초기화해보세요:

npx react-native@latest init AwesomeProject

이 단계들을 수행하면 권한 문제가 해결되어 React Native 프로젝트를 정상적으로 초기화할 수 있을 것입니다.
만약 여전히 문제가 발생한다면, 다음과 같은 추가 조치를 취할 수 있습니다:

  • Node.js와 npm을 최신 버전으로 업데이트합니다.
  • 전역 npm 패키지를 재설치합니다.
  • 마지막 방법으로, npm을 완전히 제거하고 다시 설치할 수 있습니다.

이러한 단계들을 통해 대부분의 npm 관련 권한 문제를 해결할 수 있습니다.

[문제] React-Native 프로젝트 생성 간 init 명령어 오류 발생

위 단계들을 차례대로 따라하고 나서 다시 npx react-native@latest init AwesomeProject 명령어를 입력했다. 이번에는 좀 되는 것 같더니 에러가 나타났다.

Need to install the following packages:
react-native@0.76.6
Ok to proceed? (y) y


🚨️ The `init` command is deprecated.

- Switch to npx @react-native-community/cli init for the identical behavior.
- Refer to the documentation for information about alternative tools: https://reactnative.dev/docs/getting-started
Exiting...

이번에도 퍼플렉시티(Perplexity)한테 물어보고 해결을 했다.

[해결책] React-Native 프로젝트 생성 간 init 명령어 오류 발생

<퍼플렉시티(Perplexity) 답변>

이 오류는 react-native init 명령어가 더 이상 사용되지 않음을 나타냅니다. React Native 프로젝트를 초기화하기 위해 다음과 같은 대안을 사용할 수 있습니다:

  1. React Native Community CLI 사용:
npx @react-native-community/cli init AwesomeProject

2. 특정 버전의 React Native 사용:

npx react-native@X.XX.X init AwesomeProject

여기서 X.XX.X는 원하는 React Native 버전입니다.

3. TypeScript 템플릿 사용:

npx react-native init AwesomeProject --template react-native-template-typescript

4. 최신 버전의 React Native CLI 사용:

npx @react-native-community/cli@latest init AwesomeProject

이러한 방법들 중 하나를 선택하여 새로운 React Native 프로젝트를 초기화할 수 있습니다. 공식 문서에서는 React Native 프로젝트 시작을 위한 다양한 도구와 방법을 제공하고 있으므로, 프로젝트 요구사항에 가장 적합한 방법을 선택하시기 바랍니다.

참고로, React Native의 개발 환경 설정과 프로젝트 초기화 방법은 지속적으로 업데이트되고 있으므로, 최신 공식 문서를 항상 확인하는 것이 좋습니다.

React-Native 개발환경 세팅 완료, 그리고 AI 검색툴 후기

퍼플렉시티(Perplexity) 덕분에 드디어 React-Native 개발환경 세팅이 마무리되었다.

과거 학부시절 프로그래밍을 할 때는 열심히 구글링을 하며 Stack Overflow나 여러 Github 사이트에 들어가 문제 솔루션을 찾아가며 했었다. 요즘은 AI 덕분에 검색이나 자료조사하는데 시간이 획기적으로 줄어들어 프로그래밍을 하기 참 쉬운 시대가 된 것 같다.

프로그래머이신 분들께는 검색엔진으로는 Perplexity, 코딩 참고용으로는 Genspark를 적극 추천한다.

0 글이 마음에 드시면 하트를 눌러주세요! 행복한 고민이 됩니다!

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다