find my Roomie - 내 룸메이트 유형 찾기 테스트 개발기 (React에서 카카오링크 기능 적용하기)

본 프로젝트는 DSC Ewha 2기의 React3팀의 프로젝트입니다. DSC Ewha는 현재 2분기까지 진행되었으며, 분기별로 언어 및 분야를 선택해 스터디 및 프로젝트를 진행하고 있습니다.

리액트를 한번 배워본 김에 까먹지 않게 이것저것 공부해보며 실력을 쌓아보자는 생각으로 1-2분기 언어를 리액트로 골랐다! 그런데 우리 팀에는 리액트가 처음이신 분들만 계셔서 고민하다가, 팀원들이 리액트를 조금 더 재밌게 배워볼 수 있도록 기본에 충실하게 프로젝트를 만드는 것이 좋겠다고 판단해 구현하기 비교적 쉬운 테스트 제작을 주제로 잡아 겨울 방학동안 차근 차근 만들었다.


find my Roomie 테스트 하러 가기!
README 구경 가기!

 

✨ find my Roomie

룸메이트라는 주제를 잡고 우당탕탕 시작했다! 생각보다 테스트가 생각할 부분이 많았다. 룸메이트의 유형을 어떻게 나누면 좋을지 토론하고, 각 유형을 선별할 수 있는 질문을 뽑고, 질문의 가중치를 정하고 답변의 가중치를 정하고, 각 유형마다 특성을 고려해서 잘 맞는 궁합은 어떤 기준으로 정할지, 안 맞는 유형은 어떤 기준으로 정할지, 각 유형의 이름은 어떻게 정하면 좋을지(기똥찬 이름 구상에 기여한 DCDMJY 고맙습니다!) 생각보다 꽤 오랜 시간 동안 함께 이야기를 나눠야 했다.

특히 룸메이트의 유형과 잘 맞고 / 잘 맞지 않는 룸미 유형들을 정할 때는 기숙사 및 자취 경험이 있는 두 팀원이 열일했다! 다들 테스트를 하면서 궁금했을 "이거 대체 무슨 기준으로 찰떡 조합과 개떡 조합을 정한거지?"의 질문에 대한 답을 공개한다.

매칭 우선순위
(출처 : 우리팀 프로 기숙사러들의 뇌피셜. 가끔은 뇌피셜이 가장 정확할 때가 있다 ^^.)

1순위 : 청결민감도가 같은가?
2순위 : 집수니는 외박이 많은 룸메를 좋아한다. 어쨌든 집에 남이 없고 나만 있으면 좋은 것이다.
3순위 : 수면 시각이 같은가?
4순위 : 외향/내향 성향이 같은가?

위와 같은 기준으로 잘 맞고 / 잘 맞지 않은 룸미 유형을 뽑아내 결과 페이지에 넣었다! 아마 이런 부분을 생각하며 친구와의 결과를 비교해본다면 더 재미있을 거라고 장담한다 :)

✨ 우당탕탕 디자인

처음부터 끝까지 디자인을 맡은 것은 처음이라 사실 걱정 반 재밌음 반이었는데, 여차저차 주변 멋쟁이들의 도움으로 나름 세상에 꺼내놓을만한 결과물이 나온 것 같아서 뛸 듯이 기쁘다. 문제 페이지에는 최대한 메인 컬러만 두고 디자인 요소를 빼서 문제에 집중할 수 있도록 했고, 결과 페이지는 그동안의 심심함을 모두 잊게 할 수 있도록 볼거리가 많게 이것저것 요소를 채워넣었다.

처음부터 끝까지 디자인을 해본 건 처음이라 많이 어색하고 걱정됐지만.. 피드백 주신 디자이너분들 정말 감사합니다 큰 힘이 되었어요!

특히, 분명히 결과 설명을 보려고 url을 바꾸는 사용자가 있을 것 같았기에(나..) 유효하지 않은 페이지에는 테스트 첫 화면으로 넘어갈 수 있는 버튼을 화면에 보이게 했다! 이외에도 열심히 개발한 우리 팀원들이 주변에 자랑할 수 있게끔 개발자 페이지를 추가했다. 가볍게 시작한 프로젝트였지만 일단 하면 제대로 해야 된다는 생각에 생각보다 너무 잘 만들어버린 프로젝트가 되었다. 뿌듯하다.

기똥찬 그림에 큰 기여를 하신 DCDMJY에게 다시 한 번 고맙습니다. 덕분에 테스트가 확 살아났어요~!

 

✨ 개발

리액트를 다뤄본 사람이 별로 없다보니 초기 프로젝트 구조는 내가 작성한 코드를 기반으로 구성되었다! 주로 각자 어떤 기능까지 해올지 목표를 정하고, 그 다음 주 회의에서 어떻게 구현했는지 확인한 다음 본인이 해결하지 못한 기능을 상대방의 코드를 참고해서 수정하는 쪽으로 스터디처럼 진행되었다. 최종 버전에서는 내가 전체 페이지 라우팅, 결과 페이지(카카오 공유하기 버튼과 클립보드 기능 포함), 404 페이지를 담당했다!

아마도 누군가는 궁금해할(!) 카카오톡 공유하기 버튼 소스코드를 이곳에 적고자 한다.


* React에서 카카오링크 기능 적용하기


[1] 카카오 개발자 사이트에서 회원가입 후 내 애플리케이션을 만든다.

애플리케이션을 추가하면 된다! 어렵지 않다.

[2] 플랫폼 주소를 등록한다.

