motivation

사이드 프로젝트의 중요성에 관한 글을 읽고, (https://velog.io/@chris/10-tips-for-starting-and-creating-side-projects) 꾸준히 사이드 프로젝트를 다양하게 진행해보아야겠다고 다짐하게 된 뒤 계획했던 첫 번째 프로젝트는 바로 블로그 프로젝트였다. 블로그를 만들어야겠다고 생각한 이유는 첫 째로 앞으로 내가 할 공부들을 착실히 글로 기록해 놓고 싶었다. 공부한 것을 글로 기록함으로써 유형의 결과물을 생산하고 싶었고, 내 머릿속에만 있는 학습 개념들을 글로 옮기면서 다시 한 번 되짚어보기 위함이었다. 두 번째 이유는 기본적인 리액트 컴포넌트 운영 컨셉을 정하거나 백엔드의 CRUD operation 및 간단한 디자인까지 완전한 서비스를 만들기 위해 간단하면서도 필요한 모든 것들을 연습할 수 있을 만한 프로젝트라고 생각했기 때문이다.

focus

이러한 이유로 내가 공부한 것들을 기록하고, 사람들에게 공유할 수 있는 블로그를 직접 만들기로 결정했고, 평소에 공부하고 싶었거나 프로젝트에 적용해보고 싶었던 기술들을 마음껏 써가면서 프로젝트를 진행하기로 했다. 프로젝트를 시작하면서 설정했던 주안점은 아래와 같다.

  1. backend를 framework의 도움없이, apolloServer 및 native JS만으로 작성한다.
  2. graphql과 react hooks의 도움을 받는 client는 최대한 간단하고 명료해야 한다.
  3. frontend의 모든 component는 hook을 기반으로 하고, class component를 사용하지 않는다.
  4. business logic이 담겨있는 container component와 view logic이 담겨있는 presentational component를 명확히 구분한다.(presentational component는 가급적 state를 사용하지 않는다.)
  5. 컴포넌트간 state 교환이 적고 component 깊이가 깊지 않으므로, redux를 쓰지 않는다. (어떤 상황에서 redux가 효용을 발하는지 느껴보기 위함)

아무런 생각없이 목표만을 설정한 채 무작정 코딩을 하는 것 보다는 어떤 식으로 코드를 짤 지에 대한 전반적인 컨셉을 명확히 하고 프로젝트를 시작하는 것이 더 좋은 프로그래머가 되는 방법이라고 생각했다. 위 주안점들을 지켜가면서 코딩을 하면 내가 설정한 컨셉의 장점은 무엇이고 단점은 무엇인지, 더 좋은 코드를 짜려면 어떻게 해야하는지에 대한 생각을 깊이 할 수 있게 되는 것 같다.

아래는 프로젝트에서 사용한 기술 스택이다.

Client

  • React
  • React Hooks
  • React Router
  • Scss
  • Apollo Client
  • Prismjs

Server

  • Node.js
  • Graphgl
  • Apollo Server
  • jwt
  • mongoose

External Service

  • AWS EC2 for deployment
  • AWS S3 for image storage

Plan

이 프로젝트는 9월 한 달동안 진행하기로 계획했는데, 첫 일주일 정도는 처음 써보는 api인 graphql에 대해 공부하고, 나머지 약 3주동안 실제 프로젝트를 진행했던 것 같다.