Underline

ReactJS 연습을 위한 일일 커밋 프로젝트입니다. 아주 소소하고 사사로운 개인 프로젝트입니다. 책을 보다 밑줄을 긋고 싶은데 책이 훼손되는것을 싫어한 나를 위해 텍스트로 저장할 수 있는 도구입니다. 좀 더 설명을 하자면, 유저스토리북 이라는 서비스를 좋아하고 사용하고 있습니다. 유저스토리북은 내가 읽고 있는 책, 소장한 책들, 그리고 그것들에 대한 메모와 밑줄, 더불어 책을 둘러싼 관계들을 만들어 갈 수 있는 서비스입니다. 그런데 유저스토리북의 여러 기능중에서 제가 거의 유일하게 사용하는 기능이 밑줄긋기입니다. 그래서 평소에 밑줄긋기에만 집중된 앱을 만들어보고 싶었습니다. 말하자면 유저스토리북의 자식이라고 볼 수 도 있겠네요.

목표

매일 한 줄 이상 커밋을 합니다.
혼자 쓰더라도 실제로 작동되는 서비스로 만드는것이 목표입니다. 뭐 혼자 쓰더라도 괜찮습니다. 어차피 상당히 개인적인 도구일 것이기 때문입니다.
리액트 + 리덕스를 능숙하게 다룰 수 있기를 희망합니다. 좀 더 욕심을 부린다면 React Native ...
어느정도 구조적인 완성도가 마련된 이후에는 private 공간에서 커밋을 이어갈 예정입니다.(2017.7.18 이후로는 private한 공간에서 코딩을 이어가고 있습니다.)

관련기술

create-react-app

빌드 구성에 신경쓰지 않고 매우 빠르게 리액트 기본앱을 시작할 수 있도록 도와줍니다. 많이 쓰는 의존성 도구들이 내장되어있습니다. 요약하면,

webpack with webpack-dev-server, html-webpack-plugin and style-loader
Babel with ES6 and extensions used by Facebook (JSX, object spread, class properties)
Autoprefixer
ESLint
Jest
and others.

Redux

데이터 처리는 Redux를 사용합니다. 전통적인 데이터 모델인 MVC 모델이 리액트에는 적합하지 않아 페이스북에서 대안으로 만든 모델이 Flux입니다. Redux는 Flux의 다양한 구현체 중 하나입니다.

Router

라우터는 React-router4를 사용합니다. 4베타를 사용하다가, 얼마전 4 정식버전이 나와서 업그레이드 했습니다. 하는 김에 firebase 로그인과 함께 구현한 샘플(react-router-firebase-auth)을 참고했습니다. 리액트 라우터4에 대한 다양한 예제코드는 ReactTraining을 참고하는게 좋습니다. 정말 자료들은 무궁무진합니다.

폴더구조

처음에는 create-react-app의 기본구조에서 velopert 님의 강의에서 소개하는 구조를 바탕으로 시작했습니다. 아래와 같은 형식이었습니다. 가장 일반적인 구조가 일듯 싶습니다. Redux Book도 비슷한 구조를 하고 있습니다.

  my-app/
    README.md
    index.js
    logo.svg
    node_modules/
    package.json
    .gitignore
    public/
      favicon.ico
      index.html
    src/
      actions/
        ActionTypes.js
        index.js
      components/
        App.js
        Component.js
      reducers/
        component.js
        index.js
      css/
        app.css

이 구조의 단점은 조금만 개발이 진행되면 Component들이 급속히 많아진다는 것입니다. 그리고 한 컴포넌트를 수정하기 위해서 네 개의 폴더(actions, components,, reducers, css)에 걸쳐있는 파일들을 찾아 열어야 합니다. 그래서 marmelab에서 이런 단점을 극복할 수 있는 구조를 제안했습니다. 저도 점점 규모가 커지면서 새로운 구조로 바꾸었습니다. 아래와 같습니다.

