프로젝트 개요
프로젝트 이름은 'ox-note' (레포 이름입니다..ㅎ) 입니다. 이름에서 알 수 있듯이 ox 퀴즈를 저장하는 노트인데, ox 퀴즈 등록을 본인이 직접 할 수 있고 등록한 문제들을 기준으로 정답률, 최근 틀렸는지 여부 등을 종합해서 내가 자주 틀리는 문제가 뭔지 등을 체크할 수 있습니다.
여러번 문제를 회독하는 공시생들을 위해 시작한 프로젝트입니다.
개발은 React + vite + TypeScript를 사용했습니다. 번들로러써 vite를 사용한 가장 큰 이유는 빠르기 때문입니다. 그것과 더불어서 HMR과 번들링 등을 모두 종합적으로 제공하고 있는 번들러이기 때문에 선택했습니다.
React를 선택한 이유는 '빠르게 MVP를 만들 수 있을 것 같아서'입니다. 하지만 이것은 많이 큰 패착이었습니다.
문제 인식과 그 이유
개발 환경의 특징은 아래와 같습니다
- 서버 없음 주의 (2-tier)
FireStore에 직접 접근해서 CRUD 구현 중- 그리고
React는 UI라이브러리다.
현재 진척 상황은 React기반의 애플리케이션을 만들고 있고 CRUD는 충분히 가능한 상황입니다. 하지만 개인적인 학습과 프로젝트를 진행할수록 'React 기반이 아닌 Next로 리팩터링 해야 하는 게 맞지 않나?'라는 생각이 강하게 들고 있습니다.
익숙한 라이브러리를 통해 빠르게 어플을 만들고자 했지만취업 준비를 하면서 (자소서 + 과제테스트 + 면접) 프로젝트에 온전히 쏟을 수 있는 시간이 많이 확보되지 않았습니다. 면접이나 과제테스트가 잡히면 그것에만 몰두하기 때문에 '빠르게 MVP를 만들기'가 쉽지 않았습니다.
또한 FireStore를 통해 DB 구조를 설정하는 데도 상당히 많은 삽질을 했습니다.
나는 어떤 점에서 삽질했는가?
- 초반에 개인 유저의 콜렉션에서
카테고리 - 문제의 형태로 구조를 잡았었습니다.- 카테고리 추가 기능이 있었고 카테고리별로 문제를 모아보는 기능이 있어서 이게 맞는 줄 알았습니다.
- 하지만, 개인화된 문제를 선택하게 될 때 '카테고리' 안에 문제가 있게 쿼리 검색이나 필터링하는 데 불필요한 연산이 많아졌습니다.
- 따라서 '카테고리'와 '문제'를 각각의 문서로 만들고, '문제 - 데이터'의 형태로 구조를 변경했습니다.
리팩터링을 생각하게 되는 이유는 다음과 같습니다.
- 클라이언트에서 DB로 바로 접근하는 것에 대한 위험성
- 로그인 기능 구현을 구분되어야 할 데이터들
서버가 없기 때문에 DB에 접근해서 데이터를 불러온다는 점이 내심 불편하고 불안했습니다. 보안 측면에서도 좋지 않았고 서버에서 가공해서 받으면 데이터들을 굳이 클라이언트에서 가공해서 받는다는 점이 오히려 사용자 경험을 좋지 않게 만드는 부분이라고 생각했습니다.
어쨌듯 JS 번들을 가져오고 그 안에서 데이터를 로딩하는 게 React에서 하는 일인데 데이터를 Get 하는 역할은 서버에서도 다 받아서 제공할 수 있지 않나? 라는 생각이 들었습니다. 또한 로그인 기능이 추가되어야 하는데, 사용자 유효성 검사와 같은 기능을 클라이언트에서 하는 것 보다 서버에서 하는 게 더 맞지 않을까…. 결국 온전한 서버는 아니더라도 어느 정도 서버 역할을 해주는 무엇인가 필요하지 않을까 하는 생각이 들었습니다.
결론
장기적으로 봤을 때는 지금까지 하던 것을 접고 Next.js로 마이그레이션 하는 게 맞는다고 생각합니다. 서버가 없는 상황에서 UI 라이브러리만을 가지고 프로젝트를 진행한다면 결국 용도에 알맞게 사용되지 않은 레거시 코드가 될 것이 자명합니다
또한, 개발적인 관점에서도 서버에서 데이터를 fetch하고 그 결과만을 업데이트하는 방식으로 접근할 수 있지만 그게 되지 않는다는 점과 이를 기반으로 문제가 발생할 수 있다는 점(보안 측면) 에서 지금 노선을 바꾸는 게 좀 더 탁월할 수 있습니다
하지만 역시 문제가 되는 점은 '시간'입니다. 빠르게 구현을 마치고 어느 정도 반응을 보고 싶은데 현재 리팩터링에 들어가게 된다면 시간은 무기한적으로 늘어날 수 있습니다.게다가 주도적으로 Next.js 프로젝트를 해본 적이 없기 때문에 학습하는데에도 시간이 소요될 것으로 예상합니다.
따라서, 지금 내 코드가 레거시가 될 것이 분명하지만 시간은 벌어올 수 없기 때문에 빠른 시일 내에 현재 개발을 마무리하고 Next.js로 리팩터링 하는 방식으로 방향성을 정했습니다.
늦어도 설 전까지는 v1 개발 완료 하겠습니다.
