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

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

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

이 튜토리얼은 트렐로(Trell0) 앱의 가장 기본적인 기능들(보드, 리스트, 카드)을 리액트(React), GraphQL(Apollo)Flowtype(자바스크립트 타입 지원 라이브러리)을 이용해 구현해보는 것이다. 이를 통해 React와 GraphQL 그리고 Flowtype을 실제 기본적인 앱을 만들어 보면서 배울 수 있을 것이다. 

이 트렐로 클론 튜토리얼은 여러편으로 구성 될 예정이다. 이번 1편 - 소개에서는 프로젝트의 소개, 스택, 구성과 프로젝트 기본 세팅에 대해서 다룰 것이다. 이 튜토리얼은 적어도 일주일 단위로 1편 이상은 업데이트 하도록 하겠다.

튜토리얼 대상

이 튜토리얼은 리액트에 대한 기본 개념을 알고 있는 분 중에서 GraphQL과 자바스크립트의 타입 시스템에 대해 관심을 가지고 있는 분을 대상으로 한다.

우리가 다루는 것

트렐로의 기능은 방대하므로 이 튜토리얼에서는 가장 기본적인 기능(보드, 리스트, 카드)을 리액트와 GraphQL을 이용하여 구현 하는 방법에 대해 집중 할 것이다. 

아래는 우리가 집중 적으로 다룰 것에 대한 리스트이다:

  • HOC(Higher Order Component) 생성
  • Container / Presentation 컴포넌트를 통한 컴포넌트 분리 방법
  • GraphQL - Schema, Query, Mutation
  • GraphQL 페이징 처리
  • GraphiQL 사용법
  • react-apollo의 다양한 API 사용
  • graph.cool 서비스 사용법
  • Flow를 이용한 리액트 컴포넌트 타입 정의
  • Flow를 이용한 GraphQL 타입 정의

우리가 다루지 않는 것

이 튜토리얼에서는 아래의 리스트는 다루지 않는다:

  • 이론적인 부분(왜 React, GraphQL, Flowtype을 써야 되는지, 장단점 등등)
  • CSS (css-in-js)
  • Relay
  • GraphQL 서버 구성
  • Webpack
  • Redux
  • React Router
  • SSR (Server Side Rendering)

트렐로 클론 앱 스택

이 트렐로 클론 앱의 전체적인 스택은 아래처럼 구성 할 것이다:

클라이언트:

웹팩을 통한 리액트 앱 생성은 이번 튜토리얼 스코프에서 벗어나기 때문에, 리액트 앱의 구조는 create-react-app을 통해 설치 하도록 하고, UI에 대한 부분도 material-ui를 사용하여 ui 적인 부분에도 집중하지 않도록 하겠다. 큰 틀안에서 자바스크립트에 타입 시스템을 적용 할 수 있는 방법은 TypescriptFlowtype이 있는데, Flow를 사용해서 타입을 정의 하도록 하겠다. 리액트 라우터(React Router 4)와 Material UI는 사용은 하겠지만 사용법에 대해서는 굳이 다루지 않겠다. 

서버:

  • Graph.cool - GraphQL 백엔드 서비스 제공
  • Auth0 - 사용자 인증 서비스 제공  
  • Firebase - 스태틱 사이트 디플로이 서비스 제공

파이어베이스(Firebase)를 이용해서 스태틱 사이트로 디플로이 할 것이고, 인증(로그인/회원가입)은 Auth0을 사용 할 것이다. 그리고 GraphQL 서버는 graph.cool 서비스를 이용 할 것이다. graph.cool은 GraphQL 백엔드를 제공하는 서비스로써 여기서 GraphQL 스키마 생성 데이터 관리를 하게 됨으로 이 서비스에 대해서는 자세하게 설명 할 것이다. 

자, 이제 프로젝트 세팅을 하고 이 글을 마무리 하도록 하자.

프로젝트 세팅

먼저 create-react-app을 통해 리액트 앱을 초기화 한다. 여기서 패키지 매니저는 npm 대신 yarn을 사용 하도록 하겠다(npm을 사용해도 상관 없으니 편한 패키지 매니저를 활용 하도록 하자): 

create-react-app trello-clone

create-react-app이 설치 되어 있지 않다면:

yarn global add create-react-app

설치가 완료되면:

cd trello-clone && yarn start

위와 같은 화면이 나온다면 문제 없이 설치가 된 것이다.

기본적인 설치가 완료 되었다. 이제 프로젝트를 위해 필요한 기본적인 패키지들을 설치 해보자.

yarn add react-apollo react-router material-ui@next flow-bin

자, 베이스로 필요한 패키지를 설치 했다. 

이제는 클라이언트 폴더 구조를 잡아 보도록 하자.

create-react-app으로 앱을 만들면 기본적으로 src 폴더와 public 폴더가 생성되는데, 우리가 작성할 코드는 모두 src 아래에서 만들 것이다. public 폴더는 이미지, favicon 등의 스태틱 파일들이 위치하는 곳이다. 기본적으로 추가되는 src 안의 파일들(App.js, App.css 등등..)은 모두 제거 한다. registerServiceWorker.js도 지워도 상관없다.

폴더 구조

폴더 설명:

  • components - 리액트 컴포넌트가 추가되는 곳이다.
  • containers - 대부분의 비지니스 로직과 graphql 데이터 핸들링 등을 처리하는 파일들이 추가되는 곳이다.
  • hocs - HOC(Higher Order Components)가 추가되는 곳이다.
  • util - 리액트와 무관한 유틸성 파일들이 추가되는 곳이다.

기본적인 프로젝트 세팅을 마쳤다. 다음편에서는 graph.cool 소개와 사용법에 대해서 알아보고, 본격적으로 코딩을 해보도록 하자!


리뷰