1. 프론트엔드 세팅 - Git/Github으로 React 개발 환경 세팅 | React & Flask Web app

■ React + Flask + GraphQL 웹 어플리케이션 프로젝트 전체 로드맵

React & Flask & GraphQL 웹앱 프로젝트 시작 🏁

---

■ Git repository 만들기

1. 새로운 Repository 만들기 

- Frontend와 Backend repository를 따로 만들 예정이다. 

지금까진 별 생각 없이 프론트엔드와 백엔드를 같은 repo에 넣었는데, 사실 배포하면서 각각 다른 repo에 있는 것이 더 효율적이고 편하다는 것을 깨닫고 repo 대 이동을 진행했었다. 🥲

 

 

2. Git Clone

- Git repository 주소를 복사하여 VSC 비주얼 스튜디오 코드에서 git clone 한다. 

- VSC 윈도우에서 Clone Git Repository.. 클릭 후 위의 주소 창에 github에서 복사한 주소 붙여넣기.

- 그리고 저장할 폴더를 선택한 후 Select Repository Location 클릭

■ React 리액트 시작하기 

React란?

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. "컴포넌트"라고 불리는 코드의 파편을 이용하여 복잡한 UI를 보다 간편하게 구축하도록 돕는다. (출처)

 

1. NodeJS & npm 설치하기

- 이 링크로 들어가면 설치할 수 있는 다운로드 링크가 나온다. 

설치 후, 제대로 설치가 되었는지 확인하기 위해 아래와 같이 버전을 확인할 수 있다. 

- npm은 리액트 앱을 만드는 데 필요한 기본적인 패키지를 제공해주는 플랫폼이다. 

$ node -v
v17.3.1
$ npm -v
8.3.0

 

2. 위에서 git clone 했던 폴더로 이동 후 리액트 설치하기

- npx 는 오타가 아님. npm 5.2+ 버전의 패키지 실행 도구.

$ cd projectName-frontend
$ npx create-react-app .

// 리액트 앱 실행해보기
$ npm start

- npm start 입력 후, 리액트 앱이 실행되면서 localhost:3000 주소의 창이 자동으로 뜬다. 그리고 돌아가는 리액트 로고가 보일 것이다.

 

3. 업데이트 된 파일 / 폴더들을 git commit 하여 github에 업로드하기

- VSCode에서 Terminal > New Terminal 클릭

- FYI, 좌측 사이드바의 세 번째 버튼 (Source Control)에서 업데이트 되었지만 github에 add 되거나 commit 되지 않은 내용들을 보여준다. 

- Terminal에서 git 명령어 입력

// 현재 변경된 내용들 확인
$ git status
// add 되지 않은 파일들은 다 빨강색으로 표시됨

// 변경된 모든 파일 (.)을 추가
$ git add .
// 이후 add 되지 않았던 모든 파일 이름들이 초록색으로 바뀌며,
Changes to be committed 의 목록으로 업데이트 된 걸 확인할 수 있음.

$ git commit -m "Create a react app"
$ git push

- Github 상에서 해당 repo를 새로고침하면 아래와 같이 'Create a react app' 커밋 메시지와 함께 업데이트 된 것을 확인할 수 있다.

References

• React 공식 문서
• react 설치 및 실행