English Version

• 프로젝트 기간 : 24.01 ~ 24.08
• 프로젝트 인원 : 4명
  • Back-End : 2명
  • Front-End
    • Android : 1명
    • Web : 1명

대학교에 다니면서 학업에 관련하여 모르는 부분이나 궁금한 점이 있을 때 도움을 받을 사람을 찾기 어려운 경우가 많았고 이로 인해 같은 단과 내에서 멘토를 구할 수 있으면 학교생활을 하는데에 있어서 많은 도움을 받을 수 있을 것이라 생각했습니다. 현재 캠퍼스 내에서 소통하는 커뮤니티 앱은 존재하지만, 학업과 관련된 전문적인 정보를 얻는데는 한계점이 존재한다고 판단하였습니다. 간편하고 신속하게 글을 올려 도움을 받을 수 있는 전문적인 커뮤니티가 필요하다고 느꼈고, 선배나 졸업생이 자신이 알고 있는 지식을 후배들과 소통하는 플랫폼이 있었으면 좋겠다는 생각도 들었습니다. 또한, 본인이 다니는 학교에 국한되지 않고 같은 전공을 가진 다른 학교의 학생들과도 교류할 수 있다면 성장 과정에 큰 도움이 될 것 같아 해당 프로젝트를 기획하게 되었습니다.

• Next.js(v14), React-Query, Tailwind, Auth.js, Zustand, Stomp, 반응형, PWA, SSR, SSG
• AWS(EC2), Docker, Docker-Compose, Nginx, Github Actions

• 이용자는 모든 학교별 / 자신의 학교별에 따라 서비스를 이용할 수 있다.

• 이용자가 멘토가 되길 원할 경우 멘티 모집에 대한 과목, 조건등이 포함된 글을 작성한다.

• 이용자가 멘티 모집 글에 신청 양식을 작성하고, 멘토는 신청 요청이 온 글을 보고 매칭여부를 결정한다.

• 매칭이 성사될 경우 실시간 채팅을 통해 멘토와 멘티간의 실시간 상담이 이어진다.

• 이용자는 질문 게시판을 통해 질문글을 올릴수 있으며 댓글을 통해 소통을 할 수 있다.

• 이용자는 멘티 모집 글에 신청 양식을 작성한다.

• 멘토는 신청 요청에 대한 세부 사항을 보고 매칭여부를 결정한다.

• 매칭이 성사될 경우 실시간 채팅을 통해 멘토와 멘티간의 실시간 상담이 이어진다.

• 매칭이 성사된 후 채팅 진행 중 멘티는 멘토에게 상담시간 연장을 신청할 수 있다.

• 모든 이용자는 질문 게시판을 통해 질문 글을 올릴수 있으며 댓글을 통해 소통을 할 수 있다.

• 모든 이용자는 멘토 요청 게시판을 통해 이러한 멘토가 필요할 것 같다 라는 글을 올릴 수 있으며 댓글을 통해 소통을 할 수 있다.

• 🔐 계정

  • 회원가입

  • 대학교 인증

  • 로그인/로그아웃

  • 유효성/토큰

  • 자동 로그인

• 🏡 메인 게시판

  • 멘티 모집 글 양식에 맞게 작성

  • 게시글 조회 후 멘토링 신청

  • 즐겨찾기

  • 게시판 필터별로 목록 조회 (검색, 즐겨찾기, 날짜, 카테고리, 학교별)

  • 게시판 목록에서 각 게시물에 대한 대표 이미지 보기

  • 인기 키워드 제공

• 👤 프로필

  • 프로필 사진 관리

  • 개인정보 관리/수정

  • 자신이 쓴 글 목록

  • 신청/매칭 목록

  • 알림 목록

  • 요청온 멘토링에 대한 수락 및 거절 처리

• 💬 채팅방

  • 멘토, 멘티 매칭 시 실시간 채팅

  • 채팅방 목록

  • 이전 채팅 무한 스크롤

  • 각 채팅방에 대한 읽지 않는 메세지 갯수 실시간 카운트 / 조회 시 초기화

  • 채팅 읽음 처리

  • 텍스트 이외에 이미지, 파일 등 전송

  • 채팅방 시간 연장 신청 (중복 연장 신청x)

  • 채팅방 시간 연장 수락/거절

• 🏡 질문/요청 게시판

  • 글 작성

  • 좋아요

  • 댓글

  • 게시판 필터별로 목록 조회

  • 무한 스크롤

  • 주간 인기 게시글 목록

• 🔔 알림

  • 채팅, 멘토랑 신청/수락/거절 등에 대한 푸시 알림

  • 실시간 알림 카운트 / 조회 시 초기화

