React - 2 [create-react-app]

npx create-react-app [project app name]

- npx는 npm의 레지스트리 과정을 압축시켜주는 명령어인데, create-react-app 이라는 명령어 또한

마찬가지이다.

 

2016년도 이전에는 react앱을 만들기 위해서 다양한 과정을 겪어야 했다.

react는 굉장히 멋진 코드를 만들어 냈지만 웹브라우저가 이를 이해하지 못했던 것으로

react코드를 webpack, babel 을 다운로드 해서 컴파일하고 다른파일에 넣고 과정이 길었다.

 

하지만 이러한 지저분한 과정을 단 하나의 명령어로 끝냈다. create-react-app

 

내가 앱을 만들 부모 디렉토리에서 위 명령어를 실행하면된다.

시간이 약간 소모가 된다.

시간이 걸린다음 react app이 성공했다는 소리가 들린다.

이제 visual studio code 에디터로 들어가서 프로젝트를 열어보자.

 

visual studio code 에디터를 설치하면 두가지로 파일을 열수있는데

1. 에디터 안에서 직접 파일을 여는 경우

 

2. 명령어로 여는경우 

둘다 열려진다.

 

package.json에서 test와 eject는 제거한다. start와 build만 필요하다 (왜 그런지는 후에 재수정하겠음)

그리고 yarn도 어차피 npm이기 때문에 삭제하겠다.

 

비주얼 스튜디오의 좌 하단의 x 와 !표시의 영역을 누르면 터미널 명령어를 입력할수 있는 공간이 생긴다.

여기에 npm start 명령어로 react앱을 실행시켜 보자.

 

npm start

visual studio와 git bash에서 npm start를 해도 되질 실패해서 cmd에서 해봤는데 됐다..

앱 실행할때 port번호를 주는데 이때 와이파이에서 다른 사용자가 내 할당되는 포트로 접근이 가능하게 설정을 해줘야

npm start가 되는 것 같다.하;;

 

 

내 컴퓨터에서 실행할때는

http://localhost:3001

핸드폰이나 다른기기로 같이 연결된 와이파이로 react앱에 접근할려고 한다면 

http://192.168.219.101:3001

이렇게 접근하라는 이야기이다.

 

 

vscode에서 실행시키고 싶어 react앱을 통채로 삭제하고 다시 만들어 실행시켰더니 된다.

멋지게 핸드폰에서도 성공!

 

이제 github에 올려보자

 

 

잘 올라갔다.