[TIL] 2021/12/23 Thu - 소셜 공유하기

 

 

 

 

 

 

Today I Learned

 

 comment API 모듈 작성 

 

오늘은 커뮤니티 페이지의 게시글에 들어갈 댓글 목록 조회, 추가, 수정, 삭제 모듈을 작성하였고,

이전 미니 프로젝트에서 댓글 모듈을 연결해 본 경험이 있어 어렵지 않게 써내려갈 수 있었다.

 

모듈을 작성하는 과정에서 전날 백엔드 분들과 정했던 댓글 API 명세서에서 response로 받을 데이터 형태에 수정이 필요할 것 같아

스프링 짱짱 팀장님께 말씀 드렸고, 빠르게 수정해주셨다!

 

CRUD를 할 때마다 느끼는 점은 비슷한데,

어떤 데이터를 보내서, 어떤 데이터를 받아올 지는 물론이거니와,

리스트나 딕셔너리 등 보내거나 받을 데이터의 형태에 대해서도 신경써야 한다는 것이다.

 

데이터의 형태에 따라 활용할 때 코드가 더 복잡해지거나 간결해지기도 하고,

상태 관리 측면에서도 달라진다는 생각이 들었다.

 

 

 퀴즈 결과 소셜 공유하기 구현 

 

소셜 공유하기는 어느 소셜이냐에 따라 방법이 달라지는데,

페이스북, 트위터, 라인, 링크 복사는 비교적 쉽게 구현할 수 있었는데

오픈 API를 사용해야 하는 카카오톡은 구현하는 데 굉장히 오래 걸렸다.

 

 

페이스북, 트위터, 라인

 

react-share 라는 라이브러리 설치 후 버튼과 아이콘을 임포트해주면 끝이다.

정말 이게 끝이다.

 

 

링크 복사

 

링크 복사도 react-copy-to-clipboard 라는 라이브러리를 사용했으며,

react-share와 마찬가지로 컴포넌트를 임포트한 후 사용하는 게 끝이다.

 

다른 소셜 공유하기 버튼은 공유하기 위한 새로운 창이 켜지는데,

링크 복사는 버튼을 클릭한 후 아무런 액션이 없으면 유저가 헷갈릴 것 같아

copied 라는 state를 만든 후 setTimeOut을 이용하여 '링크 복사 완료!' 라는 작은 모달이 2초 동안 보여지게 만들었다.

 

 

카카오톡

 

사실상 하루종일 카카오톡 구현하기만 했다고 해도 무관할 정도로 구현하는 데 애를 많이 먹었다.

 

카카오톡은 유일하게 cdn으로 오픈 API에 접근해서 sdk로 구현해야 했는데, 

여러 레퍼런스를 참고하면서 작성하다 보니 하나가 되면 다른 게 안 되는 식의 오류가 계속되었다.

 

오류가 난 원인은 오탈자를 냈거나 카카오 api 자체 메소드를 제대로 사용하지 못하는 등이 주를 이루기도 했고,

에러가 발생한 경우 카카오에서 에러 메시지를 바로 보내주기 때문에 하나하나 해결해 나가다 보니 대부분 바로잡을 수 있었다.

 

나는 useEffect를 활용해 script 엘리먼트를 생성할 수 있는 useScript라는 커스텀 훅을 만들어서 api에 접근했는데,

문제는 퀴즈 결과 페이지를 렌더링 한 후 시간 차를 두고 api에 접근하게 되어 실질적으로는 리프레쉬를 해야만 접근이 가능하다는 점이었다.

그래서 console.log(window.Kakao)를 해보면 undefined로 출력이 되고

리프레쉬를 해야만 정상적으로 window.Kakao가 출력이 되었다.

 

리액트에서 카카오톡 공유하기를 구현한 여러 케이스들을 찾아보면서 해결 방법을 알아냈다.

정말 간단했는데, index.html에 직접 cdn 스크립트를 작성했더니 문제가 해결되었다.

 

다만 로컬 환경에서만 확인했기 때문에 배포 후에도 문제 없이 작동하는지도 꼼꼼하게 확인해 봐야겠다.