[회고] 토이 프로젝트 '오심테' 회고

프로젝트 명 : 오심테(오늘의 심리테스트)

프로젝트 기간 : 2023.05.17 ~ 2023.06.08

프로젝트 소개 : 카테고리 별 심리 테스트 모음집

1. 다양한 심리 테스트를 하나의 플랫폼에서 빠르고 간편하게 찾기
2. 심심할 때, 시간 때울 때, 아이스 브레이킹이 필요할 때 가볍게 즐기기
3. 가족, 친구, 연인과 테스트를 공유하며 추억 쌓기

기술 스택 : NextJS, React, Javascript, TailwindCSS, Recoil, Firebase, Vercel

배포 링크 : psy-test-flame.vercel.app

깃허브 링크 : https://github.com/sweetyr928/Psy-Test

---

나의 첫 토이 프로젝트, '오심테'를 마무리 짓는다.

동생과 심리테스트를 즐겨했었다. 자기 전에 누워서 하기도 했고, 이동할 때, 음식점에서 기다릴 때 심리 테스트를 하고 서로 결과를 공유하며 놀았다. 매번 네이버에 심리 테스트를 검색하고 블로그에 들어가서 하나의 심리테스트를 하고, 또 나와서 다른 블로그에 들어가는 과정 속에서 항상 심리 테스트 모음집 플랫폼이 있었으면 좋겠다고 생각했었다. 그렇게 오심테를 만들게 되었다. 

토이 프로젝트라 규모는 크지 않지만, 내가 목표했던 기능들은 전부 완성했고 새로운 스택을 사용해 볼 수 있는 기회가 되어 좋았다. 이번 기회에 새롭게 사용해 본 스택에 대해 느낀 점 또는 후기를 간단히 정리해 보자. 

1. Next.JS

처음 토이 프로젝트를 해야겠다고 마음 먹었을 때, 가장 써보고 싶었던 스택이 바로 NextJS였다. NextJS는 SEO 관련 키워드를 가지고 동기분들과 대화를 나누다가 접하게 되었다. 그리고 마침 내가 유데미에서 구매한 리액트 강좌에서 간단하게 이를 다루고 있어 실습 겸 미니 프로젝트를 만들게 된 것이다.

NextJS를 사용하면 좋은 사용자 경험을 만듦과 동시에 SEO 측면에서 베네핏을 얻게 된다는 장점이 있어 매력적이라고 생각했다. 또한 NextJS는 파일 기반 라우팅을 제공하여 이전에 React 단독 사용 시 라우팅을 직접 짜주고, path를 지정해 주었던 과정이 따로 필요 없어, 이 부분이 개발할 때 굉장히 신기했고 편리하게 느껴졌다.

NextJS에서 제공하는 Image 컴포넌트의 레거시 코드나 Warning 메세지 등으로 인해 애를 먹었지만, NextJS에서 이미지를 사용할 때 Image 컴포넌트를 사용하라고 하니 굳이 <img> 태그를 고집하고 싶지는 않았다. 이 부분은 지피티가 많이 도와줬다.

사실 Next.JS를 처음 사용해보아 매우 간단한 프로젝트를 만들게 되어 Next.JS의 장점을 십분 활용하지 못했다는 것에 대한 아쉬움이 크다. Next.JS를 사용하면 쉽게 풀 스택 애플리케이션을 만들 수 있고 auth 부분도 라이브러리를 사용해 1분 컷(?)으로 만들어준다고 하니, 나중에 이 부분도 꼭 활용해보고 싶다. Next.JS를 주로 하는 강의를 수강해 볼 생각도 있다.

https://www.reason-to-code.com/blog/why-we-couldn't-feel-the-difference-of-nextjs/

2. Vercel

NextJS 하면 항상 따라오는 짝꿍, Vercel은 NextJS에 최적화 되어있고 많은 사람들이 사용하는 배포 수단으로 알려져 있어 자연스럽게 배포에 사용하게 되었다.

Vercel로 배포하는 과정은 상당히 간단하지만 개발할 때 보지 못했던 에러들을 만날 수 있었다. Vercel 깃허브 레포지토리에 있는 Discussion은 웬만하면 다 읽어본 것 같다. 나와 비슷한 에러를 마주친 사람들이 많았고 버전이 문제다, 이건 버그다 등 다양한 의견이 있어 해결하는데 굉장히 애를 먹었다. 결론적으로는 에러를 해결하고 배포를 완료하게 되었고, 해결하기 위해 고군분투했던 모든 과정들이 좋은 밑거름이 될 것 같다.

3. Tailwind CSS

CSS 라이브러리를 선택하는 과정에서도 은근 고민이 많았다. NextJS를 처음 사용해보는 것이라 다른 것에는 부담을 느끼고 싶지 않아서 Typescript도 제쳐놓고 Javascript를 선택했는데, NextJS와 Tailwind CSS가 함께 많이 쓰인다고 하니 Styled-Components와 Tailwind CSS 사이에서 갈등이 되었다. 늘 새로운 CSS 라이브러리에 대한 갈망도 어느 정도 없진 않았던 터라 이번 기회에 새로운 라이브러리를 배울 수 있어 좋은 기회가 될 것이라고 생각하여 Tailwind CSS를 선택했다.

사용해 보니 다행히 러닝 커브가 높지 않았고, 공식 홈페이지와 챗 지피티를 참고해 가며 만들다 보니 금방 익숙해질 수 있었다. Tailwind CSS의 또 다른 장점은 반응형을 잘 지원해 준다는 것이다. Tailwind CSS 덕분에 그리 어렵지 않게 반응형을 적용할 수 있어 다음번에 또 사용하고 싶다는 생각이 들었다.

4. Firestore

백엔드 개발자가 없이 나 혼자 만들어보는 토이 프로젝트였기에 데이터베이스와 서버를 어떻게 해야할지 고민이 되었다. 이전에 투두 리스트를 만들 때처럼 Json-server로 하기에는 성에 차지 않았고, 실사용되는 앱처럼 만들어보고 싶어서 Firestore를 선택하게 되었다.

Firestore를 사용하면 쉽게 데이터베이스를 구축할 수 있고 express로 서버 단 로직을 구축하는 등의 과정이 필요 없어 프론트엔드 혼자서 프로젝트를 진행할 때 매우 편리했다. 다만, 데이터베이스에 이미지를 외부 url로 저장하는 방식을 사용해 이미지 로딩 시간이 오래 걸렸다는 점이 좀 아쉽다. 찾아보니 Firestore에서도 S3처럼 이미지를 저장하는 방식이 있는 것 같던데, 시간 관계상(SQLD 시험 전에 끝내는 것이 목표였음) 이미지 처리 부분에 대해 깊이 찾아보고 더 좋은 방식으로 처리할 수 없었다는 게 아쉬운 점으로 남는다.