본문 바로가기
토이 프로젝트

[토이프로젝트] 갑분혼 (갑자기 분위기 혼자 프로젝트)

by img 2022. 7. 30.

같이 토이프로젝트를 진행하던 스터디원분이 급작스런 회사에서의 주포지션변화(?)로 백엔드보다 프론트엔드 공부를 좀 더 치중하게 되면서, 자연스럽게 진행중이던 프로젝트가 점점 늘어지더니 결국 무기한 중지가 되었다.

원래 진행중이던 주제는 나중에 스터디원분이랑 할 날을 기다리며 보류하고, 언젠가는 꼭 만들어야지라고 생각하고 있던 주제로 약간 방향을 틀어서 혼자 진행하게 되었다. (사이트 추후 공개)

실제 서비스를 해볼 생각이라서 현재 깃 레포가 private이라 나만 볼 수 있는 잔디지만(ㅠㅠ), 약 5개월간 퇴근후나 주말에 꾸준히 작업해왔다. 써보지 않은 기술을 최대한 사용해보려고 해서 처음부터 공부할게 너무 많았고 커밋이 안 된 날 중에는 프로젝트 작업이 아닌 기술 관련 공부 등으로 시간을 보낸날도 많았다.  처음에는 그냥 공부용 토이프로젝트로 가볍게 시작했지만 점점 이 프로젝트에 애정이 가서 점점 더 욕심을 냈던 것 같다. 

사용하기로 결정한 스킬셋은 다음과 같다.

  • React
  • Next.js
  • Redux
  • tailwindCSS
  • Typescript
  • firebase

1. React (Next.js)
원래
프로젝트는 React 공부하고자 하는 목적으로 React로만 진행을 하고 있었는데, 실종견을 찾는다는 주제 특성상 검색에 SEO에 신경을 써야할 것 같았고, Nuxt 회사 서비스 만들어 봤기 때문에 Next 수월하게 사용할 있을 같아 Next.js 사용하기로 했다.

2. Redux
React
상태관리 라이브러리로는 Redux 사용하기로 했다. Redux가 상태관리 라이브러리의 큰형님 같은 느낌이라 언젠가 한 번은 써보고 싶었었는데, 난이도가 제일 높다는 얘기도 있어서 Redux를 쓸지말지 고민을 많이 했었다. 그래도 어렵다는 Redux 맨처음 배우면 다른 MobX Recoil, Zustand 같은건 수월하게 배울 있을 것 같은 반면에 쉬운것부터 배워서 맛을 알아버리면(이미 context api 맛을 알아버리긴 했지만) 영영 Redux 사용해보려고 하지않을것 같아서 Redux 사용하기로 선택했다. 어쨌든 내용과 관련해서 말하고 싶은 부분이 많은데 그건 글을 따로 작성하려고 한다.

3. TailwindCSS
css는 Ant-design이나 Bootstrap같은 사용하지 말아야지라고 생각했었고 (커스터마이징을 위한 시간이 오래 걸릴 수도 있다는 것을 깨달아 버려서 + 나만의 디자인이 나올 없을 같아서), css class형태로 작성할 있어서 Bootstrap보다는 자유도가 높고 CSS보다는 생산성이 훨씬 좋은 tailwindCSS 사용하기로 했다. (라고 했지만 나중엔 DaisyUI를 조금 사용하기도 했다^^.... )

4. Typescript
그동안 타입스크립트 좋다는 이야기는 익히 들어왔고(심지어 타입스크립트 써야하는 이유에 대해서 블로그 포스팅까지 했었음...^^;;;; (https://imagineu.tistory.com/6), 인강을 들으면서 공부도 했었기 때문에(https://www.udemy.com/course/typescript-for-beginners-u/) 이번 프로젝트에서 안써볼 이유가 없다고 생각했다. 처음에는 DB 스키마나 기능들이 계속 바뀌는 바람에(firebase가 어떤 기능이 되고 어떤게 안되는지 미리 체크했었어야 했다ㅠㅠ) "any"가 난무했지만^^..., 나중에 틀이 대충 잡히고나서는 점점 any를 없애가는 과정에 있다. 타입스크립트를 써보면서, 처음엔 type이나 interface를 하나하나 정해줘야하고 수정사항이 생길때마다 type까지 같이 신경써줘야하니 속도가 더뎠지만, 나중에는 과거의 나에게 고마워하며 코드를 짤 수 있었다. 한참 전에 썼던 코드를 보더라도 타입이 써있기 때문에 어떤 데이터가 들어오는지 바로바로 체크할 수 있었고, 잠재적인 버그까지 체크해주니 정말 효자였다..... 왜 타입스크립트가 개발자 경험이 좋다고 하는지 알 수 있었다. 

5. Firebase
DB는 혼자 진행하기에 부담없는 firebase 선택했다. firebase는 처음 사용해보는거였지만, 언젠간  한번은 사용해봐야지라고 생각했었기도하고, 서버를 직접 만들어서 DB를 올리는 노력에 비해서는 훨씬  수고로울  같다고 생각했다. 그리고 나중에 프로젝트가 생각보다   커져서 서버가 필요한 작업이 생기게 된다면 firebase functions 기능(serverless)을 node.js(Express)로 지원하고 있기 때문에 더 부담없이 쓸 수 있을 것 같았다. (회사에서 node.js 쓰는중)

 

의도치 않게 개인 프로젝트가 되어 버려서 중간중간 나홀로 절망도 많았지만 그래도 서비스를 실제 출시할만큼의 MVP형태는 갖춘것 같아 그간의 진행기를 써보려고한다. 다음글은 '무작정 코드로 치기 전에 알았으면 좋았을 것들'이 될 것 같다. 

댓글