1편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 프로토타입

참고: 이번 튜토리얼을 진행 하기 위해 진행 되는 코드를 깃헙에 업로드 해놨으니, 이 튜토리얼을 진행하고 싶다면 아래에서 소스를 클론 받은 후 아래의 내용을 따라가기를 추천 드립니다.
이전 편:

  • 0편: React + GraphQL + Flowtype으로 트렐로 클론 웹앱 만들기 - 소개

튜토리얼 소스:
https://github.com/simsim0709/react-apollo-flow-trello-clone/tree/ch-1
소스 클론을 받은 후, 앱을 실행 한다.
yarn을 사용 한다면,
yarn install && yarn start
npm을 사용 한다면,
npm install && npm run start
앱을 실행 하면 아래의 화면이 보일 것이다.

presentation


지금 소스는 모두 하드 코딩 되어 있는데, 이 부분을 앞으로 하나씩 graphql 데이터와 연결, 이벤트 처리, flow type checking을 해나가는 과정이 될 것이다.
소스상에 복잡한 부분은 아직 없기 때문에 소스 설명은 제외하고, 앱 구조와 환경 설정에 대해서 알아 보도록 하겠다.

.env 파일

먼저 .env 파일에 대해 알아보자. (create-react-app에 익숙 하다면 넘어가도 상관 없다.)
.env 파일은 환경 변수를 저장 하는 파일이다. 여기서 설정한 변수를 javascript에서는 process.env로 접근 하여 사용 할 수 있다:
render() { return ( <div> <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small> <form> <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} /> </form> </div> ); }
HTML에서 사용 할 땐 아래와 같이 사용 하면 된다:
<title>%REACT_APP_WEBSITE_NAME%</title>
.env에 변수를 추가 할 때 주의할 점은, NODE_ENV, NODE_PATH, PUBLIC_URL 등을 제외한 변수는 REACT_APP_ 로 시작해야 된다는 것이다.
src/pages/MainPage.js를 열어 보면 아래와 같이 components 폴더를 절대 경로로 import 한 것이 보인다. 이 부분 역시 .env파일에 NODE_PATH 변수를 설정 해주는 것으로 활용 할 수 있다. 이렇게 .env 파일에 NODE_PATH=./src 로 설정하면 src 하위에 폴더를 절대 경로로 인식하게 된다.
import Page from 'components/Page'; import Container from 'components/Container'; import Item from 'components/Item'; import BoardItem from 'components/BoardItem';
.env 파일은 또한 로컬, 개발, 프로덕션 등으로 나눠서 사용 할 수도 있다. 이 부분의 자세한 내용은 여기서 확인하자.
우리는 추후에 .env.local과 .env.production 파일을 추가 할 것이다. 이 부분은 나중에 graph.cool endpoint, google analytics id 등을 개발/프로덕션 서버를 나눠서 사용 할 때 사용 하기 위함이다.
.env 파일 관련하여 추가적인 부분은 여기에서 확인 할 수 있다.

앱 구조

  • components - presentational 컴포넌트가 저장 되는 곳이다.
  • containers - container 컴포넌트가 저장 되는 곳으로, 우리는 주로 여기서 graphql 데이터 요청과 처리를 하는 컴포넌트가 추가 될 것이다.
  • pages - 주로 변경된 라우트에 따라 다른 페이지를 보여주기 위한 컴포넌트가 저장 되는 곳이다.
자, 기본적인 앱의 프로토타입이 완성 됐다. 이제 다음 편에는 graph.cool 백엔드 서비스를 사용하여 graphql schema를 만들어 볼 것이다. 그 후, 이를 우리의 앱과 연결하여 graphql을 다루는 기본적인 부분에 대해서 다루도록 하겠다.
읽을 거리: