Crew Join
Crew Join은 개발자 및 여러 동아리 활동을 하시는 분들이 각자의 요구에 맞는 팀원을 모집하는 웹 사이트입니다.
🤷Why Crew Join ?
프로젝트를 시작한 이유는 간단하다 방학기간을 이용해 한가지 프로젝트를 진행하기를 원했고 팀원을 모집하는데에 있어 어려움을 겪고 직접 팀원을 모집 할 수 있는 웹 페이지를 만들어보기로 하였다.
프로젝트를 시작하기에 앞서 나는 프로젝트에 꼭 들어갔으면 하는 기능들을 몇가지 정하였다.
-
카카오를 이용한 로그인이 가능할것 ☝🏼
이전에 프로젝트를 진행하며 카카오로 로그인을 구현해본적이 없어서 꼭 해보고싶기도 했고 회원가입에서 여러가지 정보를 받는 비교적 복잡한 절차를 밟는 것 보다 카카오를 이용해 간단하게 로그인을 구현하기를 희망했다. -
채팅 기능이 있을것 ☝🏼
다른 웹 사이트에서 팀원을 구하고 있을때 서로 메일로 지원을 넣고 확인하고 하는 절차가 불편하다고 느껴서 나는 실시간 채팅이 가능하도록 STOMP를 이용해 실시간 채팅을 구현하였다.
🚩 프로젝트 기간
2023년 7월 26일~8월 28일 (총 5주)
📁 프로젝트 깃허브 주소
프론트 : https://github.com/KimGwangJe/crewjoin
백엔드 : https://github.com/KimGwangJe/CrewJoinServer
🟣 구현
1. 태그
프로젝트에서 여러가지 태그들을 이용해서 사용자들이 자신이 원하는 게시글만을 찾아 볼 수 있도록 하기를 원했기 때문에 태그 리스트들을 화면에 배치시켰고 결과는
이런식으로 나왔다 하지만 브라우저 크기를 줄이면 줄이 너무 길어져 UI적으로 보기 불편하다 생각하여 중간 크기와 모바일 크기에 맞춰 태그를 볼 수 있는 방식을 다르게 하였다. 결과는
중간 크기
모바일
이렇게 3가지 모드로 태그들을 볼 수 있게 구현하였다.
2. 글 작성
글 작성시 모집글 내용 작성을 위해 TextEditor를 두어 딱딱한 글만 남기는것이 아닌 자신에게 필요한 내용들을 전달 할 수 있도록 하였다.
이것을 구현 할 때 어려웠던 점은 DB에 저장된 HTML 형식의 String을 어떻게 해야 게시글에 보여줄때 Editor에서 작성한 그대로 보여주냐였다.
React로 프론트를 만들고 있는 상황이고 DB에 있는 값을 그대로 가져와서 그대로 내보내니 태그들이 하나도 먹지 않고 있는것이었다.
이 문제로 인해 약 1시간을 ChatGPT와 말다툼을 했던 ,,
<Viewer initialValue={content || ""} />하지만 너무 허무하게도 그냥 Viewer라는 태그를 Import하기만 하면 되는 아주 간단한 문제였다... 역시 구글이 신이다.
결과는 이런식으로 나왔다.
태그만 확인한것이라 느낌이 없긴 하다.
3. 댓글 기능
댓글 기능입니다. 댓글 추가, 수정 및 삭제 기능 모두 실시간 통신이 아닌 HTTP통신이기 때문에 사용자 본인만이 댓글이 실시간으로 등록되는것처럼 구현해두었습니다.
이 부분 또한 게시글 번호로 subscribe 하여 실시간 통신으로 구현 예정
4. 게시글 목록
홈 화면에서 게시글 목록을 볼 수 있는 뷰입니다. 모집 마감일이 지난 포스트는 모집 마감 문구를 중앙에 두고 박스에 투명도를 주고 해당 포스트의 좋아요와 조회수를 확인 가능하게 만들었으며 또한 사용자들이 모집중인 글만 볼 수 있도록 필터 기능을 추가했습니다.
사용자가 자신이 작성한 모집글과 조회한 모집글, 좋아요를 누른 모집글들을 볼 수 있도록 해두었습니다.
5. 알림 기능
사용자가 작성한 모집글에 지원 및 댓글 또는 좋아요가 눌릴경우 알림창에서 어떤 사용자가 무엇을 했는지 확인 가능하게 구현해두었습니다. 다만 아쉬운점은 지금은 Socket으로 실시간 통신을 구현하지않고 HTTP 통신으로 기능을 구현하여 사용자가 알림이 온것을 바로 확인이 불가능합니다.
알림 확인 또한 눌렀을 경우에 HTTP로 서버에 읽음 상태를 True로 전달하여 DB에 저장하고 바로 DB에 있는 값이 전달되는것이 아닌 React단에서 랜더링시키지 않고 값을 변경하게 두었습니다. 학기 중에 수정 예정
6. 지원하기
글 작성자는 자신의 게시글에 누가 지원을 하였으며 지원자의 이름, 나이대, 성별을 확인 가능하고 대화하기 버튼을 눌러 사용자에게 직접 연락을 할 수 있습니다.
사용자의 프로필 이미지, 이름, 나이대, 성별은 모두 카카오로 회원가입시 선택적 동의를 받은 후 사용하는 정보들입니다.
7. 채팅
처음 채팅을 구현하려고 할 때 정말 막막했습니다. 채팅 구현시에 STOMP를 사용하여 구현 해야겠다는 생각은 있었지만 막상 구현을 하려고 구글링도 해보고 유튜브도 찾아봤지만 제가 원하는 좌측에 채팅방 리스트들이 있고 우측으로는 채팅 화면이 보여지도록 개발 한 예제가 없었습니다.
어려워도 할 건 해야지
우선 채팅부터 구현하기로 하였습니다. 우선 SockJS로 서버와 연결을 하고
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws")
.setAllowedOriginPatterns("*")
.withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.setApplicationDestinationPrefixes("/app");
registry.enableSimpleBroker("/topic", "/queue"); // 수정
registry.setUserDestinationPrefix("/user");
}
@Override
public void configureClientInboundChannel(ChannelRegistration registration) {
registration.interceptors(chatStompHandler);
}이런식으로 Spring boot 서버에 config를 지정하여 메시지 브로커를 등록하였다 여기에서 겪은 어려움은 처음에는 /app과 /topic이라는 주소가 아닌 /app과 /pub로 이름을 임의로 저장해두었는데 메시지 브로커에도 이름 관련 규칙이 있었는지 메시지 전송은 됐지만 메시지 브로커에서 메시지를 전달을 해주지 못하였고 이때 나는 뭐가 문제인지 몰라 하루를 낭비했는데 /topic으로 주소를 바꾸니 간단히 해결되었었따...
이렇게 실시간 채팅을 우선적으로 구현 한 이후 클라이언트에서는 HTTP를 이용해 처음에는 DB에서 데이터를 가져오고 그 이후에는 SockJs로 메시지를 받고 서버에서는 이 메시지를 저장하는 식으로 구현하였다.
이제 문제는 실시간으로 메시지가 반영되는 채팅방 목록과 새로 만들어진 채팅방을 어떻게 해야 메시지를 받는 사람도 그 topic을 subscribe하여 실시간으로 채팅을 받을 수 있게 하는가였다.
우선 채팅방 목록또한 처음에는 HTTP로 데이터를 받아오고 이후에는 채팅방에 메시지가 오면 React단에서 채팅방 목록을 가장 최근에 채팅이 이루어진 목록을 가장 상단에 위치시키게 하였고 이때 채팅방을 실시간으로 구현하기에는 무엇을 subscribe 해야될지를 몰라 메시지를 받는데로 채팅방에 반영하는 식으로 구현하였다.
그리고 새로 만들어진 채팅방을 어떻게 해야 받는 사람도 실시간으로 받는가의 문제는 모든 사용자가 채팅 화면에 들어오면 공통적으로 /app/sendToAll 주소를 subscribe 하도록 하여 카카오에서 제공하는 사용자 식별 아이디와 메시지의 receiverName을 비교하여 일치한다면 메시지를 받고 그 채팅방을 구독하도록 해두었다. 채팅방을 생성한 사용자는 /sendToAll로 메시지를 보내게 되는데 문제는 이때 모든 사용자가 이 메시지를 받고 자신에게 온 메시지인지 확인하기 때문에 적절한 방법은 아니라고 생각한다.
구현된 채팅방의 형태는 이렇다.
🟣 프로젝트를 진행하며 느낀점
이번 프로젝트를 진행하며 혼자서 기획 설계 구현 테스트까지 진행해보며 프로젝트가 점점 커질수록 설계단계에서 확실히 길을 잡아두지않아 추가되는 기능들이 있었고 이때 코드들을 다시 리팩토링 하는 과정들이 상당히 힘들었다.
