바다 속 나의 모습은 어떨지 지금 바로 확인해보세요! 👉🏻 테스트하러 GO!
- 개발기간: 2021.06.29 ~ 2021.07.30
- 개발 인원: FrontEnd(최경민, 조형석, 고정원)
- 내용: MBTI 테스트 사이트 개발
- 클라이언트: 도시어부팀(채널A)
📢 도시어부 유튜브 채널, 도시어부 Grrr에서도 확인 가능해요!
- ReactJS, React-Router, Styled-components(view)
- Redux-toolkit (State Management)
- Create React App (Build Tool)
- ESLint, Prettier (Code Quality Tool)
- Firebase (DB, Hosting, Storage)
- Other Tools (Git, Github, notion, Slack etc.)
- 공유하기 시 특이사항 : react는 결과물 공유(SEO)에 적합하지 않음
- react helmet으로 동적 라우팅(?)은 가능
- 결과별 SEO 대안: helmet + snap 또는 loadable-component
- 카카오톡 공유
- kakao developers의 API 중 메시지 > 카카오링크 JS 이용
- API alt 1) 'sendScrap'은 검색엔진과 같은 원리, SEO가 필요
- API alt 2) 'createDefaultButoon': 공유할 때 정보를 실어 보냄. SEO 필요 X. 그러나 버튼을 클릭할 때 버튼을 생성 => 한번 더 클릭해야 전송이 가능하므로 두번 클릭해야하는 문제가 있었음
- API alt 3) 'sendDefault': 눌렀을때 동적으로 버튼을 생성하는게 아니라, 렌더링시 만들어지므로, 공유 O & 한번클릭 O
- 페이스북 공유
- a 태그를 활용하여 비교적 간단한 공유가 가능
- SEO 필요. 카카오톡의 sendScrap API와 같은 원리
- 일반 공유
- 버튼 클릭시 가상의 input 객체를 만들어 text를 넣고, 복사 후 만들었던 input 객체를 지워준다.