부스트캠프 멤버십 5~6주차 회고

DongHwan·2021년 10월 14일
0

회고

목록 보기
6/21
post-thumbnail

이번주 과제는 Vanilla JS로 SPA를 사용하는 서비스를 구현하는 것이었다. 서비스는 OAuth 로그인을 사용해야 하며, Mysql과 더불어 Sequelize를 사용해야 했다.

😂 무엇이 어려웠나?

Sequelize

ORM으로 Sequelize를 사용하였다. Nodejs로는 항상 Mongoose와 같은 ODM을 사용해왔기에, 별로 어렵지 않을 줄 알았다. 하지만 다루는 분야가 다른 만큼, 그리 쉽지만은 않았다. 특히나 어려웠던 부분이 M:N 관계의 레코드들을 Join해서 가져오는 부분이었다. 공식 Docs를 찾아봤는데 나만 그렇게 느낀 것인지 모르겠지만, 설명이 빈약했다...
그래서 다른 사람들의 게시글도 많이 참조했고, 개발을 진행하면서 내가 원하는 포맷으로 가져오기위해 여러 옵션들도 사용해보았다. 시간과 노력을 쏟아부으면서 결국 원하는 결과와 흡사하게 가져올 수 있었지만, 결코 쉬운 시간은 아니었다...

프론트엔드의 MVC 구조

이번에 프론트엔드 개발을 하면서 MVC 패턴을 제대로 적용해보고 싶었다. 뷰, 모델, 컨트롤러가 각자의 역할을 가지고, 역할에 맞는 동작을 할 수 있도록 구현하기 위해 많이 노력했다. 그래서 구현을 하기 전에 먼저 어떤 식으로 구현할 지에 대해 설계를 꽤 오래했었다.

그런데도 처음 설계했던 내용은 뷰와 컨트롤러의 역할이 모호하였다. 구현을 하면서 뷰에서 이벤트 리스너를 등록하는 나를 보고, 곧바로 설계를 다시 하고 리팩토링을 계획했다. 좀더 많은 생각과 고민을 해서 나온 두번째 설계는 꽤나 만족스러웠다. 내가 보기에도 뷰에서는 주어진 데이터를 통해 렌더링을 하는 동작만이 있었다. 그리고 컨트롤러가 모델과 뷰를 연결해주는 역할을 하여, 데이터를 가공하고 처리하는 역할을 했다.

리뷰어님께도 설계에 대해 의견을 여쭈어봤는데, 자연스럽게 역할이 나누어 졌다고 말씀해주셔서 기분이 좋았다. 😊

✨ 무엇을 공부했나?

SSL과 Nginx

저번 주차 개발을 하면서 하고싶었던 것이 단순히 pm2로만 서버를 띄우는 것이 아니라 Nginx를 통해 Reverse Proxy를 적용해보고 싶었다. 그래서 이번에는 Nginx를 사용해보기로 결정하였고, 공부를 시작했다.

나는 단순한 Reverse Proxy를 적용하는 것이었기에 Nginx 자체는 크게 어렵지 않았다. 고생을 했던 부분은 SSL 적용이었다. 이번에 dev 도메인을 하나 구입해서 적용하려 했는데, dev 도메인은 https를 필수적으로 사용해야 한다. 그래서 ssl 설정까지 같이 해주어야 했다. ssl 인증서 발급은 Let's Encrypt를 사용하였는데, 분명 제대로 발급을 받았는데 제대로 적용이 안되는 문제가 발생했다.

검색을 해본 결과 문제는 한번에 여러 도메인을 받는 명령의 처리 방식 때문이었다. 동시에 여러 도메인의 인증을 받을 경우, 모든 인증서의 위치가 가장 처음 위치한 도메인명으로 가기 때문이었다. 아무래도 도메인 적용과 ssl이 처음이다보니 도메인들을 여럿 만들어보면서 테스트를 해봤는데, 이 과정에서 인증서의 위치가 꼬여서 문제가 발생했었다. 인증서를 한번 정리하고, 하나씩 제대로 받으니 쉽게 해결되었다.

이번 주차에는 Nginx를 단순한 Reverse Proxy를 적용하는데 그쳤지만, 다음에는 정적 파일들을 Nginx에서 제공할 수 있도록 설정하고 싶다. 또한, 배포를 하는 과정에서 Docker를 사용하는 것 또한 추후 해볼 예정이다.

Database

지난 주차에도 Mysql를 써보고 ERD도 작성해보았지만, 아무래도 경험이 없다보니 많이 부족하였다. 이번 주차라고 크게 달라진 건 없지만, 그래도 조금 더 성장한 것이 느껴졌다.

설계 과정에서 과연 DB에 저장할 데이터가 무엇인지에 대해 꽤나 고민을 하였다. 또한, 각 테이블간의 관계를 어떻게 해야할지에 대해서도 많은 고민을 했다. 그래서 ERD를 그릴 때도 엔티티간의 관계를 좀더 생각하고 작성하였고, 테이블을 더 쪼갤 수 있는지에 대해서도 시간을 투자했다.

물론 나는 아직 데이터베이스에 대해 제대로 배워본 적이 없어 부족한 점이 많다. 그래도 혼자 여러 고민들을 하면서, 다음에 데이터베이스를 제대로 배우게 된다면 큰 도움이 될 경험들을 쌓을 수 있었다.

프론트엔드 라우팅

이번에 개발을 하면서 SPA 환경에서 라우팅하는 것에 대해 많은 공부를 할 수 있었다.

우선 사용자가 페이지를 이동할 때의 세션 기록을 남기기 위해, history api를 사용하였다. history의 함수들을 이용해 상태들을 저장하고, 페이지를 이동하였다.

그런데 history는 경로를 변경할 수 있고 세션기록도 남기긴 하지만, 경로에 맞는 페이지를 렌더링하는 등의 기능은 없다. 결국 경로와 상태에 맞는 페이지를 렌더링하는 것을 구현해야하는데, 나는 이 과정에서 싱글톤 패턴의 Router 객체를 만들었다.
우선 history api의 호출은 Router객체의 내부에서 처리하도록 구현했다. 또, 이 Router 객체에 경로와 컨트롤러를 등록해주면, 경로에 맞는 적절한 컨트롤러를 실행하여 페이지를 그려주도록 했다.

개발을 진행하기 전에 라우팅처리를 어떻게 할 것인지에 대해 공부하고, 고민하여 설계를 진행하였었다. 그래서 내가 생각한 대로 구현이 되어, 개발이 수월하였다.
초반에 설계를 제대로 잡고 시작하니, 추가적인 기능 구현도 쉬웠다. 나중에 express의 params처럼 /:id와 같은 경로를 등록하고 싶었는데, 기존 코드를 거의 수정하지 않고도 기능 구현이 가능했다.

프론트엔드 라우팅을 직접 구현하면서, 라우팅에 대해 배운 것도 많지만 설계의 중요성에 대해 다시 한번 느낄 수 있었다.

🎈 맺음말

매번하는 얘기이지만, 설계는 정말 중요한 것 같다. 확실히 설계를 탄탄하게 잡고 가면, 구현하는 것 자체는 크게 어려운 것이 없다는 것을 느꼈다. 아직도 많이 부족하지만, 점점 성장하는 것이 느껴져 만족스러운 주차였다. 다음주에는 2명이서 짝 프로그래밍을 한다고 하는데, 더욱 성장할 수 있는 기회가 될 것 같다.

profile
날 어떻게 한줄로 소개해~

0개의 댓글