[React] 개발환경 만들기

생활코딩 : 리액트 편을 보고 작성한 게시글입니다.

 

React사용의 장점 

Component를 이용한...

• 가독성
• 재사용성
• 유지보수

*Component : react를 이용한 사용자 정의 tag

 

기본환경 만들기

 

1. node js 설치 

nodejs.org/ko/

Node.js

설치가 되었는지 확인

Terminal

npm -v

 

2. Create React App설치

sudo npm install -g create-react-app

 

설치 완료 확인

create-react-app -V

 

3. 작업환경 설정

    1_원하는 곳에 폴더 하나 만들기

    2_

//개발환경으로 만들 폴더로 이동
cd 원하는 폴더의 경로

//개발환경으로 만들기
create-react-app .

 

작업환경이 만들어진 모습

 

4. VS Code에서 실행시키기 

//vscode의 terminal창

//작업환경을 만들어놓은 폴더로 이동
cd 폴더경로


//시작
npm run start

 

 

성공시 

개발 상황을 확인할 수 있는 링크 2개

 

 

//종료 
CTRL + C 

 

 

 

참고영상 

생활코딩 

• React - 1. 수업소개
• React - 2. 공부 전략
• React - 3. 개발환경의 종류
• React - 4 npm을 이용해서 create react app 설치
• React - 5. create react app을 이용해서 개발환경 구축 

youtu.be/XMb0w3KMw00

 

 

 

 

+)추가 2021.01.17

 

위에서 사용했던 방법에 문제가 생겼다... 

4.0.0버전에서 global을 더이상 지원 어쩌구저쩌구.. 오류 메세지가 떳는데 캡쳐하는걸 잊었고 

오류가 해결되어서 더이상 캡쳐할 수 없게되었다 

 

yarn이라는 것을 설치하면서 해결되었다.

 

VELOPERT.LOG 라는 블로그 글을 보고 해결하였다 

 

1. bash command 

nvm으로 node.js를 설치한 경우 yarn 을 사용하기 위해서 사전에 커맨드를 입력해야 하다고한다.

# macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile

 

2. yarn global 

yarn global add create-react-app

yarn을 이용하여 설치 

 

3. 원하는 이름으로 생성 

create-react-app 원하는 폴더명

 

4. 생성한 경로로 이동 

cd 생성한 폴더의 경로

 

5. START 

yarn start

 

 

근데 이렇게 실행하고나니까 

2020/11/17 - [WEB/React] - [React] 개발환경 만들기

이 방법으로 생성하는 것도 다시 되더라...

이건 제대로 잘 기억이 안나지만 global은 항상되는거였고 다른게 실행할때마다? 되는거였는데 내가 그 다른버전을 설치했다가

글로벌로 갈아타서인가? 이에 대해서는 나중에 한번 더 알아봐야겟다 

 

 

참고 사이트

velopert.com/3621

누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기 | VELOPERT.LOG