프로젝트 이름 : Bunny Letter
동기
카카오톡 공유하기 API가 사용해보고 싶었는데 프로젝트 주제를
고민하다가 새해 기념으로 편지를 써서 공유하는 사이트를 만들면
카카오톡 공유하기 API의 사용 목적에도 적합할 것이라 생각해서 제작했다.맡은 역할
Front-End기간
1주반사용기술스택
Front-End : HTML/CSS, Javascript, React
Back-End : Node.js, Sequalize, Express, MySql
ETC : Kakao API프로젝트 진행
1. UI
웹 사이트 기능 특성상 네브바는 딱히 필요가 없어, 로그인과 회원가입 버튼만 위치시켰다. 그리고 메인 기능인 편지쓰기가 가장 눈에 띄어야하기 때문에 정가운데 편지 이미지를 위치시키고 바로 편지쓰기를 할 수 있게 만들었다.
2. 라이브러리
편지는 토끼의 얼굴에 쓸 수 있는데 이 편지가 토끼모양 그대로 전달됐으면 좋겠다는 생각에 특정 DOM을 이미지화 할 수 있는 라이브러리로 dom-to-image를 사용했었다.
뒤늦게 배포 후 핸드폰으로 테스트를 하니 dom-to-image는 크롬에서만 작동하는것을 알게되었고 html2Canvas라는 라이브러리로 바꿨다. BunnyLetter는 편지를 textarea에 적게 되는데html2Canvas의 경우 textarea는 한 줄 이상 캡쳐가 안된다는 큰 단점이 있어 최종적으로 nidi/html2canvas 라이브러리를 사용하게 되었다.
아쉬웠던점
이미지를 데이터베이스에 올리는게 감이 안잡혀서 많은 시행착오와 고민을 했던 프로젝트였다. 캡쳐한 이미지가 넘어오는 형식을 확인하니 blob이라서 디비에 저장할때 어떻게 저장해야할지 고민했고 발표시에는 base64의 굉장히 긴 string을 저장해서 시연했다.
추후 multer를 사용하면 해결할 수 있다는것을 알게되어 회의 후에 디벨롭해야겠다 생각했다.
그렇게 저장을 하면 지금은 카카오톡 공유하기 버튼 클릭시 고정이미지가 전송되는데 실제
작성자가 작성한 이미지도 디비에서 가져와 보낼 수 있지 않을까 생각한다.
후기
평소 사용해보고싶던 카카오톡 공유하기 기능을 적용해서 우리 웹사이트가 카카오톡으로 공유되는게 너무 신기해서 카톡오는것을 보고 정말 내새끼처럼 애정을 주었던 프로젝트였다. 기획을 제외하면 일주일도 채 안되는 시간안에 만들게 되었는데 두명이서 진행한 프로젝트였던만큼 많은 의사소통을 할 수 있었고 덕분에 시간안에 만들었다고 생각한다. 의사소통의 중요성!!
마지막으로 라이브러리 사용시 브라우저 호환성을 체크해보는 습관을 들여야겠다고 생각했다. 미리 확인했다면 시간을 훨씬 절약할 수 있지 않았을까..
