🙌 makeToon 완성기 - 1

개발 전 준비 사항 🤔

오랫만에 혼자하는 프로젝트이고 열심히 해보고 싶어서 차근차근 시작하기로 하였습니다. 그래서 개발 전에 미리 준비해야할 사항이 있을까? 싶어서 리스트를 나열해보았습니다.

• ❌ 지도 모양의 svg 파일
• ❌ 간편 로그인을 위한 oAuth 연결
• ❌ 배포를 위한 aws ci/cd 작업
• ❌ 정적 이미지 관리를 위한 s3 연결

나열해본 리스트는 다음과 같았고, 하나하나 꼼꼼히 준비하였습니다.

지도 모양의 svg 파일 😬

구글에 지도 모양의 svg파일을 검색하면 여러가지 블로그와 파일들이 나옵니다. 이 중 저작권 관리가 쉽고 다루기쉬울 만한 파일이 뭐가 있을까 찾다가 위키백과에서 한국 지도를 찾아볼 수 있었습니다. 2014년이 마지막 업데이트지만 그래도 쓸만할 것 같아서 해당 svg로 골랐습니다.

• ✅ 지도 모양의 svg 파일
• ❌ 간편 로그인을 위한 oAuth 연결
• ❌ 배포를 위한 aws ci/cd 작업
• ❌ 정적 이미지 관리를 위한 s3 연결

간편 로그인을 위한 oAuth 연결

사용자에게 보다 편한 UX를 제공하기위해 별도의 로그인을 구현하지 않고 oauth연동을 통해 한번의 클릭만으로 로그은을 진행할 수 있도록 하였습니다.

특별히 oAuth중 Facebook을 사용하였습니다.

이와 같이 페이스북 개발자 센터에서 앱을 등록하고 Facebook로그인 제품 검수를 받았습니다. 요즘은 COVID 19 때문에 앱 검수가 힘들다고 하던데.. 작년 12월에 미리미리 해놔서 다행인 것 같습니다.

• ✅ 지도 모양의 svg 파일
• ✅ 간편 로그인을 위한 oAuth 연결
• ❌ 배포를 위한 aws ci/cd 작업
• ❌ 정적 이미지 관리를 위한 s3 연결

배포를 위한 aws ci/cd 작업

자세한 내용은 CloudFront로-React앱-배포하기 편을 참고하여 주세요.

개발에 앞서서 미리 클라이언트의 배포환경을 구축하고 Github Actions를 이용한 파이프라인까지 만들어두었습니다.

해당 build.yml파일과 모든 개발 파일은 여기에서 확인하실 수 있습니다.

• ✅ 지도 모양의 svg 파일
• ✅ 간편 로그인을 위한 oAuth 연결
• ✅ 배포를 위한 aws ci/cd 작업
• ❌ 정적 이미지 관리를 위한 s3 연결

정적 이미지 관리를 위한 s3 연결

저는 평소 개발할 때 assets들을 배포 파일에 함께 넣어서 배포했는데 저번에 황당한 경험을 한 이후로 AWS S3에 정적 파일을 따로 저장하고 URL로 불러옵니다.

이미지 파일이랑 동영상파일들을 함께 빌드해서 배포했더니 ReactAPP용량이 8MB가 넘었었다. ㅋㅋ.. 지금 생각해보면.. 와우
사용자를 고려하지 않고 돌아가니까 상관없지~ 했던 내가 생각난다..
😑 해당 React앱 빌드는 다시 했었따.

이렇게 import해서 사용하였습니다.

• ✅ 지도 모양의 svg 파일
• ✅ 간편 로그인을 위한 oAuth 연결
• ✅ 배포를 위한 aws ci/cd 작업
• ✅ 정적 이미지 관리를 위한 s3 연결

이슈 및 해결 방법 🤷‍♂️

지도 SVG를 이용하면서 정말 많은 이슈와 문제들이 있었습니다.

SVG만 이렇게 직접적으로 다뤄본 적도 처음이었고 React에서 SVG를 사용하는게 좀 힘들었습니다.

또 지도 드래그와 줌 인/아웃, 지역 별 클릭등 기능을 구현하는데 다양한 버그가 있었습니다.

다음 포스팅에서 이러한 이슈들과 이슈별 해결방안을 설명드리겠습니다.