motivation
사이드 프로젝트의 중요성에 관한 글을 읽고, (https://velog.io/@chris/10-tips-for-starting-and-creating-side-projects) 꾸준히 사이드 프로젝트를 다양하게 진행해보아야겠다고 다짐하게 된 뒤 계획했던 첫 번째 프로젝트는 바로 블로그 프로젝트였다. 블로그를 만들어야겠다고 생각한 이유는 첫 째로 앞으로 내가 할 공부들을 착실히 글로 기록해 놓고 싶었다. 공부한 것을 글로 기록함으로써 유형의 결과물을 생산하고 싶었고, 내 머릿속에만 있는 학습 개념들을 글로 옮기면서 다시 한 번 되짚어보기 위함이었다. 두 번째 이유는 기본적인 리액트 컴포넌트 운영 컨셉을 정하거나 백엔드의 CRUD operation 및 간단한 디자인까지 완전한 서비스를 만들기 위해 간단하면서도 필요한 모든 것들을 연습할 수 있을 만한 프로젝트라고 생각했기 때문이다.
focus
이러한 이유로 내가 공부한 것들을 기록하고, 사람들에게 공유할 수 있는 블로그를 직접 만들기로 결정했고, 평소에 공부하고 싶었거나 프로젝트에 적용해보고 싶었던 기술들을 마음껏 써가면서 프로젝트를 진행하기로 했다. 프로젝트를 시작하면서 설정했던 주안점은 아래와 같다.
- backend를 framework의 도움없이, apolloServer 및 native JS만으로 작성한다.
- graphql과 react hooks의 도움을 받는 client는 최대한 간단하고 명료해야 한다.
- frontend의 모든 component는 hook을 기반으로 하고, class component를 사용하지 않는다.
- business logic이 담겨있는 container component와 view logic이 담겨있는 presentational component를 명확히 구분한다.(presentational component는 가급적 state를 사용하지 않는다.)
- 컴포넌트간 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주동안 실제 프로젝트를 진행했던 것 같다.
