[React] React 프로젝트 만들기 (CRA)

React로 관리자 사이트를 만들게 되어, 기록할 겸 남겨보기로 합니다. 

실제 프로젝트를 공유할 순 없으니, 실 프로젝트를 하면서 겪은 내용들을 테스트 프로젝트에 풀어내 볼 계획입니다.

(계획대로 될지는.... 모르겠습니다. ) 

 

[ 작업자 환경 ]
* Window 사용
* Git : 2.37.1 버전
* Node.js : 18.11.0
* 에디터 : WebStorm 

 

1. 프로젝트 생성 : sosohanya-react-admin

1-1. 프로젝트가 생성되길 원하는 디렉토리로 이동 ( 예: c:\project\react )

1-2. 우클릭 > Git Bash 열기 (또는 명령 프롬프트열고 해당 폴더로 이동)

1-3. 프로젝트 생성 명령어 실행(CRA) : `npx create-react-app sosohanya-react-admin`

 

1-3 : CRA 명령어 실행

 

2. 생성된 sosohanya-react-admin 프로젝트 열기

WebStorm > File > Open > 생성된 sosohanya-react-admin 디렉터리 선택 > OK

(또는 본인이 사용하는 에디터)

 

3. 생성된 프로젝트 실행하여 확인

3-1. 하단의 Terminal 선택 (프로젝트 디렉토리의 git bash 또는 명령어 프롬프트 이용해도 됨)

3-2. 명령어 실행 : `npm start`

3-3. 브라우저에 http://localhost:3000 가 열리고 페이지 확인 

 

좌) 3-2. 명령어 실행, 우) 3-3 : 실행 결과

 

4. GitHub에 올리기 

4-1. CRA 시 최초 커밋은 되는 것으로 보임 
- 따로 처리한 내용 없이, 하단의 Git 선택하여 확인하면 'Initialize project using Create React App' 이 존재함 

- 최초 커밋이 GitHub에 공유되지 않은 상태로 로컬 컴퓨터에서만 커밋된 상태 

 

4-1 : git commit 내용 확인

4-2. 위 상태에서 GitHub에 프로젝트 공유

   : Git > GitHub > Share Project on GitHub > 연결된 github 확인 후 > [Share] 
     (Setting > Version Control > GitHub에 계정 추가가 필요 )

4-3. GitHub에 올라간 것을 확인 : https://github.com/sosohanya/sosohanya-react-admin

좌) 4-2: GitHub 연결 / 중) 4-2 : 계정 추가 화면 / 우) 4-3 : GitHub 확인

 

 

2022.07.31 - [React] React 프로젝트 만들기 (CRA)

2022.08.14 - [React] Layout 분리 전, 샘플 페이지 작성

2022.08.21 - [React] Layout / Contents 컴포넌트 분리

2022.10.25 - [React] Modal Popup 처리 (ReactDOM.createPortal)