- 주제 : 오늘 뭘 하면 좋을까? 고민할 때, 찾고 싶은 웹 서비스
- 프로젝트 명: 오늘 모하지?
- 최신순 기반으로 최근 트렌드의 피드를 반영 다른 사람들이 어떤 곳에서 무엇을 하며 즐거운 시간을 보냈는지 구경하고 찾아 볼 수 있습니다. 또한 본인이 즐겁게 다녀온 활동이나 가게 등을 간단한 글과 사진으로 공유할 수 있고, 특정 좋아요 수를 넘으면 인기 게시물로 분류가 됩니다. 북마크 기능으로 가고싶은 장소를 저장해놓을 수도 있습니다.
- 위치 기반 현 위치에서 가까운 곳을 대상으로 작성한 유저들의 가게 방문 게시글을 볼 수 있으며, 기준 위치를 변경할 수도 있습니다. (현재 서비스는 서울 지역만 제공됩니다. 😥)
카카오 로그인 / 이메일 인증 로그인
- 소셜로그인으로 간편하게 회원가입 및 로그인이 가능합니다.
- 이메일 회원가입 시 유효한 이메일로만 인증 할 수 있도록 이메일 인증 방식을 구현했습니다.
마이페이지
- 프로필 이미지 편집이 가능합니다.
- 닉네임 변경 및 비밀번호 재설정, 회원탈퇴가 가능합니다.
- 내가 북마크한 장소를 한눈에 볼 수 있습니다.
- 내가 쓴 게시물들을 한눈에 볼 수 있습니다.
메인페이지
- 위치 선택 - 아래 게시물들과 장소들을 현 위치, 서울시 구별로 선택하여 원하는 위치의 데이터만 볼 수 있습니다.
- 요즘 뜨는 - 좋아요 수를 많이받은 게시물의 장소를 캐러셀로 한눈에 볼 수 있습니다.
- 오늘 모할까? - 최신 피드 게시물을 캐러셀로 한눈에 볼 수 있습니다.
- 실시간 댓글 - 등록한 댓글들을 캐러셀로 한눈에 볼 수 있습니다.
게시글 페이지
- 오모 사용자들이 올린 게시물들을 리스트 형식으로 둘러볼 수 있는 페이지입니다.
- 현위치 혹은 서울시 구 선택으로 원하는 구역의 게시물을 필터링하여 확인할 수 있습니다.
상세보기 - 게시글
- 오모 사용자가 작성한 글의 구체적인 내용과 장소를 볼 수 있습니다.
- 간단한 글과 사진, 평점을 확인할 수 있습니다.
- 게시글에 좋아요 표시를 할 수 있습니다.
- 게시글에 대한 댓글과 대댓글로 소통할 수 있습니다.
상세보기 - 장소
- 미니맵을 통해 간단하게 장소에 대한 위치를 확인할 수 있습니다.
- 장소명, 주소, 별점, 영업시간과 영업중, 전화번호 등의 정보를 확인할 수 있습니다.
- 북마크 버튼으로 장소 저장이 가능합니다.
- 지도로 보기 버튼으로 지도 페이지로 이동해서 더욱 자세하게 확인할 수 있습니다.
검색
- 유저명으로 검색하여 해당 유저의 피드를 확인할 수 있습니다.
- 게시물로 검색하여 게시글의 상세페이지로 더욱 빠르게 확인할 수 있습니다.
지도
- 현위치 기반의 주변 장소들을 한눈에 확인할 수 있고, 마커 클릭시 장소에 대한 게시물을 확인할 수 있습니다.
- 장소명을 검색하여 빠르게 이동하여 주변 장소들에 대한 정보를 확인할 수 있습니다.
다크모드
- 페이지 전체와 지도에도 다크모드를 적용하여 편안하게 사이트를 이용하실 수 있습니다.
| 👑 김상연 | 🍕 남궁철 | 👑 노경민 | 🍰 김지나 | 🥯 정윤영 | 🍔 박성빈 |
 |
