본문 바로가기
개발일지/WIL

[WIL] 항해99 (9기) - 7주차 회고

by 깸뽀 2022. 11. 7.
728x90
  • 10/27 ~11/3
  • 클론코딩

이번주차는 기대하고 기대하던 클론코딩 주차! 

많은 레퍼런스도 있고, 한 사이트를 똑같이 만들어보면 너무 재미있을 것 같았다

인스타그램, 페이스북, 유튜브 등등 많은 것들이 있었지만, 

우리조는 카카오의 "같이가치"라는 페이지를 클론코딩 하기로 했다.

 

💚 같이가치 주소 

https://together.kakao.com/

 

📌 선택한 이유

대학교때 사회복지수업을 들으면서 사회적 약자에 대한 꾸준한 관심의 필요성에 대해 깨닫게 되었다.

주말마다 복지관에 봉사도 다니고, 소액이지만 계속 기부도 해왔던터라 더 관심이 갔던 서비스였다.

여러 핫하고 흥미로운 주제들도 많았지만 우리조원들도 카카오의 같이가치 플랫폼이 맘에 쏙 들었다고 한다!

클론코딩으로 흔하지도 않고, 또 이번을 계기로 카카오의 같이가치 플랫폼이 알려지면서 

많은 사람들의 관심이 필요한 곳에 도움이 전해졌으면 하는 바람을 포함해 이번 서비스를 클론코딩하게 되었다.

 

📌 같이가치 소개

카카오 같이가치는 누구나 참여하고, 변화를 만들어가는 카카오의 사회공헌 플랫폼이다.

더 나은 사회를 만들기위해 누구든지 공익 프로젝트를 제안하고 모금을 진행할 수 있으며, 다양한 프로젝트도 만들 수 있다. 개개인의 일상 속 작은 행동이 모여 사회를 변화시킬 수 있다는 취지가 너무 마음에 와닿았다.

 

카테고리는 여러개가 존재한다, 어린이부터 어르신, 사회적 약자, 우리사회 부터 지구촌, 동물까지 존재한다.

주로 복지관이나 협회에서 프로젝트를 만들어 게시한다. 이용자는 해당 복지관, 협회에서 어떤 취지로 프로젝트를 제안하는지, 기부금이 어떻게 쓰일 것인지에 대한 정보를 등록할 수 있고, 해시태그를 등록할 수 있다.

 응원하기(좋아요)와 댓글, 페이지를 공유하기 기능으만으로도 100원을 기부할 수 있고, 이 세가지의 기부 방식은 카카오가 대신 기부해주는 시스템이며, 기부하기 버튼을 클릭하여 본인이 원하는 금액을 기부하여 댓글로 마음을 전달 할 수있다.

페이지 하단에는 목표금액과, 현재 모인 기부금액, 기부에 참여한 인원과 기부형식을 통계처럼 나타내줘서 더 자세하게 알 수 있다.

 

📌 클론코딩을 하며

시간이 일주일 뿐이라 메인이 되는 페이지를 만들어보는 것에 의의를 두었다.

나는 응원하기, 댓글, 기부하기, 기부금 통계, https 배포 부분을 맡았다.

 

1.

기부하기버튼을 눌러 원하는 금액을 정하고 전하고싶은 마음을 작성해 댓글에 남길 수도 있어서

댓글과 기부하기 테이블을 같이 사용했다. 이후 통계에 대한 데이터를 만들때, 직접기부(기부하기 버튼을 통한 기부)와 참여기부(댓글, 응원하기)에 참여한 인원과 총 기부금액을 추출하기 위해서 데이터의 구분이 필요해 기부타입(donation_type)을 주어 분리한 다음 그 타입에 맞는 쿼리문을 작성해서 통계를 냈다.

ex) 직접기부 ["D"] directry의 D / 참여기부 ["P"] participation의 P

 

2.

