CodePlat(https://codeplat.co.kr/) 은 2명의 팀원이 겨울방학 약 50여일 간 개발한 사이드 프로젝트로, 학생, 직장인, 프리랜서, 디자이너 등에게 프로젝트 혹은 스터디 구인, 참여 및 커뮤니티 기능을 제공하는 서비스 플랫폼입니다. 사용자는 스터디 및 프로젝트 모집, 구인 뿐 아니라 커뮤니티 및 채팅 기능을 활용하여 다른 사용자와의 원활한 교류를 할 수 있습니다.
현직 개발자 뿐 아니라 디자이너, 학생도 공개적으로 개발관련 스터디나 프로젝트에 참여하거나 모집할 수 있도록 프로젝트 사용자 타겟을 설정하였습니다.
로컬 회원가입 뿐 아니라 소셜 회원가입도 지원하여 사용자의 편의성을 증대하였습니다. 또한 비밀번호 찾기 및 변경기능을 제공하고, 이메일 인증 시스템을 제공하여 유연한 사용자 정보 관리를 할 수 있도록 노력하였습니다. 회원 인증 기능은 firebase의 인증 모듈 등과 같은 별도의 툴 없이 프론트와 백에서 직접 유효성 검증 로직을 구성하여 개발하였습니다.
quill editor 라이브러리를 적용하여 사용자가 작성한 코드 신택스 하이라이팅 기능을 적용하였습니다. 또한 사용자는 프로젝트 특성에 맞게 기술을 선정할 수 있고, 원하는 파일을 업로드할 수도 있습니다. 인피니트 스크롤링 로직을 구현하여 별도의 페이지네이션 없이 사용자가 편리하게 게시글 리스트를 파악할 수 있도록 하였습니다. 또한 해당 스터디나 프로젝트의 기술 혹은 지역 정보로 게시글을 필터링할 수 있고 게시글 검색 기능도 추가하였습니다.
realtime database를 지원하는 firebase를 사용하여 사용자간 실시간 채팅과 알림기능을 구현하였습니다.
각 페이지마다 반응형 CSS 디자인을 도입하여 모바일 환경에서도 플랫폼을 원활하게 이용할 수 있도록 하였습니다.
- React.js, next.js, redux, redux-saga, styled-components, antd, axios, firebase
React hook의 자유도 높은 활용성 덕분에 컴포넌트를 Container, Presentational로 나누는 구조를 채택하지 않고 내부 컴포넌트에서 로직처리와 렌더링을 모두 처리하는 방법을 채택하였습니다.
프로젝트 특성상 구인 및 모집 포스트, 커뮤니티 게시글이 검색엔진에 최적화되어야 더 많은 사용자의 유입 및 원활한 사이트 운영이 가능하다는 판단을 하였고, 페이지 초기 로드 속도를 높여 사용자 경험을 증진 시키기 위해 SSR을 적용하였습니다. 또한 코드스플리팅 및 유용한 SSR 기능을 보유하고있는 next.js 프레임워크를 사용하여 개발의 생산성을 도모하였습니다.
Redux 패턴은 크게 action type, action creator, reducer 3가지의 분류로 나누어 설계하였고, Redux 데이터 비동기 처리는 redux-saga 를 이용하여 직관적으로 데이터 요청 과정을 파악할 수 있도록 Request-> Success/Failure의 패턴으로 설계 하였습니다. 또한 redux-actions 라이브러리를 사용하여 action 생성과 reducer handle을 보다 쉽게 하도록 노력했습니다.
- 예시
개발 생산성을 위해 CSS UI 프레임워크인 antd를 사용하였고 styled-components 라이브러리를 적용하여 커스텀 디자인을 구현했습니다.
✔ MongoDB의 ODM으로 널리 사용되고 코드 구성이나 개발 편의성 측면에서 장점이 많은 Mongoose를 사용했습니다.
✔ ES6와 mongoose 쿼리 빌더를 사용해 간단하고 직관적이게 코드를 구현하도록 노력했습니다.
✔ 기존의 mongoose 쿼리 빌더로는 원하는 데이터로 가공하는데 어려움을 겪어 데이터 처리 파이프라인의 개념을 모델로 하는 aggregate를 사용했습니다.
-
Routres : 지원된 요청들을 알맞은 Controller 함수들로 보냅니다.
-
models : 데이터베이스에서 정보를 가져온 뒤, Controller에 전달합니다.
-
Controllers : 모델로부터 요청된 데이터를 얻어내거나 , 얻어낸 데이터를 가공하여 처리합니다.
✔ Model-Routes-Controllers Structure를 구현 하기 위한 Directory Structure
라우팅 하는 URL 주소를 routes.js 라는 파일을 만들어 따로 보관함으로써 재사용성을 확보하여 One single source of truth 원칙을 준수하려고 노력했습니다.
REST에서 가장 중요하며 기본적인 규칙 두가지를 준수하기 위해 노력했습니다.
-
URI는 정보의 자원을 표현해야 한다. (
리소스 식별) -
자원에 대한 행위는 HTTP Method로 표현한다.
📌 ENDPOINT
✔ 두가지 규칙을 가지고 URI를 설계하는 것을 목표로 하고 그 상황에서 안될 때 컨트롤 URI를 사용하였습니다.
✔ 계층 구조상 상위를 컬렉션으로 보고 복수단어를 사용 했습니다.
✔ 게시글 작성 시 PRG(Post/Redirect/Get)을 사용해 게시글 중복 작성을 방지하였습니다.
✔ AWS-EC2 (Ubuntu)
-
하드웨어에 선투자할 필요가 없어 더 빠르게 애플리케이션을 개발하고 배포할 수 있어 EC2를 사용했습니다.
-
처음 배포를 해보았기 때문에 풍부한 문서, 온라인 커뮤니티를 통해 충분히 학습할 수 있는 Ubuntu를 사용했습니다.
✔ AWS-S3
-
높은 내구성과 높은 가용성을 저렴한 가격으로 제공하는 인터넷 스토리지 서비스인 AWS-S3를 사용했습니다.
-
AWS-S3를 사용해 유저 이미지와 게시글의 업로드 파일을 저장했습니다.
✔ AWS-ROUTE 53
- 가용성과 확장성이 우수한 DNS(도메인 이름 시스템) 웹 서비스인 Route 53을 사용하여 직접 구입한 도메인 등록, DNS 라우팅 기능을 구현하였습니다.
✔ AWS-IAM
- IAM을 사용하여 S3를 사용하도록 인증(로그인) 및 권한 부여(권한 있음)된 대상을 제어하여 보안을 강화하였습니다.
✔ 유저가 http로 접속 할 경우 https로 접속하도록 nginx를 next, express 서버 앞 단에 두어 Reverse Proxy를 통해 보안을 강화했습니다.
✔ http의 기본 포트인 80번 포트로 요청이 오면 nginx를 거쳐서 https의 기본 포트인 443번 포트로 redirect 시켜서 요청에 맞게 각각 next, express 서버로 보내줍니다.
✔ https 설정 코드 (/etc/nginx/nginx.conf)
✔ snap과 nginx를 통해서 letsencrypt를 설치하고 인증서를 발급받았습니다.
✔ SSL을 통해 개인 정보, 문서, 이미지를 제출하는데 사용된 서식 및 사용자 ID와 암호를 암호화하고 보호하여 보안을 강화했습니다.
✔ 노드는 기본적으로 싱글스레드라 단일 코어에서 실행되기 때문에 멀티 코어 시스템을 사용할 수 없는 단점이 있어 이를 해결하기 위해 클러스터(Cluster) 모듈을 통해 단일 프로세스를 멀티 프로세스(Worker)로 늘릴 방법을 제공하는 PM2를 사용해 노드JS 애플리케이션을 무중단으로 운영하도록 구현했습니다.
✔ PM2의 Monitering 기능을 사용해 전체 프로세스에서 발생하는 로그를 터미널을 통해 실시간으로 확인 가능합니다.
# go to directory
$ cd /ProjectFrontend
# install dependencies
$ npm install
$ yarn install
# running localhost 3000 port
$ npm run dev
# build for production and launch server
$ npm run build && npm start
# go to directory
$ cd /ProjectServer
# install dependencies
$ npm install
$ yarn install
# running dev
$ npm run dev
# running production
$ npm run start
- github, slack, Postman
Frontend : 박진호
github : https://github.com/zinozino1
Backend : 조원제
github : https://github.com/onejaejae