## #01. 개발 환경 준비 공부한것들을 까먹기 전에 정리하기 위해 블로그를 시작하기로 했고 이왕 하는겸 직접 개발해보기로 마음먹은게 2018년 쯤이었고 이런 저런 핑계로 미루다가 2020년이 되어 시작하게 되었다. 평소 적용해 보고 싶었던 기술들을 적용하였고 처음부터 완벽하게 서비스가 나오기 보다는 직접 이용해 보면서 기능들을 추가하기로 했고 첫 배포까지 약 5시간 정도 걸렸다. ## 적용 기술 ### Front-End - React (v.16.12.0) - Redux - Redux-Saga - Typescript - aws-amplify ### Back-End - CloudFront - Route 53 - S3 - Lambda - Serverless - Dynamo DB - Cognito 프론트엔드는 React + Redux + Redux-Saga 로 구성되었으며 AWS SDK를 사용하여 AWS와 연계하였다. 백엔드는 AWS 서비스를 이용하여 구성하였으며 S3에 있는 Static 파일을 가져와 프론트 화면을 보여주고 Dynamo DB와 연동해서 데이터를 읽고, 쓰고, 수정하는 등의 이벤트들은 Lambda로 적용하였다. ## Front-End 먼저 프론트엔드는 가장 친숙한 React 라이브러리를 활용해서 개발진행 하였다. React 외에도 Angular 7+로 개발진행한 경험이 있고 Vue 나 요즘 조금씩 주목을 받고 있는 Svelte 또한 선택지가 있었지만, 이번 개발에서 적용해 보고 싶은 부분이 Typescript와 React Hooks였으므로 React 로 선택하였고 Create-React-App 보일러 플레이트를 적용하였다. Angular.js가 나온 이후 React와 Vue 등 프론트엔드 프레임워크들이 쏟아졌는데 요즘은 특정 프레임워크가 다른 것보다 뛰어나다 라기 보다는 개발 방법과 스타일이 각자 다른것 같다. 정답이 존재하는 것도 아니고 비즈니스 측면에선 최소의 투자에 최고의 효율만 낼 수 있다면 어떤 선택지든 훌룡한 도구가 될 수 있을꺼라 생각한다. React는 다른 프레임워크와 다르게 View만을 담당하기 때문에 어플리케이션의 규모가 커질 경우 다른 라이브러리들의 도움이 필요한데, 여기선 Redux 와 Redux-Saga를 선택하여 활용하였다. Redux 외에도 MobX 라는 선택지가 있었지만 개인적으로 Redux가 추구하는 방법이나 방식이 마음에 들고 무엇보다 사이드 이펙트나 비동기 처리를 해주는 등에 필요한 Redux-Saga가 필수적으로 필요하다 생각되어 Redux + Redux-Saga를 선택하였다. 처음으로 React를 시작했을때 Generate를 정확히 이해하지 못해 Javascript ES6+인 책들을 뒤져가며 공부를 했었는데 한번 흐름을 이해하고나면 Generator를 활용하는 Redux-Saga를 이용해 개발 하다 보면 큰틀이 잡아져서 개발하기 한결 수월할꺼란 확신이 든다. 특히 channel을 활용하여 외부 이벤트와 연결하고 이벤트를 받아 처리하고 이벤트를 일시 중지, 재시작 등 매우 다양하게 활용할 수 있는 점에서 비즈니스 로직이 복잡한 React 어플리케이션을 개발 해야 한다면 필수로 선택되어야 하는 기술 스택이라고 생각된다. 언어는 Javascript 에서 한단계 더 나아간(?) Typescript를 적용하였다. 처음에 타입스크립트를 알게 되었을때 그렇구나 하고 넘어갔는데 코드스피츠에서 진행한 Kotlin 강의를 듣고 나서 프론트개발에서도 타입을 도입했을때 얻는 이득에 대해 완전히 이해하고 적용해 도입해보기로 했다. 개인적으로 Kotlin 강의를 너무 재밌게 들어서 프론트에도 도입을 해보고 싶은 언어 중 하나인데 (당연하지만 React를 Kotlin으로 적용시킨 라이브러리도 있다!) 우선은 타입스크립를 이용하면서 타입에 좀 더 친숙해 진후, Kotlin을 이용해서 개발을 진행해 보기로 했다. ## Back-End 백엔드는 AWS Lambda를 활용하여 진행하였다. 가장 쉽게 찾을 수 있는 Serverless + Lambda + Dynamo DB를 활용해 작업 진행 하였으며, 글쓰기 위한 권한 처리를 위해 Cognito를 연동하였다. 이전에 개발한 프로젝트에서 한번 적용은 시켰으나 이벤트 처리를 담당하는 Lambda를 거의 다루지 못해서 이번 기회에 기본적인 CRUD 정도 다루는 수준으로 작업을 진행하였다. 언어 선택은 익숙한 javascript를 이용한 Node.js로 진행하였고 API개발 역시 Typescript를 적용하였다. 그 외 Lambda 및 Dynamo DB 활용은 Serverless 프레임워크를 이용하여 개발진행하였다.