dev'log 1주일 회고

2023년 8월 18일(금)부터 현재(2023년 8월 24일(목))까지, 약 일주일간 git commit을 기반으로 블로그 포스트를 해주는 서비스를 개발했습니다. 배포까지 감안하고 개발을 시작했기에 평소 자주 사용하였던 Java 기반의 Spring framework가 아닌 JavaScript(TypeScript) 기반 (정확히는 node 기반)의 NestJS를 시도하였습니다. 

(기존까지는 실 서비스를 하는 모든 프로젝트들은 Spring framework를 사용하였고, 간단한 토이프로젝트들만 NestJS를 사용하였습니다.)

 

사용하고 있는 기술 스택

• NestJS (TypeScript)
• Next.js (TypeScript)
• MongoDB (6.0.9)

난생 처음으로 Next.js를 현재 시도해보고 있습니다. React를 사용하여 웹 동적 프레임워크를 생각했었지만 블로그 조회, 편집은 서버 사이드 렌더링 방식으로 처리하는 것이 React를 통한 동적 방식보다 더 좋은 방법이라고 생각이 들어 React가 아닌 Next.js를 택하였습니다.

 

좌충우돌

Next.js 13

아직까지 app 디렉토리 방식보다 pages 디렉토리 방식이 제가 경험한 바로는 더 많았고, 아직도 그 차이가 무슨 차이인지도 잘 모르지만 이러한 점 때문에 프로젝트를 시작하는 부분에서부터 난항을 겪었습니다.

 

Next와 React

이전까지 웹 프레임워크(웹 클라이언트 프레임워크)는 React를 가장 많이 사용하였습니다. Next 13을 사용하면서 SSR 개념과 클라이언트 전용 컴포넌트 등 React와는 사뭇 달라 공식문서들을 많이 참고하였습니다.

 

ghrepos 라이브러리

git repositories들을 조회하고 해당 repository의 commit log을 읽어오는 것이 dev'log의 핵심 기능입니다. 이러한 기능을 손쉽게 구현하기 위해 ghrepos 라이브러리를 사용하였지만 제가 원하는 옵션은 따로 구현이 안되어있었던 것인지 아니면 제가 잘 몰랐던 것인지, 전체 조회(private와 public 둘 다 조회)가 되지 않았습니다. (공식문서에는 옵션에 대해 언급되지 않았음) 그래서 외부 라이브러리에 의존하기 보다 차라리 axios를 사용하여 가져오는 방법으로 해결하였습니다.

 

Next Redux

Redux를 사용하여 사용자 정보(토큰 등)을 storage에 기록하기 위해 Redux를 사용하고자 계획했습니다. React와 적용 방법이 사뭇 달라 적용하는 데까지 많은 시간이 걸렸습니다. 그중 가장 어려웠던 부분은 Redux 적용이었습니다.

Redux는 server-side rendering을 해서는 안되었고, 오직 클라이언트 영역에서만 동작해야했고 Provider 컴포넌트로 children을 감싸야만 했습니다. 이 부분이 가장 어려웠습니다. 

(persistStore 메소드로 store를 감싸야했는 데, store를 찾지 못하는 이슈와 session storage dispatch 안되는 이슈가 가장 힘들었습니다.)

 

회고

현재 취준하면서 재밌는 프로젝트를 하고자 아이디어를 갑작스럽게 떠올랐고 즉흥적으로 개발하기 시작했습니다. (거의 모든 제 프로젝트들이 그러하듯이...) 처음 사용해보는 프레임워크였기에 난항을 겪는 만큼 즐겁게 개발을 할 수 있는 것 같습니다. (될듯 말듯한 프로젝트는 제가 포기하지 않고 계속해서 개발할 수 있는 원동력이 되는 것 같습니다.)

기능들이 전부 개발되지 않았기에 github에는 private로 설정했습니다.기능이 모두 개발된다면 public으로 전환할 것이고, 그 이후부터는 새로운 기능 구현, 리팩토링 등을 진행할 것입니다.