$$config title: ? [React + Springboot] [팀 프로젝트 - 리뷰 사이트] keywords: - team - project $$ # ?github? - 프론트엔드 git [https://github.com/KWAKTAEWOOK/reviewsite.git](https://github.com/KWAKTAEWOOK/reviewsite.git) - 백엔드 git [https://github.com/KWAKTAEWOOK/reviewsite_back_and.git](https://github.com/KWAKTAEWOOK/reviewsite_back_and.git) # (1) 구상 # (2) 프론트 구현 -

팀프로젝트를 시작하기 전, 구상한 것을 바탕으로 하여 간단하게 퍼블리싱해보았다.

## ? 첫 페이지 ![원본이미지](https://ifh.cc/g/dMxyTB.png) --- -

react-router-dom @5 버전을 사용하여 넌 어때? 라는 로고를 클릭했을 때 메인페이지로 넘어가도록 구현하였다.

---
## ? 메인 페이지 ![원본이미지](https://ifh.cc/g/jqTgHl.jpg) --- # (3) 작업 분배하기 1. 로그인 + 회원가입 (프론트까지) -> 소영 1-(1). 로그인했을때만 리뷰 등록가능 2. 검색 -> 준형 2-(1). 검색시 지도에 마커 표시(커스텀에 오버레이) 2-(2). 검색시 목록표시 2-(3). 카테고리별 검색 가능하게 3. 가게 상세페이지 + 리뷰화면 -> 태욱 3-(1). 가게 찜하기 + 찜한 가게 표시 3-(2). 리뷰 댓글 구현 3-(3). 디테일페이지 프론트 4. 마이페이지 구현 -> 덕윤 4-(1). 내가 쓴 리뷰, 글, 표시 4-(2). 상대 게시글 , 댓글 확인 프론트 깃 주소 : https://github.com/tooffuu/yourReview_frontend ✨git 으로 협업하는 방법 ✨vscode로 프론트 + spring으로 백엔드 연동하는법 --- 내가 해야 할 작업은 1) 회원가입 2) 로그인 3) 로그인되었을 때만 리뷰 등록가능 … 그 이후에 더 추가 예정! 프론트는 vscode로 작업하였고, 백단은 인텔리제이(스프링부트)를 사용하기로하였다. 그러니 우선 vscode로 작업한 프론트코드와 인텔리제이에서 작업할 백엔드를 연동하는 방법을 알아보려고한다! # (4) 내가 담당한 파트 1. 회원가입 2. 로그인 3. 로그인시 리뷰 등록가능 ### (4)-1 추가 된 기능 --- ✅ 1. 로그인시 메인화면에 유저 닉네임 보여지게하기 -> 마이페이지 연동 ✅ 2. 회원가입 중복체크 로직 추가 ✅ 3. 회원가입 이메일 형식 유효성 검사 로직 추가 ✅ 4. 회원 탈퇴 5. 회원 탈퇴시 비밀번호 인증 6. 이메일 인증 7. 관리자 / 유저 나누기 8. 관리자 페이지 만들기 ✅ 9. 아이디 찾기 ✅ 10. 비밀번호 찾기 ✅ 11. 북마크 기능 ✅ 12. 북마크 시 나의 북마크 지도로 보여주고, 폴더 생성하기 ✅ 13. 북마크 삭제 (my place 페이지에서 삭제만 되게) 14. 북마크 폴더 삭제 -> 삭제 시 기존 북마크 기본폴더로 이동.. 가능하다면 ( 안되면 모두 삭제) ✅ 15. 북마크 폴더 이름 수정 !! 이거 먼저하기 16. 폴더 클릭 시 폴더 안의 북마크 오른쪽 지도에 보여지기 17. 북마크 자랑 게시판 만들기 --- 1. 배포 2. 깃 첫페이지에 설명 기록 3. 기술서 수정하기 # (5) 현재추가사항 & 고쳐야 할 사항 << 22.10.21 >> 1) ✅ 완료! ✅ : 닉네임 공백있어도 가능한지? -> 공백이 존재하면 아래에 "공백이 존재합니다." 라는 문구가 뜨고, 공백이 존재한 상태로 가입했을 때, 알람 뜨게 함 공백 체크 정규표현식 `var pattern = /\s/g;` 와 match 사용 -> 다시 확인해보니 공백도 들어감 2) ✅ 완료! ✅ : 사용자id 최소 3자 , 최대 25자 3) ✅ 완료! ✅ : 이메일 형식 유효성 검사 4) 유저 인증 (스프링 시큐리티 이용) => 관리자, 유저 따로 만들기 << 22.10.25 >> 5) ✅ 완료! ✅ : 닉네임, 아이디 중복시 db는 저장되지않지만 회원가입 성공이라고 뜨는 오류 에러처리하기 6) ✅ 완료! ✅ : 패스워드 1 =/= 패스워드2일때 회원가입 성공 알람 프론트에서 처리 -> onSubmit 써야하는 문제였음.. onClick 하고 type을 submit으로 했더니 모든 데이터가 저장됨 << 22.10.26 >> 7) ✅ 완료! ✅ : 로그인, 회원가입 창 모달로 띄우기 << 22.10.27 >> 8) ✅ 완료! ✅ : 회원탈퇴 누르면 회원 정보 삭제 << 22.10.28 >> 9) ✅ 완료! ✅ : 탈퇴시 500에러 뜨는것..해결할것 (백에서 유저 정보가 삭제 되고 없어서 500에러 뜨는듯 ㅠ) -> EmptyResultDataAccessException 에러 떠서 try-catch 문으로 예외처리함 10) ✅ 완료! ✅ : userRole === "ADIMIN" 띄워서 관리자 로그인시 관리자 페이지 리스트 나오게함 << 22.11.02 >> 11) ✅ 완료! ✅ : 아이디 찾기 << 22.11.05 >> 12) ✅ 완료! ✅ : 비밀번호 변경하기 -> 수정 메서드를 put으로 써야하는지 patch로 써야하는지 몰라서 .. 이것저것 한참 해봤당 ㅠ 결국엔 patch로 함.. 그리고 스프링 기초부터 다시 공부해야겠다고 느꼈다.. dto 사용법도 몰라서 유튜브 찾아보고 시간 많이 씀..! 13) 로그인 토큰 << 22.11.12 >> 14) ✅ 완료! ✅ : 좋아요 구현 -> 회원가입과 비슷한 로직(PostMapping 사용)으로 좋아요를 누르면 게시글 id, 유저 id가 db에 저장되도록 함 boolean으로 게시글 id와 유저 id가 함께 db에 저장되어있는 경우 true, 아닌경우 false가 나오게 하여 리액트에서 useEffect로 상태를 보여지게했당. (좋아요 누른경우 검정 따봉, 아닌경우 빈 따봉) -> 처음에 postid, userid 모두 useState로 초기값을 빈칸으로 설정했는데, 그렇게하니 db저장시 꼭 첫 값이 빈값으로 들어가서 초기값을 id (게시글 id) 와 user.userid (유저 id)로 변경했더니 잘 들어감 -> 또 초기값을 user.userid로 하니까 로그아웃상태에서 user가 없으니까 화면이 안나왔음 ,,, 그래서 이것저것해보다가 const [userid, setUserid] = useState(user && user.userid); // user가 있을때만 user.userid가 되게 함 이렇게하니 잘 작동됨 !! 성공 ! 이제 좋아요 취소하러 가야겠다 ㅎ하ㅏ하 15) ✅ 완료! ✅ : 좋아요 취소 ====> <22.11.21 수정 완료> --- # (6) 회원가입 백엔드 로직 # (7) sql 권한 추가 ```sql USE Mysql: DROP USER IF EXISTS 'newadmin'@'localhost'; CREATE USER 'sbsst'@'%' IDENTIFIED BY 'sbs123414'; GRANT ALL PRIVILEGES ON *.* TO 'sbsst'@'%'; ``` # (9) github 협업 (내 branch에서 작업해야함) 1. branch가 master일때 - > git switch (branch name) 2. git stash 하여 내가 작업하던 폴더를 임시 저장해둔다. 3. git pull origin master (최신 코드 업데이트) 4. git merge master (내가 작업하던 코드와 최신 코드 merge) 5. git stash apply --- # (10) 참고사이트 [롤 전적 확인 사이트(https://www.lolog.me/)](https://www.lolog.me/) [맛집 데이터 샘플다운로드](https://corp.siksinhot.com/w2/bigdata)
#### 1) 백엔드 [오류](https://liante0904.tistory.com/m/113) #### 2) 중복확인 [블로그](https://velog.io/@jch9537/Project-email-password-%EC%9C%A0%ED%9A%A8%EC%84%B1-%ED%99%95%EC%9D%B8) [블로그2](https://coding-hwije.tistory.com/3) [데이터 중복 boolean](https://1-7171771.tistory.com/78) [리액트 axios 로그](https://hwan1001.tistory.com/50) [회원가입 폼](https://ninearies.tistory.com/90) [유효성 검사](https://velog.io/@leemember/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EC%9C%A0%ED%9A%A8%EC%84%B1-%EA%B2%80%EC%82%AC) #### 3) css관련 [공백 체크](https://escapefromcoding.tistory.com/289) [리액트 모달](https://phrygia.github.io/react/2021-09-21-react-modal/) [리액트 모달 2](https://velog.io/@estell/react-onoff%EC%B0%BD-%EA%B8%B0%EB%8A%A5%EB%A7%8C%EB%93%A4%EA%B8%B0-true-false-useState) [addEventListener](https://medium.com/hcleedev/web-event%EC%99%80-addeventlistener-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-%EA%B0%9C%EB%85%90-react%EC%97%90%EC%84%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90-a581adc49aa4) [모달 ESC](https://velog.io/@quack777/React-esc%EB%A1%9C-modal-alert-%EB%8B%AB%EA%B8%B0) #### 4) 그 외 [스프링 시큐리티 이용 유저인증](https://twer.tistory.com/entry/Security-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EA%B3%BC-%EA%B6%8C%ED%95%9C-%EC%84%A4%EC%A0%95) [유저 삭제 delete / deleteByID](https://hwanchang.tistory.com/7) [JPA를 이용한 CRUD](https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=anytimedebug&logNo=221345322113) [이메일 인증](https://devofroad.tistory.com/43) [Spring Boot + JWT + Security + Security 권한 설정해서 '회원가입/로그인 구현'](https://sudo-minz.tistory.com/52) #### 5) 비밀번호 수정하기 [게시판 API만들기 데이터 삭제, 수정](https://learnote-dev.com/java/Spring-%EA%B2%8C%EC%8B%9C%ED%8C%90-API-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A1%B0%ED%9A%8C-%EC%88%98%EC%A0%95-%EC%82%AD%EC%A0%9C/#contoller-1) #### 6) 좋아요 [좋아요 기능 구현](https://devyuseon.github.io/spring/spring-like-feature/) [스프링부트 게시판 API 만들기](https://hose.tistory.com/18) ## ? 수정사항 ? - 한글 회원가입은 가능한데 한글 로그인은 불가능함 --- ### ? 메모장 --- ```js useEffect(() => { const getUser = async (userid) => { try { const data = await axios({ url: `${BACKEND_URL}/user/members`, method: "GET", data: { userid, nickname, email, }, }); setUser(data.data); console.log(data.data); } catch (e) {} }; getUser(userid); }, [userid]); ``` ``` ? OneToMany -> UserDto public UserDto(User user){ detailDtos = new ArrayList<>(); user.getDetails().stream() .forEach(dtUser -> { HeartDto heartDto = new HeartDto(dtUser); detailDtos.add(heartDto); }); }