|
|
|
|
|
| 🌱 React | 🌱 React | 🌱 Node | 🌱 Node | 🌱 Node | 🌱 Designer |
역할
| 이름 | 분담 | |
|---|---|---|
| FE ✨ | 김상연 (L) | ‣ 인증 - 회원가입 / 유효성 검사 / 로그인 - 인가 / 토큰 관리 - 카카오 로그인 - 로그인 / 비로그인 처리 ‣ 마이 페이지 - 내 정보 / 게시글 / 북마크 장소 조회 ‣ 프로필 편집 페이지 - 유저 정보 수정 / 유효성 검사 - 프로필 사진 수정 - 회원 탈퇴 ‣ 유저 페이지 - 유저 정보 / 게시글 조회 |
| FE | 남궁철 | ‣ 메인페이지 - 현위치, 인기글, 인기글 장소 정보 모달, 최신글, 댓글 ‣ 게시글 페이지 - 게시글 CRUD, 게시글 페이지네이션 - 좋아요 / 북마크 - 댓글/대댓글 CRD, 페이지네이션 - 장소검색‣ 지도 페이지 - 둘러보기 / 인기게시글 - 지도 - 장소 상세 정보 장소 검색 ‣ 검색 - 유저닉네임 / 가게이름 검색 ‣ 테마 - 다크모드 |
| BE✨ | 노경민(VL) | ‣ 댓글 기능 - 작성, 조회, 삭제 ‣ 대댓글 기능 - 작성, 조회, 삭제 ‣ 지도 페이지 - 둘러보기 / 인기게시글 ‣ 게시글 페이지 - 게시글 CRUD중 수정, 삭제 ‣ 배포 - nginx (proxy_pass, Load Balance, Https) |
| BE | 김지나 | ‣ 회원가입, 로그인(JWT: Access/Refresh), 로그아웃, 회원탈퇴 ‣ 회원가입시 이메일 인증 및 인증번호 검증 ‣ Oauth 2.0 카카오 소셜 로그인 구현 ‣ 보안 강화를 위한 Refresh Token 기능(RTR 포함)구현 ‣ 마이페이지 - 내 프로필 정보 조회, 유저 정보 변경(프로필 사진, 닉네임, 비밀번호), 내 게시글 목록 조회, 내 북마크 목록 조회 ‣ 프로필 페이지 - 다른 사람의 프로필 조회/ 다른 사람의 게시글 목록 조회 ‣ Swagger 적용 - RESTful API를 문서화 ‣ Https 배포 (ec2, nginx) ‣ CI/CD 구현 ‣ Git actions, CodeDeploy, nginx 서버관리 ‣ 프로필 이미지 관리 - AWS S3, multer ‣ 테스트 코드 작성 |
| BE | 정윤영 | ‣ 메인페이지 - 최신글, 인기글, 댓글 자치구별, 카테고리별 조회 ‣ 게시글 페이지 - 게시글 CRUD, 게시글 페이지네이션 - 좋아요 / 북마크 ‣ 지도 페이지 - 둘러보기 / 인기게시글 ‣ 검색 - 유저닉네임 / 가게이름 검색 |
| Design | 박성빈 | ‣ 디자인 총괄 PC 환경 작업 - 브로셔 배너 및 로고 디자인 - 전체페이지 PC 환경 디자인 - 홍보 카드뉴스 디자인 |
FE
| 사용 기술 | 결정 사유 |
|---|---|
| Vite | Vite는 HMR방식의 사전 번들링으로 모듈을 필요에 따라 독립적으로 빌드하고 번들링 과정이 없기 때문에 전반적인 빌드 시간이 감소, CRA보다 아주 빠름. |
| TypeScript | 런타임 오류를 사전에 방지할 수 있고, 코드의 가독성 향상과 안정성이 높고 코드의 품질을 높여줌. JS의 슈퍼셋이기 때문에 모든 기능을 제공하고, 대부분의 라이브러리도 TS를 지원함. |
| Vercel | 코드가 업데이트될 때 자동으로 빌드 및 배포 파이프라인을 실행하여 변경 사항을 신속하게 반영해주기 때문에 배포 설정 보다는 개발에 좀 더 집중할 수 있다고 생각.분산된 CDN을 사용하여 리소스를 제공하기 때문에 보다 나은 웹 환경과 로딩 속도를 제공. |
| Axios | 비동기 작업에 굉장히 간편하게 사용할 수 있으며, 효율적.response 값을 다른 설정없이 간편하게 사용할 수 있음.interceptor와 intstance를 사용하여 관리와 유지보수에 용이. |
| react-query | 타 라이브러리보다 코드의 양이 줄어 가독성 향상 및 개발에 집중할 수 있음.네트워크 데이터를 캐싱으로 성능적 측면에서 효율적.devtools로 오류나 에러시 디버깅에 용이.상태 관리와 데이터 관리 및 네트워크 요청에 지속적 동기화로 인해 씽크가 잘 맞음. |
| Framer motion | GPU가속을 지원하고 성능 최적화된 애니메이션을 지공하며, 타 라이브러리에 비해 코드양이 비교적 줄고 복잡하지 않으며, 생태계가 풍부. |
| Zustand | 보일러 플레이트 코드가 적어 직관적이고 효율적으로 코드를 작성하고 주요 로직에 집중 가능.현 프로젝트 규모에 적합한 전역상태관리 라이브러리라고 생각.컴포넌트 트리에서 필요한 상태만 가져와 사용할 수 있도록 구성 가능. 필요한 상태의 변경이 발생했을 때 해당 컴포넌트만 리렌더링되도록 최적화 가능함. |
| Styled components | JSX 공간을 비교적 깔끔하게 사용할 수 있으며, 즉시 해당 컴포넌트의 스타일 확인과 수정이 가능. 또한 props를 이용한 변환이나 이를 활용한 재사용이 자유로운 편. |
BE
| 사용기술 | 결정사유 |
|---|---|
| express | node.js를 사용하여 쉽게 서버를 구축할 수 있게 만든 라우팅과 미들웨어 기반인 경량형 Node.js 웹 프레임워크로 미들웨어 확장 용이하며 직관적이여서 선택함. |
| Mysql | 현 서비스에서 쓰기 작업보다 읽기 작업이 많아 읽기 전용 명령을 관리하는데 용이한 mysql을 선택. |
| S3, multer | multer를 사용하여 S3를 사용하여 쉽게 파일 업로드.대규모 파일을 안정적으로 저장하기 위해 사용. |
| Nginx | 이미지와 같은 정적 파일을 사용을 많이 하는 상황이므로 nginx를 선택함. |
| haversine | 두 좌표(위경도)의 거리차를 구하기 위해 도입. haversine보다 mysql의 GIS 쿼리를 사용했을 때 호출되는 쿼리양도 많고(호출되는 데이터도 많음), 평균 호출 속도가 느린결과로haversine 라이브러리를 사용하기로 결정. |
| EC2 | EC2는 다른 AWS 서비스들과 연계해서 사용할 수 있고, 필요한 경우에 데이터베이스(RDS), 클라우드 스토리지(S3) 등의 다양한 기능을 제공. |
| GitHub Action | 깊은 GitHub 통합으로 소스코드 저장소와 CI/CD 설정이 함께 관리가 가능하여 편리, 유연성 으로 다양한 워크 플로우 구성, 무료티어 로 인해 선택 |
| Passport | 간단하고 다양한 로그인 인증전략을 지원하고, 각종 인증 방식에 대한 복잡한 로직과 흐름을 단순화하여서 빠르게 구현할 수 있음. 그리고 다른 여러 소셜 로그인을 동일한 api로 통합해서 사용할 수 있어 선택함. |
| JSON Web Token | 서버에서 사용자의 상태를 관리하지 않고, 토큰 자체에 정보를 포함해서 사용자 인증을 빠르게 할 수 있음. 또한 JWT 토큰에 서명을 추가해서 변조를 방지할 수 있어 선택. |
| joi | 입력한 데이터의 유효성 검사를 직관적이고 간단하게 사용 하기 위해 도입함. |
| swagger | REST API 문서를 설계, 빌드하는데에 자동화하여 관리하고 협업을 위해 도입함. |