728x90

React를 공부하고 있는 중입니다.
React를 공부하려다 그동안 확바뀐 Node.js 까지 익히는 중입니다 ㅎㅎ
npm의 유틸리티중 하나인 npx를 이용해서 create-react-app 패키지를 설치하고 
이를 이용한 보일러 플레이팅을 하는 것이 보고 있는 책의 예제입니다.

그런데!

놀랍게도 (언제나 그렇듯이) 개발 환경 구성부터 산넘어 산입니다. 
오늘 만난 에러는 npx를 이용한 React 보일러 플레이팅 중 발생했습니다. 

% npx create-react-app test
npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/nopd/.npm/_logs/2022-02-05T17_54_47_354Z-debug.log
[ 'create-react-app@latest' ] 설치가 오류 코드 1로 실패했습니다

뭔가 발음하기에도 거시기한 cb.apply가 함수가 아니라는 에러!
아버지를 아버지라 부르지 못하고... 함수를 함수라 부르지 못하는 것인가 싶었지만 차치하고...
몇 군데 검색을 해봐도 딱히 쓸만한 방법을 찾질 못했습니다. 

구글 검색에서 걸린 것들은 대부분, 
- node_module 관련 경로를 다 지우고 다시 해봐라 
- node 버전을 올려라 
- 캐시를 지워라 
정도였던 것으로 기억됩니다.
안타깝게도 전부 저한테는 쓸모가 없었습니다. 

뭐가 문제일까 하다가 발견한 것이 Mac 환경에서 brew로 설치한 패키지들과 
설치된 경로를 알긴 어렵지만, 여튼 설치되어 있는 node 관련 패키지들이
서로 다른 경로에 있지만 후자가 우선순위를 갖게 되면서 문제처럼 보였습니다. 

사실 create-react-app 을 설치하기 전에도 
node의 버전이 brew에서 확인되는 것과 다르네? 하면서
/usr 하위에 만들어져 있던 심링크를 삭제했던 기억이 뇌리를 스쳤습니다. 

혹시 npx도..!?!?!?!?!

정답이었습니다. 
brew로 최신 버전의 npx를 설치했지만, 
이는 which npx 로 확인했을 때의 경로와 차이가 있었습니다. 

// #################### BEFORE
% which npx
/usr/local/bin/npx

// #################### AFTER
% which npx
/opt/homebrew/bin/npx

그렇습니다.
brew는 독립적인 생명체라, /opt/homebrew/bin 하위에 패키지를 저장하고 있었습니다.
원래 /usr/local/bin 경로에 있던 npx를 과감하게 삭제하니 모든것이 정상으로 돌아왔습니다!

% npx create-react-app test
Need to install the following packages:
  create-react-app
Ok to proceed? (y)
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /Users/nopd/dev/clonecoding_practice/test.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1365 packages in 47s

169 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 33 packages in 2s

169 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1398 packages in 1s

169 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created test at /Users/nopd/dev/clonecoding_practice/test
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd test
  npm start

Mac 환경에서 brew를 이용해서 node를 설치했고 
혹시나 pkg 를 다운로드받아 설치한 적이 있는 것 같은 기억이 있다면 
포스팅에 소개한 방법을 이용해 평안한 하루를 만드시기 바라겠습니다!

 

 

728x90
728x90

페이스북(Facebook)에서 최근 오픈소스로 공개하면서 다시 한 번 관심을 받고 있는 프레임워크가 바로 리액트 네이티브(React Native)입니다. 리액트는 웹 개발을 위한 프레임워크로 먼저 탄생되었지만 애플의 iOS 의 네이티브 앱 개발에 활용할 수 있도록 리액트 네이티브로 파생되면서 올해 초 큰 화제를 모았었습니다. Objective C 를 이용한 네이티브 개발이나 Swift 도 좋지만 이왕이면 익숙한 자바스크립트 기반으로 클라이언트와 서버를 모두 커버할 수 있다면 베스트가 아닐까 싶습니다.


리액트 네이티브를 이용해서 어느 선의 어플리케이션까지 개발할 수 있을지는 모르겠지만 일단 리빌드 없이 많은 수정 작업을 할 수 있다는 점이 분명 메리트라 보여집니다. 맥 환경에서 리엑트 네이티브를 이용한 개발환경을 꾸미는 방법은 리엑트 네이티브 공식 웹 사이트에서도 자세히 나와 있지만 이왕이면 동영상을 통해서 보시면 익숙하지 않은 분들께는 도움이 많이 될 것으로 보입니다.


리엑트 네이티브(React Native) 공식 웹사이트 살펴보기 [바로가기]




리엑트 네이티브의 공식 웹사이트에서 "Get started with React Native" 버튼을 누르시면 상세한 스텝 바이 스텝 설치 절차가 나옵니다. 리엑트 네이티브를 이용한 개발을 하려면 우선 Xcode 가 설치되어 있어야 합니다. 개발에 필요한 패키지 설치를 위해 Homebrew 를 이용하는 것을 권장하고 있으며 Homebrew 를 이용해서 node.js 와 watchman 을 설치하고 필요한 경우 JS Validation 프레임워크인 flow 까지 설치를 진행하면 됩니다 (flow 는 옵션) 실제 리엑트 네이티브의 패키지는 npm 을 이용해서 설치하게 되며 설치된 패키지를 이용하여 샘플 프로젝트를 생성할 수 있습니다.




개인적으로 이 과정을 거치는 동안 다소간의 이슈(?)가 있었는데요 대부분 권한에 대한 이슈들이었습니다. 로그인한 사용자 계정과 실제 패키지들이 설치되고 링크되는 폴더의 권한이 달라서 발생한 문제들이었습니다. brew 를 통한 인스톨이 좀 애로사항이 있었지만 권한에 대한 적절한 조절을 하고 나니 필요한 모든 과정이 문제 없이 진행되었습니다. 자세한 과정은 아래 첨부해드린 동영상을 한번 참고하시면 보다 쉽게 진행될 것으로 생각됩니다. 리엑트 네이티브로 시작하는 iOS 어플리케이션 개발의 세계로 빠져볼까요?




패키징 툴간의 충돌 문제 관련 참고 링크 [바로가기]

brew 를 통한 설치 과정에서의 퍼미션 이슈 관련 링크 [바로가기]



728x90

+ Recent posts