[Hello, React!] Trouble Shooting - Sandbox 코드 VScode에서 실행하기

 

Hello, React

샌드박스에서 React 코딩을 하다가 VScode로 복사 해왔는데, 몇가지 오류를 경험하고 해결 과정을 기록해둔다.

 

1. npm start 가 안될 때

PS C:\Users\workspace\react-hooks\src> npm start

> react@1.0.0 start
> react-scripts start

'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

해결 방법 

npm install -save react-scripts

해당 명령어를 실행하면 node_modules를 폴더가 생기면서  npm start가 가능해진다. 

 

2. Manifest: Line: 1, column: 1, Syntax error. 오류

해결 방법

index.html 파일을 열어 아래와 같이 상대경로를 수정해준다.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

=> <link rel="/manifest" href="%PUBLIC_URL%/manifest.json" />

참고로, manifest.json 파일은 해당 React 앱이 안드로이 홈 스크린에 추가될 데 메타정보를 제공한다고 한다. (주석 참고: manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ )

 

2. ETC. npm ERR! code EJSONPARSE

npm ERR! code EJSONPARSE
npm ERR! path C:\Users\tosk3\workspace\react-hooks/package.json

 

해결 방법

뭐 명령어만 입력하면, 자꾸 Json 파싱이 안된다는 것이다. 알고보니 정말로 json 파일에 ","가 남아있었다. 

잘 생각해보니 sandbox에서 코드를 받아서 typescript관련 설정을 지우면서 (나 타입스크립트 안쓸건데?? 하면서 지워버림..ㅎㅎ) "," 지우는 것을 빼먹은 것이다. 

 

 

Reference

https://codesandbox.io/

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

https://anerim.tistory.com/209

[react Error] Manifest: Line: 1, column: 1, Syntax error.