Spec

사용 언어(+런타임) 및 프레임 워크

• Javascript
• Node.js
• Express

구조 및 가독성

스켈레톤 개발 과정

주요 구조

routes(컨트롤러 + 라우터) <-> models <-> DB

주요 문제점

• 컨트롤러가 굉장히 무겁게 설계되어 있음
• 비동기 처리를 위한 콜백함수 사용으로 매우 깊은 depth

첫 번째 리팩토링

리팩토링 시 중요하게 생각한 요소

1. Controller 내의 비지니스 로직을 라이브러리로 옮겨 controller 가볍게 만들기
2. 코드의 depth 줄여 가독성 높이기

라이브러리 분리 기준

기능(CRUD) 별로 분리함 -> 가독성 측면에서 유리하다고 판단함

depth 줄인 방법

불필요한 depth를 분리해내고, 라이브러리로 분리해 조금 나아졌지만 여전히 깊은 depth

두 번째 리팩토링

두 번째 리팩토링 시 중요하게 생각한 요소

1. 라이브러리 분리 시 기준을 모델로 바꾸기
2. Javascript 최신 문법을 통해 근본적으로 콜백에 의한 depth 줄이기

라이브러리 분리

모델별로 라이브러리를 분리하여 한 클래스에 대한 CRUD를 한 파일에서 볼 수 있도록 함

promise와 async/await을 이용한 비동기 처리

근본적으로 콜백에 의한 depth 문제를 해결하여 가독성을 획기적으로 개선함

신경 쓴 기능

새로운 굿즈 등록 실시간 반영

위 영상처럼 새로운 굿즈 더보기 페이지를 무한 스크롤로 구현하였습니다.
이 때 처음 서버로부터 굿즈 정보를 가져왔을 때부터 새로 굿즈 정보를 가져오기 직전까지의 시간에 추가된 굿즈를 실시간으로 반영하도록 구현하였습니다.
mongoDB의 fast Paging기능을 이용하여 겹치는 굿즈없이 후입선출 구조를 구현할 수 있었습니다.

앞으로 개선해 나갈 점

1. 구조개선

두 번의 리팩토링을 거쳤지만 여전히 구조적으로 부족한 부분이 많습니다.

1. router와 controller가 합쳐져있는 과정에서 라이브러리로 분리하며 router만 남고 controller가 사라진 것
2. 객체지향에 대한 이해 부족으로 클래스를 적극 활용하지 못한 것

2. 로그

통신에 대한 부분은 morgan과 winston 라이브러리를 이용하여 구현하였지만 사용자를 분석하기 위한 액션 로그는 아직 수집하지 못하고 있어 이를 개선하고 싶습니다.

3. cors 정책 개선

현재 지덕체는 cors문제를 해결하기 위하여 프론트엔드와 백엔드가 한 서버에 존재하며 프론트에서 프록시를 이용하여 문제를 해결하고 있습니다.
백엔드 내부에도 cors 미들웨어를 사용하여 cors 문제를 해결하는 코드가 있지만 아직 서버가 분리되지 않아 전체 도메인을 허용하는 방식으로 설정되어 있습니다.
프론트엔드 서버를 분리한 이후 cors 정책을 개선하고 싶습니다.

4. 쿼리 최적화

지금까지는 빠른 개발을 위해 mongoose라는 ODM을 사용하여 개발을 진행했습니다.
지금은 문제 없이 잘 작동하지만 트래픽이 쌓이다보면 지속적으로 성능이슈가 발생할 것으로 생각되어 쿼리 최적화를 진행하고 싶습니다.