개인 프로젝트 Underline 개발기

Jeong Woo Ahn
Mar 25, 2017 · 6 min read

Underline

ReactJS 연습을 위한 일일 커밋 프로젝트를 진행 중입니다. 아주 소소하고 사사로운 개인 프로젝트입니다. 혼자 진행중이지만 이곳에 공개해놓으면 좀 더 지치지 않고 지속할 수 있을것 같아 포스팅해봅니다.

목표

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

관련기술

여기서 부터는 기술적인 얘기를 하고자합니다. 언더라인을 만들면서 사용된 기술 스택들을 정리합니다.

create-react-app

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

Redux

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

Router

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

폴더구조

처음에는 create-react-app의 기본구조에서 velopert 님의 강의에서 소개하는 구조를 바탕으로 시작했습니다.(리액트를 처음 시작할때는 velopert 님의 강의를 강력 추천합니다. 이런 강의가 무료라니요.) 아래와 같은 형식이었습니다. 가장 일반적인 구조가 일듯 싶습니다. Redux Book도 비슷한 구조를 하고 있습니다.

BEM + SCSS

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

Testing : enzyme + mocha

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

firebase

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

그리고

첫 삽을 뜬 날이 언제인지 보았더니 작년(2016년) 12월 27일이네요. 매일 꼬박꼬박은 못했지만 꽤 꾸준히 진행하고 있습니다. 언제까지 할 수 있을까 걱정은 되지만, 꾸준히 계속 해볼 생각입니다. 언더라인 프로젝트 진행이 궁금하시면 Watch를 눌러주시고 별을 눌러주신다면 큰 힘이 됩니다. 궁금한점이 있다면 이슈를 남겨주시거나 guruahn@gmail.com 으로 연락주십시요.

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터

Jeong Woo Ahn

Written by

그림그리는 프로그래머 instagram@you_and_mydrawing | working at habitfactory.co

Witinweb

Witinweb

웹을 이해하고 웹에 wit를 불어넣는 놀이터