통계를 낼때는 각 내역을 DB에 저장하지 않고 각각의 데이터들이 insert될 때마다, 총금액(sum)과, 전체인원(count)를 뽑아서 사용했다.

그 이유는, 만약 각각의 데이터들의 합산금액과, 총 인원수에 대한 count를 굳이 DB에 저장해서 사용하지 않아도

쿼리문으로 해결할 수 있는 부분이라 생각했고, 만약 DB에 저장해서 관리를한다면 일을 두번 처리하게 되고, 굳이 생성하지 않아도 되는 데이터를 테이블을 또 만들어 관리해야한다고 생각했기 때문이다.

 

3.

내가 응원하기를 누른 페이지에 하트가 빨간색으로 채워져 있기 위해서는 

응원하기를 눌렀는지 누르지 않았는지에 대한 구분값이 필요했다. 

그래서 응원하기에 해당 유저의 정보가 있다면 true, 해당유저의 정보가 없다는 false값으로 구분해서

DB에 따로 저장하지 않아도 응원하기를 눌렀는지 누르지 않았는지에 대해 쉽게 구분할 수 있었다.

 

이번 프로젝트를 통해서 같은 페이지내에서 일어나는 기능이지만 각각의 구분값을 주어 데이터를 구분 할 수 있는 작업에 더 신경썼다. 그리고 JPA로는 구현하기 어렵고 복잠한것들은 Native Query를 사용했다

QueryDSL을 사용해서 구현해보고 싶었는데 아직 적응이 안되어서.. 사용해보지는 못했지만

이 부분은 다시 QueryDSL을 사용해서 바꿔볼 생각이다.

 

4.

이전 미니프로젝트에서는 certbot에서 SSL인증서를 발급받아 https로 배포했다.

매니저님께서 AWS에도 SSL인증서를 발급받아서 더 쉽게 https를 배포할 수 있는 방법도 있다고 한번 해보면 좋겠다고 권유해 주셔서 그 방법을 사용해서 배포해보기로 했다.

미리 사놓은 가비아 도메인을 Route53에 등록하고 나서 ACM으로 SSL 인증서를 발급받았다.

그 후 로드밸런서와 Route53을 연결해 주었다.

그 후로 배포는 https로 너무너무 잘 됐다! 

 

 

클론코딩을 하면서 너무 느꼇던 점은

모방을 잘 할수 있는것도 하나의 능력이라고 생각을 했기 때문에 뜻깊었다.

또 기존에 존재하고 있는 웹사이트들 모두 사소한 부분까지 신경쓴 디테일에 감탄했고,

내가 이용자의 입장에서 무심코 사용했던 기능들, 당연히 존재할 것이라 생각했던 기능들 역시

자잘하지만 사용자의 편의를 위한 디테일이라는 것을 또 한번 깨닫게 되었다.

 

나도 어떤 서비스를 제공할 때, 사용자의 편의를 위해 사소하지만 디테일한 기능또한 놓치지 않아야 겠다고 생각했다

 

클론코딩은 아주 흥미롭고 재미있었던 한 주 였다 !

 

이번 주차 역시 우리 팀원들 너무 고생많았고 고마웠던 한 주 였다

협업을 하면서 "이쁜 소통"이 아주아주 강조되었는데

모두들 서로 배려하고 이쁜마음이 서로에게 전달되어 기분 좋은 한 주로 마무리 할 수 있었다! 

클론코딩 5조 짱짱! 늘 감사합니다!

 

 

 

🔗 ERD

 

 

🔗 기획서 Notion

https://www.notion.so/5-bcc6b3f907aa4857ab595782ff693f2e

 

5조 카카오 같이가치 클론코딩

작업 목록 (FE)

www.notion.so

 

🔗 Git

https://github.com/orgs/hanghae-cloneproject-2team/repositories

 

hanghae-cloneproject-5team

hanghae-cloneproject-5team has one repository available. Follow their code on GitHub.

github.com

728x90

댓글