리액트 프로젝트를 시작할때 첫 셋팅과 진행방법을 정리해서 포스팅하려고 한다.
우선 git / Node JS / npm / yarn 설치가 되어있어야한다.
* git 설치 확인
git --version
* Node JS 설치확인
node -v
* npm 설치 확인
npm -v
* yarn 설치 확인
yarn -v
1. React 프로젝트 만들기
yarn create react-app 프로젝트명
- VScode를 열어서 터미널에 이 명령어를 넣는다.
BUT!! 제대로 했는데 혹시나 이런 오류가 뜬다?! ( 뭐하나 한방에 되는게 엄숴.. )
Error Couldn't find a package.json
영어에 당황하지 말자, 이제 영어에 더 이상 쫄면 안된다.. 익숙해져야한다......
해석해보면 package.json이 없어서 그렇다.. 그럼 package.json을 깔아주면 된다.
npm init / yarn init 둘 중 하나 넣어주자.
그럼 갑자기 또 나에게 질문을 투척한다...(부글부글)
차분히 이름과.. 뭐..설명과..그런것들 적으면 된다.
흠.. 귀찮지만 영포자들을 위해 아래에 무엇인지 알려주겠다..
* name : 프로젝트 명(기본폴더명)
* version : 프로젝트 버전 (default 1.0.0)
* descrition : 수행할 작업 내용
* entry point : 첫 실행 위치
* repository url : 저장소 위치
* author : 작업자 (프로젝트면 팀 명)
* license : 라이센스 여부
* private : 공개 여부
뭐..근데 이런 응답이 귀찮으면 그냥 npm init --force / yarn init --force 넣으면 된다..ㅋ
아니 뭐.. 원칙을 아는건 좋으니깐....
짜잔!!
그럼 요런 귀여운 package.json 녀석을 맞이하게 된다.
자, 다시 그럼 프로젝트 생성을 위해 yarn create react-app 프젝명 실시!!
그럼 test라고 프로젝트 명으로 지정한 리액트 프로젝트 셋팅이 완성되었다.
프로젝트가 생성되면서 터미널창에 yarn 명령법이 나온다.
* yarn start
- 우리가 작성한 코드를 직접 확인해 볼 수 있게 실행한다.
* yarn build
- 실행하지는 않고 만든 앱을 배포할 수 있게 빌드하는 것.
* yarn test
- 우리가 작성한 유닛 테스트를 실행해서 테스트를 성공했는지 실패했는지 실행시켜준다.
* yern eject
- create-react-app 에는 많은것들이 자동적으로 설정되어있고 숨겨져있는데 어떤 툴이 설치 되었는지 열어볼 수 있다.
한번 열면 다시 포장이 안되기때문에 정말 필요해서 세부적으로 설정해야할때만 사용하기.
자, 그럼 yarn start를 입력해서 로컬로 리액트를 확인해보자.
'프론트엔드 > React' 카테고리의 다른 글
React에서 모듈화된 className 조건2가지 만들기 with module.scss (0) | 2023.03.13 |
---|---|
[React] 폰트어썸(fontAwesome) 설치 및 사용 (feat.yarn) (0) | 2023.02.02 |
[React] yarn으로 프로젝트에 Router (리액트라우터) 설치 및 사용 (0) | 2023.01.31 |
프론트앤드 React <a>태그 사용시 나타나는 오류 해결하기 (6) | 2021.06.30 |
react 리액트 command 명령어 종류 모음 (0) | 2021.03.10 |