프로젝트 구성
이번에 진행한 토이 프로젝트
의 분석 목적은 React & Redux & axios 사용방식과 Koa 서버와의 연동 및 Mongo DB 사용방법 및 환경 구성이다. 위의 열거된 기술을 가장 간단하게 접할 수 있는 기능은 로그인 및 회원가입을 구현해보는 것이다.
Front-end
React.js
하위 라이브러리 목록
react-router-dom react-redux redux redux-actions imuutable styled-components open-color
react-hot-loader axios redux-pender validator lodash query-string
Back-end
Koa
Mongo DB
하위 라이브러리 목록
koa-router koa-bodyparser cross-env joi jsonwebtoken
프로젝트 시작 및 분석
먼저 Front-end 프로젝트를 구성했다. CRA를 만들고 필요 라이브러리를 yarn을 이용해서 설치했다.
디렉토리 구조는 보편적인 react 폴더 구조이고 redux는 ducks구조로 구성했다.
components: 화면에 그려지는 컴포넌트들
containers: redux와 직접적으로 연결된 컨테이너 컴포넌트들
lib: 프로젝트에서 공통적으로 사용하는 함수들
pages: 페이지 라우트 관련 컴포넌트들
redux: ducks구조로 구성된 리덕스 코드
페이지 라우트는 로그인 된 페이지와 비로그인 페이지로 구성되어 있다. 해당 라우트에 진입했을 경우 인증 상태를 체크 해서 컨테이너들의 상태를 변경한다.
프론트 단에 개발 방식은 보여지는 component를 만들고 상태가 필요한 부분들은 container와 redux를 조합해서 개발해 나갔다. 처음에는 container 내에서 redux와 연결해주는 코드와 module 코드를 작성하는게 익숙치 않았지만 하다보니 점점 익숙해졌다. axios를 사용해서 rest API를 연동하는 부분은 서버가 완성되고 작업을 했다.
처음으로 Koa서버와 MongoDB를 사용해봤는데 굉장히 편리했다. 서버는 Java Spring boot와 C++ 게임 서버말고는 경험해본게 없었는데 Java Spring boot도 C++에 비해서 굉장히 편리하다고 생각했는데 Koa는 더 단순해서 정말 배우기 편했다.
Front-end와 Back-end 모두 이해하기 어려운 코드는 없었고 프로젝트 구조에 익숙하지 않다는게 가장 힘들었다. React를 처음 접했을 때에는 redux를 사용하지 않아서 필요한 컴포넌트들을 만들고 바로바로 사용하는 식이었다. 프로젝트 구조라고 해봤자 페이지 단위, 컴포넌트 단위 정도만 나눠놨을 뿐이었다. redux를 사용하지 않아서 힘들었던 점은 역시나 최상단에 state를 정의해놓고 하위 계층으로 계속 넘기는 코드를 작성해야 한다는 것이었다. 해당 컴포넌트가 사용하지 않아도 자식 컴포넌트를 위해서 쓸데없는 파라미터들이 많았었다.
반면에 redux는 state와 dispatch를 파라미터 형식으로 어디서든지 접근할 수 있었다. 단점이라면 조금 복잡하게 코드를 작성해야 한다는 것이었다.
회고
회원가입과 로그인 과정을 작성하면서 어느정도 react 프로젝트의 필요한 요소들은 모두 다뤘다.
결국 익숙해지고 더 나아가려면 프로덕션 레벨의 프로젝트를 진행해야 한다.
원래 계획이었던 1개월 정도의 시간이 소요되는 프로젝트를 시작해보려 한다. 결국 인터넷에 있는 코드를 분석하고 따라하는 정도로는 체화가 전혀 되지 않기 때문에 나만의 프로젝트는 꼭 필요한 과정이다.
1월달에는 해당 프로젝트에 대한 회고를 쓸 수 있기를...
프로젝트 정보
Front-end: https://github.com/sukutt/AuthenticationToy
Back-end: https://github.com/sukutt/koa-server
댓글