Demo Link | 상세 기획안 | Asana Project

리디 뷰어팀 박현준의 신규 입사자 과제(미니 도서관 만들기) 저장소 입니다. Server(Node), Client(React)를 typescript로 구현했습니다.

• Docker
• Docker-compose
• Node (^10.16.0)

프로젝트 루트의 .env.example 파일을 자기 환경에 맞게 조정해 .env 파일로 변경합니다.

$ git clone https://github.com/academey/ridi-new-entrant-web
$ cd ridi-new-entrant-web
$ npm install
$ npm run compose-dev

 $ npm run compose-dev

 $ npm run compose-prod

메인 페이지. 책 리스트를 조회하고 대여할 수 있다.

회원 가입 페이지. JWT Token 방식으로 인증하며 토큰이 쿠키에 내려가고 해당 토큰을 이용해 유저 정보를 불러온다.

로그인 한 상태에서 대여시간을 설정하고 대여하기 버튼을 누르면 책을 대여할 수 있다. 다른 유저가 빌린 책은 못 빌린다.

로그인 한 유저가 대여한 책이 있다면 해당 책을 반납할 수 있다. 대여 종료 시각이 얼마나 남았는지 알려준다.

대여한 책의 대여 종료 시각이 현재 시각보다 연체되었다면 빨리 반납하도록 유도하고, 다른 신규 책을 빌리지 못 한다.

연체 반납했을 때, 연체된 시각의 두 배 만큼 대여 불가하게 만든다.

ridi/tslint-config를 상속해서 개발했습니다. commit 시 lint-staged 를 통해 lint 와 prettier 가 실행되며 코드 컨벤션이 맞춰집니다.

10.16.0 버전을 사용했습니다.

Express 에서 async/await 문법을 쓰고 싶어 express-async-handler를 사용했습니다. 또한 그 외의 에러처리, DB Sync, cors, logger, body-parser 등 다양한 미들웨어를 사용했습니다. property-validator를 이용해서 입력값에 대한 검증을 추가 했습니다. 또한 해당 케이스들에 대해 테스트 케이스를 만들었습니다.

typescript 와 연계해서 사용하려고 했으나 인터페이스와 타입형을 지원하지 않습니다. 따라서 데코레이터 기반으로 타입형을 지원하는 라이브러리인 sequelize-typescript를 사용했습니다. sequelize-cli 을 이용해 migration, seed 파일도 생성했습니다. 또한 Model 에 직접 접근하지 않고 Service 레이어를 사용해 코드 사용의 용이성을 높였습니다.

이제 React의 대다수의 라이브러리가 Typescript를 지원한다고 해서 이를 이용해 개발해봤습니다.

상태 관리를 Redux 와 Redux-saga 를 이용했습니다. 비동기로 작동하는 액션을 처리하는 것은 모두 redux-saga 를 통하도록 만들었습니다. 추후에는 Saga를 연결하거나 컨테이너를 호출하는 부분을 최적화시켜야 합니다.

redux-form을 이용해 Redux state container 를 만들었습니다. HOC기법을 이용해 Redux container 로 폼의 필드값들을 등록해주고 액션을 관리합니다. 항상 반복되는 폼 형태를 쉽게 만들 수 있습니다. styled-components을 이용해 컴포넌트 단위별로 스타일을 관리할 수 있습니다. reactstrap 그냥 그나마 이뻐서 썼습니다.

Docker Image 로 DB를 관리했습니다. DB 데이터를 보존하고 싶으면 docker-compose.yml 의 volumes 마운팅 부분 설정을 넣어줘야 합니다. Author 와 Book 을 M:N 관계로 구현하고자 테이블은 만들어 놓았으나 필수 스펙에 작가 조회 및 생성이 없어 진행하지 않았습니다. BookReservation의 endAt 칼럼과 현재 시각과 비교해 ReservationPenalty를 생성합니다.

supertest를 사용해서 통합 테스트를 진행했습니다. 단위 테스트를 할만한 기능이 없었고 모두 DB를 이용한 CRUD 였기 때문에 DB와 passport를 Jest mocking 하고 테스트했습니다.

DB와 Web(client + server)을 띄웠습니다. Web을 volume mounting 하여 hot-reload 시킬 수 있습니다. webpack-dev-server와 nodemon을 이용해 개발했습니다.

Git commit 이 오면 Travis 에서 빌드 & 테스트를 시작합니다. 성공하면 배포도 시작하게 됩니다. 스크립트로 수동으로 클라우드에 접근하는 방식이 아닌 Travis Deployment을 이용해 배포했습니다.

소스코드를 압축해서 버켓에 업로드합니다. github의 코드를 바로 올리지 않고 S3를 사용하는 이유는 1) build 파일을 유지해서 추후 같은 버젼을 재배포할 경우 빌드 시간이 소요되지 않음 2) build 파일 버젼 관리 및 롤백 용이. 두 이점을 가지기 위해 s3를 끼워서 관리하는 게 더 좋을 것 같습니다.

업로드한 소스코드를 EC2에 보냅니다. 존재하던 기존 소스코드를 overwrite 하고, 실패할 경우 자동으로 롤백시킵니다.

소스코드를 받으면 ./execute-deploy.sh 를 실행합니다. 기존 docker 프로세스를 멈추고, 다시 띄웁니다. 이 과정에서 downtime 이 발생합니다. 따라서 추후에는 Blue-Green 배포를 지원할 예정입니다.

해당 프로젝트에서 관리했습니다.

ridi-new-entrant-web/src
├── client
│   ├── api
│   ├── components
│   ├── containers
│   │   └── Root
│   ├── pages
│   │   ├── auth
│   │   │   ├── LoginPage
│   │   │   └── RegisterPage
│   │   └── resources
│   │       └── book
│   │           └── ListViewPage
│   │               └── components
│   ├── sagas
│   ├── store
│   └── utils
├── database
│   ├── config
│   ├── migrations
│   ├── models
│   │   └── __mocks__
│   └── seeders
└── server
    ├── routes
    ├── service
    ├── sql
    └── utils

• docker-compose 로 nginx 무중단 배포 지원
• Sequelize Pagination 기능 추가

• Express 공식 문서
• Jest 공식 문서
• Sequelize CLI를 사용하여 User API 만들기
• Setup a REST API with Sequelize and Express.js
• Implementing JSON Web Tokens & Passport.js in a JavaScript Application with React
• [Node.js / JWT] Express.js 서버에서 JWT 기반 회원인증 시스템 구현하기
• JWT(JSON Web Token)로 로그인 REST API 만들기
• Nodejs Authentication Using JWT and Refresh Token
• Docker Compose에서 컨테이너 startup 순서 컨트롤하기
• 도커 컴포즈를 활용하여 완벽한 개발 환경 구성하기
• 6) 스프링부트로 웹 서비스 출시하기 - 6. TravisCI & AWS CodeDeploy로 배포 자동화 구축하기