react 윈도우에서 세팅 (VELOPERT님의 기초 입문 프로젝트)

React로 유명하신 VELOPERT님이 Fastcampus의 강의 자료를 정리하여 블로그에 올려주셨다. 기존에도 내용이 있긴 했었는데.. 따라하다가 결국에는 끝을 못본 슬픈 기억이 ㅠㅠ

간단히 todolist를 만들면서 ES6 감을 잡을겸 구글링을 하다가.. 무려 작년 크리스마스에 (!) 올리신 포스팅을 보고 무작정 따라하기 시작했다.

아마도 맥이나 리눅스 터미널 환경에서의 강좌인듯하다. 본인도 맥도 썼고(현재는 안씀..) 리눅스는 현재도 쓰는데. 윈도우가 쬐금 더 친숙해서인지.

아무튼 윈도우 환경에서 이 강좌를 따라하면서, 그리고 요즘 흔히말하는 MEAN이나 AMEAN 스텍에 완전 무지한 나와 같은 어린이들의 눈높이에 맞추어 원문 강좌글에서 필요한 요약정보를 약간 보충해서 올리게 되었다. (물론 거의 보잘 것 없음)

강좌에서 퍼오는 내용은 전혀 없이.. 쭉 따라가면서 막히는 부분을 군대군대 트랙백 하는 글이니.. 좌표만 남김.

React 내용 정리를 올리려고 만든 카테고리가 의아하게도 이런글이 될줄은 몰랐지만. 암튼. 시작함

쓰다보니 경어체가 되었는데. 그냥저냥 스르륵 읽어주시길 바람..

VELOPERT님의 강좌글 : https://velopert.com/3480

0. 시작하기

설치 : https://nodejs.org/ko/

본인은 먼 옛날에 nodeJS를 한다고 6버전이 깔려있었다. cmd에서 업데이트 방법이 있나 찾았지만 검색 능력부족인지 방법 없는듯함. 아무튼 OS에 맞는 버전 깔자.

간단한 실행 방법을 적자면 

시작 - 실행 - cmd  (혹은 명령 프롬프트? 를 관리자 권한으로 실행)

$ node --version 

-> node가 잘깔렸나 확인해본다. 버전이 나오면 잘 깔린것

보통 User폴더 이거나  Windows\System32 일텐데

$ C:\

$ mkdir dev

$ cd dev

$ mkdir react

$ cd react

정도로 해주자 

mkdir은 폴더 생성이고, cd는 신성한 그거를 뜻하는게 아니고    Change Directory로 디렉토리 변경이다.

즉 dev 폴더 만들고 경로 변경 react 폴더 만들고 변경한거다. 제대로 됫다면

C:\dev\react 여야 정상임. 안되면 처음부터

일단 yarn이라는걸 쓰라는데 깔아야한다. yarn을 깔으려면 npm 이라는게 필요하다.

npm은 nodeJS 깔릴때 기본으로 같이 깔린다. 참고로 npm은 Node Package Manager 라는걸로 말 뜻대로 노드의 패키지를 관리하는 녀석이다. 웹서버인 nodeJS의 패키지를 관리하는.. 자바 스프링으로 치면 Maven 같은애다. 검색하면 나온다.

그리고 yarn은 npm을 개선한 녀석이라고 한다. (방금전에 검색해서 찾아본거다.) 웃긴게 npm을 개선한 yarn을 깔으려면 npm에서 깔아야한다 (??)

암간에 우리는 npm에서 yarn을 깔을거다. 명령어는 다음과 같다.

$ npm install --global yarn

react-app 글로벌 설치를 하고 프로젝트를 생성하라고 적혀있는데. 명령어대로 하면 윈도우에선 절대로 프로젝트 생성이 안된다.

$ npx create-react-app todo-list

이렇게 해주면 된다. 맨 뒤에 todo-list가 프로젝트 명인데. 결국 todo-list로 프로젝트가 생성된다. (폴더가 생김)

yarn을 시작하라는데 프로젝트 폴더에 들어가서 안하면 죽어도 시작이 안된다.

그러니 경로 변경을 해야겠지.

$ cd todo-list

그다음에 yarn을 시작하면 서버가 구동되어 페이지를 만날수 있다.

요약

1. nodeJs 설치, dev\react 디렉토리 생성 
2. yarn 설치 $ npm install --global yarn
3. create-react-app 글로벌 설치 $ yarn global add create-react-app
4. todo-list 프로젝트 생성 $ npx create-react-app todo-list
5. todo-list 디렉토리로 이동 $ cd todo-list
6. yarn으로 프로젝트 시작 $ yarn start 

자 이제 예제를 따라가봅시다~!