UVC 부트캠프 중간 역량강화 프로젝트 2팀 입니다.
⚡️🚨⚡️
(っ´ω`)っ 강희정[ ROLE : 팀장 - 프로젝트 총괄 ]
˚∧＿∧ + —̳͟͞͞💗
( •‿• )つ —̳͟͞͞ 💗 —̳͟͞͞💗 +
(つ < —̳͟͞͞💗
｜ _つ + —̳͟͞͞💗 —̳͟͞͞💗 ˚ 김영훈[ ROLE : 백엔드 ]
`し´
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█░░░░░░░░▀█▄▀▄▀██████░▀█▄▀▄▀██████░ 이동빈[ ROLE : 프론트엔드 ]
░░░░░░░░░░░▀█▄█▄███▀░░░ ▀██▄█▄███▀░
[참고] https://beyond-limits.tistory.com/33
[참고 1] (https://inpa.tistory.com/entry/GIT-%E2%9A%A1%EF%B8%8F-github-flow-git-flow-%F0%9F%93%88-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EC%A0%84%EB%9E%B5)
[참고 2] (https://rainbound.tistory.com/entry/git-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EC%A0%84%EB%9E%B5#github-flow)
main 브랜치에서 frontend와 backend 라는 sub-main 브랜치를 분기한 이후 frontend,backend 브랜치에서 각각 커밋을 진행.
작업진행 중간마다 frontend와 backend에서 새로운 기능을 작업하는 경우 각각의 브랜치에서 feature 브랜치를 분기하여 작업하고,
기능이 완성되면 각각의 sub-main branch로 merge 할거고, 배포가 가능하다면 main 브랜치로 sub-main 브랜치로 merge할 예정.
매일 오전 9-10시 회의 진행 예정
1. 프로젝트 진행 현황 체크
- back: 현재까지의 기능 구현 사항 체크 , front: 현재까지의 view 설계 사항 체크
- 백 프론트 연동및 버그 사항 공유
2. 금일 작업 내용 공유
- 금일 할당된 프로젝트 필요 추진사항 체크
- 버그 사항에 대한 디버깅 수행.
- 본 프로젝트의 일자별 진행계획은 다음과 같습니다.
12일(월)
-
프로젝트 진행과정 수립.
-
주제 선정 및 페이지 구성.
-
페이지 레이아웃 및 기능 논의
13일(화)
- Git branch 초기 세팅
- backend 기본 세팅
- frontend 기본 세팅
- Main 홈페이지 회원가입 페이지 만들기
- 회원가입 및 로그인 기능
14일(수)
- Front: 라우팅 처리
-
메인페이지[path: / ]
====================================
방구하기 : /room
방내놓기 : [회원 유효성검사 path: /login ] ->
로고 : /
login: /login
signup : /signup -
회원가입
====================================
-
back : 회원가입 ,소셜 로그인 기능 구현
-
웹페이지 레이아웃 설명을 위한 구글 프레젠테이션 작성
15일(목)
- 프로젝트 진행(3)
16일(금)
- 프로젝트 진행(4)
17일(토)
- 프로젝트 진행(5) 및 중간점검
18일(일)
- 프로젝트 진행(6)
19일(월)
- 프로젝트 완성
20일(화)
- ppt , 동영상 자료 준비 및 프로젝트 추가 보완.
21일(수)
- 발표
부동산 매물사이트
- 사용자가 쉽게 매물찾을수 있고 , 쉽게 매물을 올릴수있는 웹페이지를 구상함.
- 현재까지 배운 기술 스택을 적극적으로 활용하여 웹사이트를 구현함.
자바스크립트 , mysql, node.js , express , 부트스트랩 등.
- 사용자 회원가입및 로그인 기능
- 인증 기능: 이메일 인증, SMS 인증
- 마이페이지 기능
- 검색및 필터링 기능
- 매물 등록,조회 ,삭제 기능
- 문의 알림 기능
- 실시간 채팅 기능: 사용자들이 사이트 내에서 실시간으로 채팅할 수 있는 기능
- 소셜 미디어 연동: 사용자들이 소셜 미디어 계정을 통해 로그인하고 컨텐츠를 공유
- 지도 기반 매물 검색 기능: 매물이나 서비스의 위치 정보를 지도에 표시
- 찜 기능: 사용자들이 자주 찾는 매물이나 관심 있는 항목을 북마크로 저장
사용자 회원가입 및 로그인 기능
- 회원 데이터를 MySql에 저장하고, Express를 사용하여 회원가입 요청을 처리.
- 암호화를 위해 bcrypt 라이브러리를 사용.
- bcrypt는 사용자 비밀번호를 암호화하는 라이브러리.
- 이메일과 닉네임의 고유성(unique)을 검사하기 위해 데이터베이스의 unique 인덱스를 활용하거나
- MySql 에서 제공하는 unique 제약 조건을 사용.
- 회원가입 시에 토큰 기반의 유효성 검사를 구현하기 위해 JSON Web Tokens (JWT) 라이브러리를 사용.
- JWT는 토큰 기반 인증을 구현하는 데 사용되며, 회원가입 후 로그인 절차에서 토큰 생성 및 검증을 처리함.
- 다음과 네이버 소셜 로그인을 구현하기 위해 각 플랫폼에서 제공하는 소셜 로그인 API를 활용하거나
- Passport 라이브러리를 활용할 예정.
인증 기능: 이메일 인증, SMS 인증
이메일 인증을 위한 Nodemailer 라이브러리를 사용.
사용자가 이메일 인증 링크를 받고 확인하면 인증이 완료됩니다. SMS 인증을 위해는 서비스 제공 업체(API 제공자)와 연동하여 SMS를 보내는 방식을 사용.
마이페이지 기능
Express와 MySql을 사용하여 마이페이지 기능을 구현.
회원의 기본 정보는 MySql에 저장및 찜목록 조회, 문의사항 조회, 회원탈퇴 등의 기능을 Express로 구현.
검색 및 필터링 기능
검색 및 필터링 기능을 구현하기 위해는 MySql의 쿼리 기능을 사용.
MySql의 다양한 쿼리 연산자로 데이터를 검색하고 정렬.
매물 등록, 조회, 삭제 기능
매물 등록, 조회, 삭제 기능을 구현하기 위해 Express와 MySql을 사용함.
Express.js를 통해 매물 등록, 조회, 삭제와 관련된 API 엔드포인트를 생성하고,
MySql에서 매물 데이터를 저장하고 관리함.
문의 알림 기능
문의 알림 기능을 구현하기 위해는 이메일 또는 푸시 알림 서비스를 활용.
사용자가 문의를 하면 알림을 보내어 관리자나 사용자에게 알림을 전달.
실시간 채팅 기능
실시간 채팅 기능을 구현하기 위해 Socket.IO를 사용.
사용자들이 사이트 내에서 실시간으로 채팅할 수 있도록 함.
소셜 미디어 연동
소셜 미디어 연동을 구현하기 위해 Passport 라이브러리를 사용.
사용자들이 소셜 미디어 계정을 통해 로그인하고 컨텐츠를 공유할 수 있도록 함.
지도 기반 매물 검색 기능
KAKAO API와 같은 지도 서비스를 사용하여
사용자의 검색 조건에 따라 지도에 매물 위치 정보를 표시함.
찜 기능
사용자가 찜한 매물 정보를 DB에 저장하고, 마이 페이지에서 찜한 매물을 조회하고 관리.
최종 작업물과 일부 차이가 발생할수 있습니다.
1. 프론트엔드 - main 페이지 설계및 개발
- 사이트의 홈페이지.
- "방 구하기" , "방 내놓기" : 해당 페이지로 라우팅 될수 있도록 함.
- 로그인 전: 로그인 , 회원가입 네비게이션 바 구성. [로그인과 회원가입이 가능하도록 함.]
- 로그인 후: "000님 환영합니다. " 마이페이지 버튼 생성.
- 마이페이지: 회원 기본정보 , 찜목록 조회 , 문의사항 조회 , 회원탈퇴
[1]
[2]
- 표에서 원하는 지역구를 선택한다.
- 해당하는 지역구 매물지도로 페이지 이동.
- 해당하는 지역구를 선택하면 , 해당 지역구로 지도가 바뀌면서 각 동에 있는 매물수량이 표시됨.
- "매물 수량 마크"를 선택하면 해당 동에 있는 매물 목록으로 넘어간다.
- "전체 매물 목록"을 선택하면 해당 구에 있는 전체 매물 목록으로 넘어간다.
- 다음과 같이 매물 목록을 확인할수있다.
- 원하는 매물을 클릭하면 해당 매물에 대한 상세정보 페이지로 이동한다.
- "필터": 전월세 , 매매 구분에 대해서 / 보증금 , 매매가 가격에 대해서 ....
- "정렬순서" : 등록순 , 가격순 , 추천순
- 매물 상세정보를 확인할 수 있다.
[1]
[2]
[3]
[4]
- 지도에 해당 위치가 표시된다.(mark)
- 로그인 및 본인 인증을 진행해야 매물 업로드 할 수 있음
- 매물 등록시 <매물 업로드 필수 정보>를 입력하면, 등록할 수 있음
<매물 업로드 필수 정보>
- 매물 위치 (도로명 주소 검색 기능 필요 ) - 공공API 혹은 다음 주소 API 활용
- 사진파일
- 계약 형태(매매, 전세, 월세) 및 가격,
- 방 정보(방 개수, 욕실 개수, 공급면적, 전용면적, 해당 층/전체 층)
- 연락 가능 연락처
- 페이지 자체 회원가입및 소셜 로그인을 활용한 로그인 기능 구현 예정.
2. 백엔드
[ 관련 기능을 위한 데이터 모델링& API 설계 및 개발 ]
사용자 데이터 모델링: 사용자의 기본 정보 (이름, 이메일, 비밀번호 등)을 포함하는 데이터 모델을 설계합니다. 회원가입 API: 사용자의 계정을 생성하고 필요한 정보를 저장하는 API를 개발합니다. 로그인 API: 사용자의 인증 정보를 확인하고 로그인을 처리하는 API를 개발합니다. 사용자 프로필 API: 사용자의 프로필 정보를 조회, 업데이트하는 API를 개발합니다.
매물 데이터 모델링: 매물 정보 (주소, 면적, 가격, 설명 등)를 포함하는 데이터 모델을 설계합니다. 매물 등록 API: 새로운 매물을 등록하는 API를 개발합니다. 매물 조회 및 검색 API: 매물 목록을 조회하고, 검색 및 필터링 기능을 제공하는 API를 개발합니다.
알림 데이터 모델링: 사용자에게 보내는 알림 정보 (내용, 수신자 등)를 포함하는 데이터 모델을 설계합니다. 알림 전송 API: 알림을 전송하는 API를 개발합니다. 메시지 데이터 모델링: 사용자간에 주고받는 메시지 정보 (내용, 발신자, 수신자 등)를 포함하는 데이터 모델을 설계합니다. 메시지 전송 API: 사용자간에 메시지를 주고받을 수 있는 API를 개발합니다.
인증 및 인가 기능: 사용자 인증 및 권한 부여를 처리하는 기능을 구현합니다.
[피터팬의 좋은방 구하기]
(www.peterpanz.com)