[React-NodeJs-MySQL 프로젝트 세팅(restAPI+GraphQL)] (2) client : React 환경 세팅 - CRA, Router설정

Client는 React로 기본 구성하였다

CRA를 통해 간단히 틀을 생성하고, 기본적인 페이지를 구성해보겠다.

 

1) CRA

 

yarn add create-react-app을 통해 기본 프로젝트를 세팅한다

 

client의 구조는 크게 apollo-pages-router로 설정하였다.

apollo 폴더 : 추후 apollo client 세팅에 필요한 코드들

router 폴더 : 기본세팅에선 진행하지 않지만 향후 필요한 권한처리나 상태관리를 위해 폴더로 묶음

pages 폴더 : 우리가 만들 client page들

 

 

2) Router 설정

 

router폴더는 Router 코드를 가지고 있다.

react-router-dom을 이용하여 라우터를 관리한다.( 설치 필요)

전체 라우터는 BrowserRouter로 묶어내고,각 라우터에 우리가 필요한 페이지들을 렌더링해준다.

restAPI 테스트를 위한 RestAPITest 컴포넌트와, graphQL 테스트를 위한 Test 컴포넌트 라우터를 만들어주었다. 

 

해당 Router 파일은 app.js에서 import해준다.

(ApolloProvider는 추후 Apollo client 설정시 다시 설명하겠다)

 

 

3) 기본 page 작성

 

기본세팅 프로젝트에서 작성할 페이지는 Home, RestAPITest, GraphQLTest이다.

page들은 pages 폴더내에 각 개별 폴더들을 갖추고 있는데, 이는 추후에 사용할 graphQL query를 page별로 묶기 위함이다.

각 페이지들의 상세 구성은 6,7장에서 이어서 진행하겠다.

일단은 3가지 페이지 모두 간단한 string만 리턴하여 url에 따른 라우팅이 제대로 되는지 확인하자