사전 준비
react를 시작하기 전에 사전 준비 작업이 필요합니다.
nodejs
nodejs가 필요합니다.
nodejs가 깔려있는지 확인하기 위해서는 아래의 방법으로 확인하면 됩니다.
nodejs 확인
node -v v15.11.0
만약 node -v 를 입력해도 아무것도 뜨지 않는다면 nodejs 를 설치하고 와주세요.
npm
npm(Node Packaged Manager)
node 안에 있는 패키지들을 관리 해주는 툴이다.
npm 확인
npm -v 7.6.0
npx
npx는 npm 5.2.0때부터 만들어 졌다.
npx 확인
npx -v 7.6.0
React 만들기
create-react-app
create-react-app(CRA)란 리엑트를 개발 할 수 있는 기본 구조와 설정을 자동으로 해주는 도구이자 명령어입니다.
이제 create-react-app을 사용하여 기본 리엑트 파일을 만드는 법을 알아보겠습니다.
npx create-react-app [파일이름]
npx create-react-app testfile
npx create-react-app 을 실행 해주고 뒤에 자신이 새로 만들 리엑트 파일이름을 써주면 됩니다. 위의 예시로는 testfile 이라는 이름의 리엑트 파일이 만들어 집니다.
React File
그러면 react file이 나올것입니다.
그 파일을 키면 아래와 같은 구조를 보실 수 있으실 겁니다.
위 그림처럼 파일이 보여진다면 리엑트 기본 설정을 성공 하신 겁니다.
Yarn
react 를 실행 하기에 앞서 yarn 이란것을 다운 받아 줘야 됩니다.
yarn 이란 npm과 같은 js 패키지 매니저입니다.
근데 npm과 차이점은 yarn이 속도와 안전성에서 조금 더 우수하다는 점이고 그래서 yarn을 많이 사용합니다.
yarn 설치
npm i -g yarn위 코드로 yarn을 깔아주시고 잘 깔렸는지 확인을 해보겠습니다.
yarn -v 1.22.10
위처럼 버전이 뜬다면 yarn 이 제대로 깔린 것입니다.
React 실행
이제 react를 실행 해볼 건데 파일 중에 package.json을 보면
위와 같은 부분이 있습니다.
start 라는 명령어를 이용하여 react를 실행 합니다.
react 실행
yarn start
yarn start를 치면 화면이 열릴것입니다.
이런 화면이 나오면 성공한것입니다.
이렇게 된다면 리엑트 기본 설정이 끝이 났습니다.
