민코딩 연구소 사이트 제작기(1) - 스택및 설계

https://mincodinglab.com/

민코딩연구소 [기업 대상 알고리즘 강의]

해당 글은 위 사이트에 대한 제작기를 바탕으로 작성된 글입니다. 

 

 

회사에서 홀로 회사 사이트 개발을 맡기로 했다. 

요청받은 주요 기능은 기존 정적 사이트에 Server및 DB 연동 + 배포 + 

+ SEO 고려하기 였다.

 

내가 수행해야할 부분들은 디자인을 제외한 모든것이었고 이에 따라 설계들이 필요했다.

 

먼저 기본적으로 외주를 통해 회사 사이트 디자인 및 기초 HTML + CSS + JQUERY로 된 사이트를 제공받았고 

이를 Server + DB를 연동하는 작업 + 프론트 스택을 정해서 옮기는 작업이 필요했다.

 

그에 따라

 

1. 스택 정하기
2. DB 설계하기
3. 백엔드 구현하기
4. 프론트엔드 구현하기 

식으로 작업이 이루어졌다.

 

 

1. 스택 정하기

 

먼저 스택은 위와 같이 정했다.

 

먼저 크게 nginx를 앞단에 두어 proxy_pass를 활용하여 특정 URL(API가 붙으면 backend로 요청을 보낸다) 등의 방식으로 nginx 를 설계하였고 DB는 mysql을 채택하였다. .

그다음은 프론트 스택으로 Next.js를 선정했다. 기존 react만 활용해서 개발을 하기에는 SEO에 어느정도 취약할것이라 생각되어 SEO에 강한 React 프레임워크를 찾던 도중 Gatsby.js와 Next.js를 고민하게 됐다. 서로 비교하며 개발 스택을 고민했지만 Gatsby.js를 활용하게 되면 특정 라이브러리를 활용 할 때 gatsby로 변환된 라이브러리를 써야하는등 조금더 개발에 대한 불편함이 있을 것이라 생각이 되어 next.js를 채택했다.

 

여기서 느낀 next.js의 장점은 다음과 같다

 

1. 정적 서버 렌더링 

next.js에서는 meta tag를 활용한 seo,  ssg(static site generator), ssr(server side rendering) 를 통해 조금더 SEO에 대한 강점을 알 수 있었다. 

 

2. 쉬운 라우팅

pages 폴더에 파일만 생성하기만 하면 해당 파일 이름으로 라우팅 된다는 점이 편했다.

react의 경우 react-router를 설치해서 연동하는데 비해 이러한 점이 간편하게 다가왔다. 

 

 

그다음 정한건 backend에서 nest.js를 채택하였다. nest.js를 채택한 이유는 다음과 같다.

 

1. 딱 정해져있는 폴더구조 

이게 가장 컸다. 기존에 express로 개발을 하다보면 폴더 구조가 딱 정해진게 없어서 각 개발자마다 특징이 달라서 이를 이해하는데 추가적인 시간이 들었다. 하지만 타 프레임워크인 Spring이나 Django 처럼 폴더 구조및 흐름에 대한 구조를 딱 정해서 진행하니 굉장히 좋았다. 

 

2. Interceptors, Pipes, Guard

기존 express를 활용하면 데이터를 받아온 후 처리를 한다던가 전처리를 하는 부분이 조금 불편하다. express의 경우 모든 방식을 미들웨어를 통해 거쳐가기 때문에 특히 데이터를 받아오고 나서 내보내기전 코드를 획일화 하는 부분에 어려움이 있었다. nest.js는 이에 대한 편의성을 제공해서 더 편한 방식으로 개발할 수 있게 해줬다.

 

3. 쉬운 문서화

nest.js에서는 swagger 라이브러리를 통한 쉬운 문서화가 가능했다. 문서화를 잘해 두면 협업할때 큰 장점이 되기 때문에 문서화는 잘 할 수록 좋은데 기존 express에서는 해당 라이브러리를 통해 문서화 하는 작업이 불가능했다. 

 

문서화의 이점 또한 크게 다가왔다

 

문서화 예시

 

4. 편한 CLI

예를 들어 /gallery 라는 코드의 GET POST PATCH DELETE가 필요하다고 가정하면 

nest.js에서는 편하게 CLI를 통해 해당 내용을 생성할 수 있다. 

 

nest j resource gallery

위와 같은 명령어 한번만으로 편하게 CRUD를 위한 라우터들이 생성 가능하다 .

 

 

위 기능들 말고도 많은 방식들이 장점으로 다가와서 nest.js를 백엔드로 채택하게 됐다.

 

이렇게 기존 스택정하기는 마무리 됐다.

 

2. DB 설계하기 

 

각 사이트 별 필요한 기능에 대해 메모장에 정리하고 이를 기반으로 어떠한 DB가 필요할지 생각한 뒤에

이를 기반으로 DB설계를 진행하였다. 

 

DB 설계

 

위 방식대로 설계를 진행한 후에 어느정도 DB수정 과정이 필요하긴 했지만 큰 문제 없이 DB설계는 마무리 됐다. 

 

 

 

https://loy124.tistory.com/390

민코딩 연구소 사이트 제작기(2) - 백엔드