# in-progress

# 구현 기능

• 로그인 / 회원가입 페이지 : 로그인 유효성 검사

• 메인 페이지 : 전체 동아리, 내 동아리, 내 동아리 인기글, 자유게시판 갤러리, 자유게시판의 데이터를 조회하여 보여줌

• 자유게시판 페이지 : 조회수, 새 글 작성과 댓글 및 좋아요 기능, 글의 조회수 기능

• 고객센터 페이지 : 비밀글 기능

• 동아리 페이지

  • 동아리 메인 페이지 : 동아리 내 페이지 연결
  • 동아리 게시판 페이지 : 조회수, 새 글 작성과 댓글 및 좋아요 기능, 글의 조회수 기능
  • 동아리 일정 페이지 : 일정 추가 및 수정, 삭제, 조회 기능
  • 동아리 채팅 페이지 : socket.io를 통한 동아리별 채팅 기능
  • 동아리 관리 페이지(동아리장만 접속 가능) : 동아리 가입 신청서 승인 및 동아리 회원 정보 확인

# in-conclusion

# 페이지별 소개

1) 로그인 / 회원가입 페이지

2) 메인 페이지

3) 자유게시판 페이지

4) 고객센터 페이지

5) 동아리 페이지

① 메인 페이지

② 게시판 페이지

• 게시글 상세 페이지에서 한 게시글에 대한 댓글과 좋아요를 모두 함께 보여주기 위해서 게시글 테이블과 댓글 테이블을 연결하고, 댓글 테이블과 좋아요 테이블을 연결하였다.

• 유저의 '좋아요' 버튼 클릭 유무와 '좋아요'를 누른 사용자의 총 수를 화면에서 보여주고자 하였다.

  이를 구현하기 위해 우선, 로그인 한 유저의 토큰에서 userid_num이라는 고유값을 찾아와서 DB의 좋아요 테이블에 저장하였다. 게시글 상세 페이지를 렌더링할 때 좋아요 테이블에 저장된 userid_num 값을 함께 보내주었다.

③ 일정 페이지

• 시퀄라이즈를 사용하여 일정을 추가, 수정 및 삭제가 가능하도록 구현하였다.

• 특정한 날짜를 클릭했을 때 일정 테이블에서 해당되는 날짜의 일정만 조회해서 프론트로 전달하였다.

④ 채팅 페이지

• socket.io를 사용하여 채팅방 생성
• 채팅 페이지에서 나갔다가 재접속했을 때 이전에 나누었던 채팅 내역을 보여주기 위해 DB를 연결하였다.

  채팅이 보내졌을 때 컨트롤러를 통해 DB에 저장해두었다가, 채팅 화면 페이지에 접속했을 때 DB에서 해당 채팅방에 대한 이전 채팅 내역을 찾아 보내주어 함께 화면에 렌더링되도록 하였다.

⑤ 관리 페이지

# 프로젝트를 마무리하며

팀원들과 함께 열심히 노력한 결과, 1등을 수상하였다!!

# 아쉬운 점

초반 기획 단계에서는 동아리 내에서 사용하는 채팅방과 서비스를 이용하는 유저들끼리 자유롭게 소통할 수 있는 채팅방을 만드는 것으로 계획했었다. 하지만 한 서버에서 두 개의 소통을 열어주자 소켓끼리 충돌하는 문제가 발생하였고, 프로젝트 기간은 한정적이었기에 동아리 채팅방 하나만 완성하게 되었다. 소켓에 대한 이해를 높여 다음 프로젝트에서는 두 개의 소켓을 열어서 사용해보고 싶은 마음이 들었다.

프론트엔드와 백엔드가 나뉘는 첫 프로젝트라, 백엔드에서 어느 정도까지 작업을 해주어야 하는지에 대한 이해가 조금 부족했던 것 같다. 예를 들어 백에서 데이터를 보내줄 때 너무 정리되지 않은 채로 보내주어(예: 객체, 배열이 섞여 있는 경우), 프론트에서 원하는 데이터를 찾아쓸 때 조금 어려움이 있었던 것 같다. 다음 프로젝트 때는 프론트에서 데이터를 찾아쓰기 쉽게 데이터를 조금 다듬어서 보내주면 좋을 것 같다.

# 느낀점

이전 프로젝트와 다르게 처음으로 프론트엔드와 백엔드를 나누어 진행하였는데, 이번 프로젝트를 통해 프론트엔드와 백엔드의 역할을 조금 더 이해할 수 있었다.

프로젝트 초기에 팀원들과의 깊은 대화를 통해 프로젝트의 기반을 견고하게 다졌는데, 이는 전체 프로젝트 진행에 많은 도움이 되었다. 초반에 정의한 ERD cloud와 FIGMA를 기반으로 지속적으로 수정과 반영을 통해 프로젝트를 발전시켜 나가는 과정에서, 팀 전체가 공통된 이해를 형성할 수 있었던 것 같다.

이번 프로젝트에서 좋은 팀원들을 만난 덕분에 소통의 중요성을 깨달을 수 있었고, 이는 팀원들과의 원활한 협력으로 이어졌으며 훌륭한 팀워크를 구축하는 방법을 익힐 수 있었던 시간이었다.