React 프로젝트 초기 세팅

폴더 구조 depth 주의

아래와 같이 만들수 있지만, clone 해온 repository 폴더 내에 CRA로 초기세팅을 진행하게 될 경우 내부에 프로젝트 폴더 하나가 더 추가되어서 이런식으로 depth 가 하나 더 생기게 된다.

test/

test/custom-component/

이렇게 폴더 안에 한번 더 들어가야 코드와 관련된 파일 및 폴더가 나오는 구조는 기본적으로 좋지 않다.

 

1. CRA로 프로젝트 폴더 생성
2. git init 으로 해당 프로젝트 폴더를 repository로 지정
3. github에서 repository 생성
4. git remote add 를 통해 해당 repository를 내 프로젝트의 remote repository로 지정
5. commit 및 push

 

이러한 과정을 거쳐 Github에 프로젝트를 depth를 깊지 않게 만들면서 깔끔하게 올려 버전 관리를 할 수 있다.

---

1. node와 npm 설치 확인

설치버전 확인

node -v
npm -v

• node : 없을 시 https://nodejs.org/en/ 에서 설치
• npm : 없을 시 npm install 진행 후 특정 패키지를 설치할 때는 npm install
• scss : 없을 시 npm install sass

 

2. React 프로젝트 생성

해당 위치에 react-practice 라는 이름으로 하위폴더가 생성된다.

npx create-react-app react-practice

다른 방법

• create-react-app 설치

npm install -g create-react-app

• create-react-app 설치확인

create-react-app -V

설치됐을 경우 버전이 뜬다.

• React 프로젝트를 생성할 경로로 이동 후 명령어 실행

create-react-app .

 

3. React 구동

터미널에서 실행하여 잘 구동되는지 확인한다.

npm start

 

 

 

출처/참고

• https://velog.io/@sangjin42/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%B4%88%EA%B8%B0%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0
• https://yeri-kim.github.io/posts/react-router/
• https://velog.io/@carmine/TIL-210727-Wanted-Pre-Onboarding-1st-Day