Keywordream은 PDA 3기에서 프론트엔드 최종 프로젝트였다. 그래서 그런지 백엔드(express.js)는 다소 부실한 측면이 존재했다. Keywordream 프로젝트가 끝난 이후에 PDA 3기에서 Back-end에서 대해서 대략 2달 간 실습 위주의 수업을 들었다. 이것을 바탕으로 Keywordream 프로젝트에 대하여 Back-end 쪽 리팩토링을 진행하려고 한다.

리팩토링은 소프트웨어공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 의미한다. 처음에는 결과의 변경 없이 개발 코드에 MVC 패턴을 적용하여 코드의 구조만 바꿀려고 했었다. 하지만 리팩토링을 하려고 계획했었던 문서들을 살펴보니 DB 설계나 API 설계 부분에서 부족한 측면이 존재했다.

내가 생각하기에 Keywordream 프로젝트에서 Back-end 부분 문제점은 다음과 같았다.

1. DB 설계

Keywordream 프로젝트 당시에 프로젝트 구조를 아래와 같이 작성했다. 하지만 NewsStock table에서 json 형식으로 설계된 부분이 존재하며 Stock table과 NewsStock table이 1:1 관계이다. 뉴스 크롤링을 하여 관련 주식에 대한 뉴스 아이디 리스트가 NewsStock에 저장이 되는데 1:1 관계라서 기존에 저장되어 있던 것이 삭제가 되고 새로운 것이 대신 들어가게 된다. 이렇게 될 경우에는 과거의 뉴스는 Stock과 관계가 사라지는 현상이 발생한다.

이는 Keyword table에서도 마찬가지이다. Stock table과 Keyword table이 1:1 관계이기 때문에 관련 주식에 대한 키워드가 업데이트될 경우에는 과거의 키워드는 사라지게 된다.

추후에 서비스가 고도화될 경우에는 이러한 방식의 설계는 확장성 측면에서 좋지 않은 설계라고 생각한다.

2. API 설계

이 프로젝트는 각자의 팀원이 각 도메인을 맡아서 full-stack 개발을 진행했다. 즉, 본인이 Back-end에서 개발한 api을 front-end에서 사용하다 보니깐 요청이 잘못될 경우를 아예 고려를 하지 않고 무조건 성공할 것이라고 예상하고 개발을 진행했다.

그리고 요청에 대한 응답을 보낼 때 통일된 형식이 아닌 각자 개발스타일에 맞는 방식으로 응답을 보냈다. 이에 더하여, API 문서도 url, Request, Response에 대해서 제대로 작성하지 못한 문제점도 존재했다.

추가적인 문제는 분류에 있었다. 팀 프로젝트로 인해 페이지를 나눠서 진행해서 그런지 코드 중복이 종종 일어나는 문제점이 있었다. 이를 해결하기 위해서 도메인 단위 개발하기로 했다.

3. Express.js 구조

프론트 엔드에 치중된 프로젝트인 만큼 백엔드 구조는 다소 신경쓰지 못한 부분이 존재한다. 백엔드 프로젝트 구조는 다음과 같았다.

├── README.md
├── app.js
├── bin
│   └── www
├── database
│   ├── connect
│   │   └── mariadb.js
│   └── news
│       ├── detail.js
│       ├── list.js
│       └── tag.js
├── package-lock.json
├── package.json
├── public
│   └── stylesheets
│       └── style.css
├── routes
│   ├── chart.js
│   ├── finstat.js
│   ├── flask.js
│   ├── index.js
│   ├── keyword.js
│   ├── main.js
│   ├── mypage.js
│   ├── news.js
│   ├── search.js
│   ├── stock.js
│   ├── stockInfo.js
│   └── users.js
├── socket.js
├── utils
│   ├── BatchStocks.js
│   ├── MarketOpen.js
│   ├── MyStock.js
│   ├── Shinhan.js
│   ├── Signup.js
│   ├── StockInfo.js
│   ├── TopKeyword.js
│   ├── time.js
│   └── token
│       ├── EbestToken.js
│       └── KOInvToken.js
└── views
    ├── error.ejs
    └── index.ejs

위 폴더구조에서 보면 다음과 같은 문제점이 존재한다.

1. React로 Front-end을 따로 구축했음에도 불구하고 view 폴더가 남아 있다.
2. DB로 받아오는 부분을 분리하기는 했지만 routes 부분에서 모든 로직을 처리하고 있다.
3. utils에 굳이 있지 않아도 되는 파일들이 존재한다.(ex. Signup.js)

4. 계획

위와 같은 문제로 Keywordream 프로젝트에서 Back-end 부분을 리팩토링할 필요성을 절실히 느꼈다. PDA 3기에서 Back-end에 대해서 배운 만큼 그 내용들을 적용해 볼 계획이다.

DB 설계, MVC 패턴 적용, API 설계 등 다양한 부분에서 수정이 일어날 것 같다. 최종적으로는 결과의 변경도 일어날 것이기 때문에... 이걸 리팩토링이라고 부를 수 있을지는 모르겠지만, 여기에서는 기존의 설계와 코드들을 고도화하는 느낌에서의 리팩토링이라고 보면 될 것 같다.

리팩토링 - 위키백과