• 💸 결제(예정)

  • 코인 충전
  • 코인 교환
  • 코인 환전

• React-Query & Fetch

  • React Qeury로 모든 비동기 상태를 관리
  • 무한스크롤, 옵티미스틱 업데이트와 같은 복잡한 클라이언트 작업을 편리하게 구현가능 하며 적용 할수 있었음
  • 서버에서 data를 캐시하고 Prefetch, 클라이언트에서 캐시를 통해 api 중복요청 최소화
    • 두개의 스택은 서로 상호 보완적인 관계로 서버에서의 캐시, 클라이언트에서의 캐시를 관리하고 둘의 키관리 방식을 통해 서버와 클라이언트간의 데이터를 무효화하고 일관성 있게 유지 할수 있음
    • 클라이언에서 가능한 복잡한 로직을 서버에서 prefetch한 데이터를 기반으로 실현 시킬 수 있음

• Zustand

  • 깊은 props drilling을 피함
  • 작은 모듈 사이즈
  • 왠만하면 불필요한 랜더링과 상태의 흐름을 추적하기 힘들기 하기에 전역상태를 최대한 안쓰려고 하지만, 채팅방에서의 수 많이 중첩되는 컴포넌트 계층과 서버에서 받아온 채팅데이터 & 소켓 데이터를 통합하고 관리하기 위해서는 최상위 중앙 상태관리 라이브러리가 필요했음

• Auth.js(v5)

  • 서버사이드에서의 편리한 토큰관리및 인증관리
  • 미들웨어 기반 접근 제어
  • Next.js 서버라는 장점을 활용해 리프레쉬토큰을 Cookie로 안전하게 보관 하여 CSRF를 방지해주어, 개발자는 JWT의 주기적인 갱신을 통해 XSS에 대한 위험만 신경 쓰면 됬음

• 인터셉터 라우팅 & 페러렐 모달

  • 페이지 전환 없는 인증 처리
    • Auth.js를 사용하면 로그인 페이지가 존재해야하는데 모달로 구현할시,param을 제외한 인증페이지 url이 존재하지 않기에 해당 기술 사용
    • URL은 변경되지만 페이지 리로드 없이 모달에서 인증 과정을 처리하여 사용자 경험이 끊기지 않도록 개선
    • 해당 구현을 통해 미들웨어(서버)에서 인증 UI를 사용자에게 페이지 이동없이 제공할 수 있게 개선

• Stomp 프로토콜

  • 실시간 알림 & 실시간 채팅과 같이, 짧게 폴링주기를 설정하여 가져다주는 문제를 해결

• 서버컴포넌트

  • 서버에서 데이터를 fetch하여 동적인 데이터가 미리 마크업 된 Html을 클라이언트에 넘겨줌
    • 하이드레이션이 되고 api 호출 되는 과정이 생략되어 LCP를 크게 단축시킬수 있고 사용자에게 로딩없는 페이지를 보일 수 있음
    • 동적인 meta tag가 서버에서 미리 마크업되어 크롤러가 동적인 상세페이지의 데이터까지 인덱싱 할수 있음

• SEO

  • 정적 Meta Tag 적용
  • 동적 Meta Tag 적용
    • generateMetadata를 활용한 Meta Tag 적용
    • Open-Graph
      • 어플리케이션을 예쁘게 포장하기 위함 및 크롤러 인덱싱
      • next/og의 ImageResponse 사용: 동적으로 상세 페이지 내용에 따라 og:image를 생성하고 사용자가 사이트에 접속하지 않아도 미리 볼수 있게함 -Sitmap 및 Robots.txt

• AWS EC2 & Docker & Nginx

  • EC2 배포를 통한 콜드스타트 지연시간문제 해결
  • Docker
    • 어플리케이션 환경을 격리시키고 개발과 배포환경에서의 일관성제공
    • ngnix, mysql과 같은 다양한 이미지를 hub에서 버전별로 제공
    • 외부포트를 사용하여 nginx와 통신하고 하나의 서버에 백엔드와 프론트엔들 함께 구축 할수 있도록 함
  • Ngnix를 통해 백엔드와 프론트엔드의 포트를 리버스 프록시 해줄뿐 아니라, next.js와 백엔드 api의 충돌 문제를 해결

• Github Actions

  • 수동으로 배포하는 과정중 로컬환경 문제인지는 모르겠으나 Docker 빌드 속도가 매우 느려 고성능 클라우드 환경에서의 빌드 통해 성능을 개선시키고자 했음
  • CI/CD배포로 개발환경의 피로도와 배포 시간을 줄이기 위함