"동네방네" 에서 우리의 동네를 소개해요!
”동네 방네”는 줄어든 동네에 대한 애정, 주민들과의 유대감을 증대시키기 위한 서비스입니다.
동네방네는 "동네를 꾸며간다” 에 중점을 두었습니다. 요즘은 인스타 피드, 싸이월드 같이 본인의 무언가를 꾸미고 싶어하는 트렌드입니다. 이를 이용하여 자신의 동네에 주민 들만 알 수 있는 히든 맛집, 카페, 사진 스팟 등을 지도에 드랍하여 본인 동네가 점점 꾸며지는 모습을 볼 수 있고 신빙성 있는 정보를 얻을 수 있습니다. 또한 소통을 통해본인 동네의 애정, 주민들과의 유대감을 키울 수 있습니다. 다른 지역 동네들과 비교를 통해 경쟁할 수 도 있습니다.
- 📆 개발 기간: 2024.03.26 ~ 2024.05.06 (총 6주)
- 🔗 배포 주소
개발 버전 : https://dongnaebangnae.vercel.app/
서비스 서버 : https://www.dongnaebangnae.com/
| 최경일(팀장) | 하나래 |
|---|---|
 @inhachoi |
 @1roo |
| 이름 | 역할 | 깃허브 |
|---|---|---|
| 최경일 | - 게시물 CRUD - 댓글 CRUD - 무한스크롤 - 주민추천/좋아요/북마크 기능 - 카카오 지도 API 연동 (커스텀 오버레이 / 폴리곤 / 키워드 장소검색 목록 표시 / 지도에 마커 찍기 / 내 위치로 이동) - 장소 및 카테고리별 필터링 - 이미지 최적화(webp, lazy loading) - 스켈레톤 UI - 최적화(라이트 하우스) |
https://github.com/inhachoi |
| 하나래 | - 마이페이지(내가 쓴 글/북마크 조회) - 회원정보 수정 - 실시간 채팅 및 알림(웹소켓, SSE) - 역 무한스크롤(채팅) - 검색(디바운싱) - 로그인 및 회원가입(로컬/소셜) - 뉴스페이지(리액트 슬릭 라이브러리) |
https://github.com/1roo |
| 📌 사용 기술 | 📖 기술 설명 |
|---|---|
| React | - 컴포넌트 단위 개발을 통 반복되는 것들을 재사용하여 생산성과 유지보수성이 높다. - 가상돔을 활용하여 데이터가 변할 때마다 화면을 새로 띄우는게 아니라, 필요한 부분만 업데이트 해줘서 서비스의 성능과 반응성이 높다. - 데이터가 부모에서 자식으로 전달되기 때문에(데이터 흐름이 한 방향으로 고정되어 있기 때문에) 상태 흐름 예측에 쉽고 디버깅이 쉽다. |
| Typescript | - 기존 JS는 동적 타입 언어로 변수 타입 선언을 안해도 되는 유연성이 있지만, 런타임에서의 오류 발생 가능성이 높았다. (사이트 에러, 콘솔창 에러) - TS는 정적 타입 시스템으로, 컴파일 시점에 타입체크를 통해 오류를 방지하여 프로그램의 안정성을 높일 수 있다. (실행전에 에러 미리 알려줌) - 프로젝트 규모가 커질수록 효과적이다. - api 결과 부분에 타입을 지정해서 유지보수에 도움이 된다. |
| Vite | - CRA와 같은 다른 프론트엔드 빌드 도구보다 훨씬 빠르면서 현재 트렌드이다. - Vite는 ESBuild를 이용하여 첫 실행만 전체 번들링하고, 이후에는 변경된 부분만 새로 번들링하기 때문에 10~100배 빠르다. |
| React Query (tanstack-query) | - 서버상태를 비동기적으로 가져오고, 캐싱, 지속적 동기화, 업데이트하는 작업을 단순화한다. - 데이터 패칭 중 로딩, 에러 등의 상태를 쉽게 관리하게 해주는 기능을 제공한다. |
| StyledComponent | - 스타일 적용을 css파일로 따로 하는게 아니라, 컴포넌트에 바로 삽입하는 방법 - React, Vue, Angular와 같이 재활용 가능한 컴포넌트 기반 개발 방법이 트렌드이다. 저희도 React를 사용하고 있기때문에 채택하게 되었다. |
| ReactRouter | 리액트에서 주소에 따른 컴포넌트 렌더링을 관리하기 위한 라이브러리이다. |
| Kakao Api | - 카카오 로그인을 이용하여 통일성 맞추고자 채택 - 참고하기 좋은 자료가 네이버보다 카카오가 더 많아서 선택. |
| Axios | - Axios는 요청을 보낼 때 자동으로 JSON 데이터를 문자열로 변환 → 안하면 수동 변환 - 요청과 응답을 가로채어 추가적인 로직을 적용할 수 있는 인터셉터 기능 제공 |
| Zustand | 전역으로 관리할 상태가 로그인 여부, SSE알림 구독 여부밖에 없기 때문에 간단하게 전역상태를 쉽게 설정하고 사용할 수 있어서 채택 |
| WebSocket | HTTP는 단방향 통신으로 클라이언트가 요청을 보내는 경우만 응답할 수 있어 실시간으로 서로 원할때 데이터를 주고 받을 수 있는 WebSocket을 적용 |
| SSE (Server-Sent Events) | 단방향 통신만 필요한 알림의 경우, 웹소켓보다 더 경량화되어 쉽게 구현할 수 있고 서버 간의 데이터의 단순한 전달이 목적이므로 SSE 적용 |
| Vercel | 원하는 레포랑 연결만 하면 CI/CD를 알아서 구축해주고, vercel.app 기본 배포 외에도 도메인을 따로 연결할 수 있는 등 개발자 친화적이여서 채택 |
| 일반 회원가입 | 일반 로그인 |
|---|---|
 |
 |