my-app/
  README.md
  index.js
  logo.svg
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    app/
      style/
        Base.scss
        Header.scss
      test/
        App.test.js
        Header.test.js
      App.js
      Header.js
      reducers.js
      routes.js
      Sidebar.js
    command/
      style/
        Command.scss
      test/
        Command.test.js
        CommandList.test.js
      Command.js
      CommandContainer.js
      CommandActions.js
      CommandList.js
      CommandItem.js
      CommandHelper.js
      CommandReducer.js
    product/
      style/
        Product.scss
      test/
        Product.test.js
        ProductList.test.js
      Product.js
      ProductContainer.js
      ProductActions.js
      ProductList.js
      ProductItem.js
      ProductImage.js
      productReducer.js
    user/
      style/
        User.scss
      test/
        User.test.js
        UserProfile.test.js
      User.js
      UserContainer.js
      UserActions.js
      UserProfile.js
      UserAvatar.js
      userReducer.js

marmelab는 더 나아가 help나 테스트 코드도 컴포넌트별로 한 폴더에 넣는것을 권장합니다. 위 예시는 제가 나름대로 변형하여 사용하고 있는 현재 방식입니다. 최근에 스타일과 테스트 코드를 폴더에 언더바를 붙여서 폴더링 했습니다. 물론 이 글도 이미 1년이 더 지난 글이기 때문에 그 사이에 더 좋은 방법이 소개되었을지도 모르겠습니다. 아무튼 꽤 괜찮은 방법인것 같아 규모가 더 커지기 전에 빨리 바꾸었습니다.

BEM + SCSS

CSS 전처리기는 SCSS를 사용하고 있습니다. create-react-app에서는 SCSS 로더를 설치하여 사용할 수 있는 방법을 제공합니다. node-sass 패키지와 npm-run-all 패키지를 함께 사용하면 src폴더 안의 모든 scss를 watch하며 변경시 자동으로 css로 변환됩니다.

BEM은 CSS의 작명법 중 하나입니다. 모듈화하기 좋아서 SASS와 리액트와의 궁합이 좋아 선택하게 되었습니다. BEM + SCSS를 도입하면서 기존의 Bootstrap 의존성과 코드들은 제거했습니다.

Grid는 자주 사용할 것 같아 가벼운 Simple-Grid 라이브러리를 가져다 썼습니다. 문서도 잘되어있고 287줄의 css정도니 가볍습니다. SCSS로 직접 만든 유틸과 통합해서 압축하면 어설프게 직접 구현하는것보다 낫다고 생각했습니다.

firebase

리액트를 공부하고자 하는 목적이 큰 프로젝트이므로 서버사이드의 비용을 최소한으로 하고자 인증과 디비, 비즈니스 로직을 한번에 해결할 수 있는 firebase를 도입했습니다. 아까 언급했듯이 라우터와도 궁합이 나쁘지 않습니다.(react-router-firebase-auth)

Testing : enzyme + mocha

enzyme은 리액트 테스팅을 위한 자바스크립트 유틸리티입니다. jQuery의 Dom 조작 및 탐색과 흡사한 모양새를 갖추고 있어 사용이 직관적이고 유연합니다. assertion library는 테스트 프레임웤으로 mocha가 내장되어있습니다. 추가적인 assertion 스타일로 chai를 사용할 수 있도로 지원합니다. 물론 다른 테스트프레임웤이나 assertion스타일도 직접 설치하여 사용할 수 있도록 지원하고 있습니다.

아직 테스트 코드 작성이 익숙치는 않습니다. 그나마 airbnb의 예제소스나 api문서들에서 좋은 예시들을 잘 안내해주고 있어 조금씩 익숙해지고는 있습니다.

그리고

첫 삽을 뜬 날이 언제인지 보았더니 작년(2016년) 12월 27일이네요. 매일 꼬박꼬박은 못했지만 꽤 꾸준히 진행하고 있습니다. 2017.7.18 이후로는 private한 공간에서 코딩을 이어가고 있습니다. 별을 눌러주신다면 큰 힘이 됩니다. 궁금한점이 있다면 이슈를 남겨주시거나 guruahn@gmail.com 으로 연락주십시요.

guruahn/underline