개발 관련 최신 트렌드 분석 페이지를 만들기로 프로젝트 컨셉을 결정하고 나서, 가장 먼저 해야할 것은 어떤 기술 스택 및 외부 서비스들을 활용할 지를 정하는 것이다. 나는 사이드 프로젝트를 진행할 때 항상 되도록이면 써보지 못했던 신기술로 최대한 세련된 서비스를 완성하는 것을 목표로 삼기로 했다. 이번에 새롭게 공부하고 이 서비스에 적용할 기술 스택은 typescript, RxJS, context API, docker, netlify 정도가 있을 것 같다.
TypeScript
typescript는 한 마디로 말해, 기존의 weak type language였던 javascript를 strong type language로 바꾸어주는 도구라고 말할 수 있을 것 같다. C와 java로 프로그래밍을 처음 접했던 나는 javascript의 타입 선언 방식과 prototype based OOP 등의 방식이 익숙하지 않았었는데, class와 interface 및 decorator 드으이 기능을 새롭게 지원한다고 하니, 타입스크립트를 이용한 개발은 이전에 비해 얼마나 편리해질 지 경험해보려고 한다.
RxJS
RxJS는 이벤트 스트림과 데이터를 쉽게 만들고 다룰 수 있도록 도우는 라이브러리다. 복잡하지만 가독성이 좋은 비동기적 코드를 더 쉽게 작성할 수 있도록 도운다. javascript에서 비동기 처리는 항상 promise를 기반으로 해왔는데, 이러한 방식은 복잡한 비동기 처리가 필요한 서비스에 대해서는 콜백 지옥 등의 한계를 가지고 있다. 가능하다면 이번 프로젝트에 rxJS를 적용해 복잡한 비동기처리에 대해 공부하고, 더불어 reactive programming과 event stream의 개념에 대해서도 공부해보려고 한다.
Context API
context API는 react 내에서 전역적으로 state를 관리할 수 있는 도구 중 하나이다. 이전까지는 redux를 사용해 왔는데, 전역적인 state 관리가 주된 목표라면 redux는 사용하기에 너무 번거롭고 원치 않는 부가적인 기능들을 많이 가지고 있다. redux를 쓸 때면 상태 관리 하나만을 위해서 추가로 작성해야 하는 코드의 양이 너무 많아진다고 느껴왔는데, 이번에 context API를 쓰면서 최대한 가볍게 상태관리 코드를 작성해 보려고 한다.
Docker or Netlify
docker 혹은 netlify는 배포단계에서 활용하게 될 서비스인데, 배포 자동화에 대해 공부할 필요가 있다고 느껴 틈틈이 공부해 온 docker를 이번 프로젝트에 활용해 볼 생각이다. Netlify는 굉장히 간편하게 deploy를 할 수 있게 해주는 서비스인데, 이번 프로젝트는 별다른 backend없이 frontend 코드만 작성하게 될 수도 있을 것 같아 이 경우라면 간편하게 netlify를 활용해 보는 것도 나쁘지 않다고 생각하고 있다.
other
추가적으로 이번 프로젝트에서는 데이터를 표나 그래프 등으로 시각화할 필요가 있으므로 관련 라이브러리를 사용하게 될 것이다. 이에 대해서는 프로젝트를 진행해 나가면서 이것저것 알아보고 적당한 것을 채택하게 될 것 같다.
Conclusion
결론적으로 이번 프로젝트에서 사용하게 될 기술 스택은 대략 아래와 비슷할 것 같다.
- react
- react-hooks
- context API
- typescript
- rxJS
- stack exchange (stack overflow API)
- data visualization 관련 library
- docker (with AWS) or netlify