생성한 애플리케이션을 클릭하면 좌측 메뉴에 '플랫폼'을 선택할 수 있다. 나는 웹을 만들었기 때문에 Web 플랫폼 등록 버튼을 눌러 주소를 추가했다! 로컬에서 개발중일 때 캡쳐했기 때문에 http://localhost:3000을 추가해놓은 모습이다. 최대 10개까지 도메인을 등록할 수 있기 때문에 필요에 따라 다양하게 등록하면 된다.


[3] 본인의 React 프로젝트의 index.html 파일에 앱키를 추가한다.

애플리케이션의 요약정보 탭에 들어가면 해당 앱의 JavaScript 키를 확인할 수 있다! 그 키를 복사해 프로젝트의 public 폴더의 index.html 파일에 추가하면 된다. 추가해야 하는 코드는 총 2줄로 아래와 같다.

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>Kakao.init("JavaScript 키를 여기에 넣으면 된다");</script>

[4] 카카오 공유하기 버튼 컴포넌트를 생성한다.

아무래도 공유하기 버튼 컴포넌트를 별도로 만들어두고 페이지에서 불러와서 사용하는게 좋기 때문에 위의 코드와 같이 카카오 공유하기 버튼 컴포넌트를 생성했다! 버튼의 형태로 만들어 onClick때마다 onHandleShareKaKao 함수가 실행되도록 했으며, 버튼 이미지는 직접 만든 이미지를 적용했다. link의 경우 위의 카카오 개발자 사이트에서 플랫폼에 등록된 주소만 유효하기 때문에 주의하자!

이 프로젝트에서는 유형 소개, 유형 이름, 유형 이미지가 필요했기 때문에 결과 페이지에서 해당하는 내용들을 props로 내려 사용했다. 이미지나 텍스트가 더 예쁘게 보이기 위해서 여러가지 처리를 했는데, 가장 기본 코드를 업로드하는 것이 도움이 될 것 같아 해당 내용을 모두 지운 상태이다. 따라서 _finalType을 사용하지 않은 것일뿐 저 props 들이 필수인 것이 아니다. 카카오 개발자 사이트의 API 설명서를 살펴보거나 구글링을 하면 비슷한 형태의 코드가 많이 나오니 참고하여 본인의 용도에 맞게 변형하면 된다.

* objectType : 공유를 했을 때 공유 메세지의 형태를 의미한다. feed / list/ commerce 형태가 있다. 각각의 형태는 아래를 참고
* content : 공유할 때 보이는 내용들. feed 형태의 경우 title, description, imageUrl, link가 기본 요소이다.
* button : 공유하기 메세지 아래의 버튼. 클릭하면 url로 이동하게 할 수 있으며, 버튼을 여러 개 만들 수도 있다. 나는 버튼을 2개 만들어서 하나는 공유된 결과를 확인할 수 있는 페이지, 또 다른 하나는 테스트 시작 페이지로 연결했다!

카카오링크의 여러 가지 템플릿

[5] 카카오 공유하기 버튼 컴포넌트를 생성한다.

<KakaoShareBtn _sub={어쩌구} _title={저쩌구} _imageUrl={이야압} _finalType={우아악} />

필요한 페이지에서 import하여 본인이 설정한 props들을 넘겨주면 된다. 나는 위와 같은 형태로 결과 페이지에서 카카오 공유하기 컴포넌트를 불러와 사용했다. 덤으로 클립보드 기능의 경우 매우 단순하다! react-copy-to-clipboard 설치 후 CopyToClipboard를 import해서 아래 코드를 작성하면 끝이다. 아주 간단하다!

import CopyToClipboard from "react-copy-to-clipboard";

const link = window.location.href;    //현재 페이지 링크

<CopyToClipboard text={link}>
    <Button onClick={alertMessage}><img src={나는 직접 만든 버튼 이미지를 이곳에 넣었다} /></Button>
</CopyToClipboard>

 

✨ 마치며

감격적인 첫 유저의 성공 카톡은 박제할 가치가 충분하다. 냉큼 박제!

백엔드 개발을 하다보니 '프론트는 대체 어떻게 굴러가지?'라는 궁금증이 생겨서 프론트에 발 담궜다가 백엔드보다 프론트엔드 개발을 더 징하게 해버린 멋진 반년이었다! (백엔드 개발 경력이 아주 적어서 그런 것 같... 괜찮아 난 아직 시작 단계의 개발자인걸^^) 아무튼 그래서 다음 분기 프로젝트는 스프링 팀에서 백엔드 개발로 진행해보고 싶다. 프론트도 재밌지만 역시 백엔드 개발을 다시 하고 싶다. 이번엔 서버 개발을 아주 징하게 해볼테다. 드릉드릉. 

DSC Ewha 덕분에 좋은 동료들을 만나서 즐겁게 개발할 수 있음에 감사하다. 겨울동안 가볍고 재밌는 프로젝트를 잘 끝낸 것 같아서 매우 뿌듯하다! 언제나 회의에서 "괜찮아요..! 삽질하면서 배우는거죠..!"라는 말을 습관처럼 했는데, 진심을 다해 팀원들의 삽질을 응원하면서 던진 말이었다. 매주 열심히 도전하시고, 더 많이 배워오시는 모습이 보여서 더 열심히 응원하게 됐던 것 같다. 첫 도전에 프로젝트를 끝낸다는게 쉬운 일이 아닌데, 정말 고생 많으셨고 수고하셨다는 응원의 메세지를 팀원들에게 보내며 글을 마친다. 마지막은 귀여운 팀원의 강쥐로 채운 404 페이지!

혹시 이 글을 끝까지 읽은 분이 있으시다면 테스트 결과 어떤 유형이 나왔는지 알려주세요! 여러분의 유형도 궁금합니다 :)