- 유효성 검증과 약관 동의가 포함된 회원가입을 할 수 있습니다.
- Spring Security로 사용자의 개인정보 보안성에 중점을 둔 로그인을 할 수 있습니다.
- 실제 사용 중인 이메일인지 인증 메일을 발송하고, 인증 코드를 발급하여 메일을 인증할 수 있습니다.
- 사용자의 접근성에 중점을 둔 소셜 로그인(Kakao)을 할 수 있습니다.
- 지도에서 게시물들을 한 눈에 볼 수 있습니다.
- 카테고리별로 게시물들을 필터링 할 수 있습니다.
- 리스트에서 무한스크롤로 게시물들을 최신 등록 순으로 조회할 수 있습니다.
- 카테고리별로 게시물들을 필터링 할 수 있습니다.
🍛 맛집 카테고리
📸 사진스팟 카테고리
☕️ 카페 카테고리
- 자신의 동네에 있는 장소를 입력하여 게시물을 등록할 수 있습니다.
- 검색으로 나와있지 않은 장소라면 사용자가 직접 핀으로 지정하여 내가 알리고 싶은 장소를 게시할 수 있습니다.
- 사진은 최대 5장까지 등록할 수 있습니다.
- 동네의 총 게시물 수 + 주민추천 수가 합산된 점수를 한 눈에 볼 수 있습니다.
- 활동점수가 높은 동네일 수록 지도에 색상이 진하게 표시됩니다.
| 우리동네 인기글은? | 여러동네의 인기들은? | 카테고리별로 인기동네는? |
|---|---|---|
 |
 |
 |
- 동네소식에서 우리동네 인기글이 무엇일지 볼 수 있습니다.
- 동네소식에서 다른 여러동네들의 좋아요가 많은 인기글들을 볼 수 있습니다.
- 카테고리별로 인기있는 동네들을 볼 수 있습니다.
- 마이페이지에서 회원 정보를 변경할 수 있습니다.
- 프로필 사진, 닉네임, 나의 지역을 변경할 수 있습니다.
- 마이페이지에서 내가 등록한 게시물들을 확인할 수 있습니다.
- 마이페이지에서 내가 등록한 북마크된 게시물들을 볼 수 있습니다.
- 마이페이지에서 나의 등급을 확인할 수 있습니다.
- 등급은 좋아요를 받은 수와 게시글 수를 기준으로 "주민,토박이,터줏대감" 으로 구분됩니다.
- 채팅방이나 채팅메세지를 통한 검색이 가능합니다.
- 상대의 이름을 검색하여 채팅방을 생성 할 수 있습니다.
- 1:1 대화를 할 수 있습니다.
- 메세지가 오면 상단에 알림으로 표시되어 어떤 페이지에 있어도 메세지가 왔음을 알 수 있습니다. 채팅을 확인하면 알림이 사라지게 됩니다.
-
- 동적 import로 첫 로딩시간 개선 (React.lazy)
- 이미지 최적화로 속도 개선 (사이즈 조정 및 압축 / CLS / Lazy Loading / webp는 성능개선만 확인해보고 주석처리 )
- meta 데이터 설정, console 제거 등 권장사항 준수
