[react.js]클론앱 활용하기 mangoplate cloneapp - #1

[react.js]클론앱 활용하기 mangoplate cloneapp - #1

 

사용 pc : m1 air

node 버전: v16.14.0

 

1. github에서 활용할 react로 만든 cloneapp 찾기

 

2. 괜찮은 cloneapp을 찾은 다음 repository fork

 

3. git clone 후 실행

내 디스크에 프로젝트 복사[git clone]

$ git clone https://github.com/{repository주소} {프로젝트이름}
 

npm install

$ npm install
 

npm start

$ npm start
 

 

 

4. trouble shoot

"npm install"시 에러가 뜬다.

에러를 따라가보면 아래와 같은 에러를 볼 수 있다.

npm ERR! code 1
npm ERR! path /Users/{사용자}/Projects/{프로젝트이름}/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js

 

4.1 에러 이유

이 프로젝트에 사용된 라이브러리 중 node-sass는 node 버전에 의존적이다.

사용된 node버전이 해당 node-sass버전을 지원하지 않기때문에 발생한 에러이다.

 

 

node-sass는 아래의 명령어로 확인할 수 있다.

$ npm list | grep node-sass
├── node-sass@4.10.0

이 프로젝트에 사용된 node-sass버전은 4.10.0 버전이다.

 

 

노드 버전 별 지원되는 node-sass버전은 아래와 같다.

NodeJS	Supported node-sass version	Node Module
Node 17	7.0+	102
Node 16	6.0+	93
Node 15	5.0+, <7.0	88
Node 14	4.14+	83
Node 13	4.13+, <5.0	79
Node 12	4.12+	72
Node 11	4.10+, <5.0	67
Node 10	4.9+, <6.0	64

출처(https://www.npmjs.com/package/node-sass)

 

 

그래서 이 문제를 해결하기 위해선 node버전을 낮추거나(node 11),

node-sass버전을 올려야 한다.(node-sass 6.0+)

출처(https://juntcom.tistory.com/167)

 

 

그러나 더 찾아보니 이제 node-sass는 사용하지 않는다고 한다.

node-sass대신 sass를 사용한다고 하니 sass를 설치해주자.

 

4.2  sass설치

4.2.1 node-sass 기존 버전 삭제 및 sass 새로 설치

# node-sass 삭제 후 sass 설치
$ npm uninstall node-sass 
$ npm install --save sass
 
# sass 설치 확인
npm list | grep sass
├── node-sass@npm:sass@1.54.6 extraneous
├── UNMET DEPENDENCY sass@^1.54.6
npm ERR! code ELSPROBLEMS
npm ERR! extraneous: immutable@4.1.0 /Users/{user}/Projects/mango-plate/node_modules/immutable
npm ERR! extraneous: node-sass@npm:sass@1.54.6 /Users/{user}/Projects/mango-plate/node_modules/node-sass
npm ERR! missing: sass@^1.54.6, required by fds-fastplate@0.1.0
npm ERR! extraneous: source-map-js@1.0.2 /Users/{user}/Projects/mango-plate/node_modules/source-map-js
 
npm ERR! A complete log of this run can be found in:
 

 

 

그렇다. 뭔가 에러가 나온다. 이 상태에서 npm start를 하면 node-sass를 설치하라고 나온다.

즉, sass를 설치했지만 인식하지 못하는 것이다.

 

이 문제를 해결하려면 node-sass가 설치된것처럼 속여야한다.

 

{프로젝트디렉토리}/package.json을 들어가보면 dependencies에 "sass":^1.54.6" 가 있을 것이다.

이것을 "node-sass": "npm:sass@^1.54.6" 로 바꿔준다.

 

그리고 npm start를 해준다.

 

4.3 npm start

 

성공했다.

 

이제 다음 스텝으로 넘어가보자.