도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

1편: 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

앱을 실행 하면 아래의 화면이 보일 것이다.


지금 소스는 모두 하드 코딩 되어 있는데, 이 부분을 앞으로 하나씩 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을 다루는 기본적인 부분에 대해서 다루도록 하겠다.


읽을 거리:


리뷰