$$config title: ? [React + Springboot] [개인 프로젝트 - 여행지 공유] keywords: - project - java $$ # ?github? - 프론트엔드 git [https://github.com/tooffuu/trip_pr_front.git](https://github.com/tooffuu/trip_pr_front.git) - 백엔드 git [https://github.com/tooffuu/trip_pr_backend.git](https://github.com/tooffuu/trip_pr_backend.git) # (1) 구상 ``` ? 내가 원하는 여행 경로를 구상, 저장하고 정보를 공유할 수 있는 커뮤니티 사이트 구현 ``` # (2) 프론트 구현 ``` ? 홈 -> 인기 게시글 노출 게시판 종류 -> 사진자랑 / 코스공유 / 내 여행지 (내가 저장해둔 여행 경로… 등) / 티켓 판매 (당근마켓처럼 서로 사고 파는 기능) ``` ![이미지](https://ifh.cc/g/zOJfgw.jpg) # (3) 기능 구상 ``` ✅ 1. 회원가입 기능 ✅ 2. 로그인 기능 ✅ 3. 회원 탈퇴 ✅ 4. 회원 정보 수정 -> 비밀번호 변경 ✅ 5. 아이디 / 비밀번호 찾기 ? 6. 메인페이지에 게시판 별 인기 게시글 노출 ✅ 7. 각 게시판에 CRUD 기능 넣기 -> C/R/U/D 완료 ✅ 8. 프로필 사진 넣고, 보여지게 하기 -> 이미지파일 db저장 방법 1) sql에 저장 (데이터가 소량일때) 2) Cloudinary 이용 3) aws s3버킷에 사진 저장 ✅ 3) 아마존 aws에 사진 저장 ? 9. 지도 api 사용하여 원하는 여행 루트 저장하기 ✅ 10. 지역 카테고리에 맞는 결과물 노출 ? 11. 장소 검색시 게시판 별 키워드에 맞는 원하는 결과물 노출 ? 12. 댓글달렸을때 알람 ? 13. 로그인 recoil -> session 으로 변경 (sessionStorage 사용) ? 14. 백엔드 yml파일 깃에 안올라가게 설정 ? 15. 게시글 임시저장되게 변경 ✅ 16. 게시글에 댓글구현 ``` # (4) 추가 기능 - [X] 프로필 화면에서 로그아웃안되는 오류 해결 ==> && useState(user && user.name) - [X] 프로필 사진 변경 완료 (22.12.01) - [X] 게시판 글 작성 & 불러오기 완료 (22.12.06) - [X] 게시글 - 회원 jpa 맵핑 완료 (22.12.07) # (5) 오류 기록 - [X] 글쓰기 작성시 엔티티에 builder로 dto의 값 받아옴 -> 글쓰기만 했을 때는 잘 되다가 파일 업로드 기능 추가하니 계속 null값이 나옴 → 이유 : dto에 작성되어있던 @builder, @AllArgsConstructor, @NoArgsConstructor 어노테이션 삭제하니 잘됨 ..... - [X] quill 에디터를 사용해 글쓰기 + 이미지 업로드를 구현하려고 하니 이미지가 base64로 변환되어 어어어어엄청나게 긴 코드로 변환이 됨 ... 그래서 db에도 저장이 안된다,, 이 base64로 변환 된 이미지를 다시 변환시켜 s3에 저장하는 방법 찾아보기! → 게시물 작성 완료시에만 aws에 올라가게 하고싶은데 방법을 모르겠다 ㅠ 찾는중 → 일단 onchange시에 aws, db에 id null값으로 올리고 작성완료버튼 누르면 id 값 부여하는 것으로 설정해둠 # (6) 참고 사이트

✨ 이미지 업로드 관련

- [React 이미지 업로드하기 with Axios](https://velog.io/@edie_ko/React-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-with-Axios) - [SpringBoot 파일이미지 업로드 구현하기](https://velog.io/@pyo-sh/Spring-Boot-%ED%8C%8C%EC%9D%BC%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0) - [Cloudinary를 사용하여 프로그래밍 방식으로 Spring Boot에 미디어 업로드](https://intrepidgeeks.com/tutorial/upload-media-to-springboot-using-cloudinary-programming) - [Springboot 이미지 처리](https://velog.io/@yyong3519/Springboot-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B2%98%EB%A6%AC) - [Springboot 파일 업로드](https://chb2005.tistory.com/102) - [프로필사진 등록('폼 태그'와 '드래그 앤 드롭'방식으로 파일 업로드)](https://koiking.tistory.com/120) - [Spring boot/JPA 사용해서 이미지 업로드 구현](https://25gstory.tistory.com/87) - [? 스프링 부트 파일 업로드 하기](https://youtu.be/kjRpR13_eZo) - [reactJS + springboot 파일 업로드 구현하기](https://peachsoong.tistory.com/67) - [reactJS + springboot 파일 업로드 구현하기2](https://peachsoong.tistory.com/68) - [✨✨](https://velog.io/@yu-jin-song/SpringBoot-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B5%AC%ED%98%84-4-MultipartFile-%EB%8B%A4%EC%A4%91-%ED%8C%8C%EC%9D%BC%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C) - [SpringBoot-AWS-S3로-이미지-업로드하기](https://velog.io/@chaeri93/SpringBoot-AWS-S3%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0) - [https://github.com/minji0123](https://gallery-k.tistory.com/307) - [SpringBoot 인스타그램 프로필사진 변경](https://velog.io/@jiandme/SpringBoot-%EC%9D%B8%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8-11-%ED%94%84%EB%A1%9C%ED%95%84-%EC%82%AC%EC%A7%84-%EB%B3%80%EA%B2%BD)

✨ 맵핑 관련

- [[Spring] 스프링 순환 참조, 무한 재귀 해결하기 (DTO, JsonIgnore)](https://thalals.tistory.com/303)

✨ 스프링부트 객체 반환

- [[Spring Boot] JSON 형태로 객체 반환하기](https://devjaewoo.tistory.com/76?category=1012504)

✨ 스프링부트 MultipartFile 이용한 이미지 수정

- [[Spring Boot] 게시판 구현 5 - 게시글 수정 및 삭제, 다중 파일(이미지) 반환 및 조회 처리 MultipartFile](https://velog.io/@yu-jin-song/Spring-Boot-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EA%B5%AC%ED%98%84-5-%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%88%98%EC%A0%95-%EB%B0%8F-%EC%82%AD%EC%A0%9C-%EB%8B%A4%EC%A4%91-%ED%8C%8C%EC%9D%BC%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B0%98%ED%99%98-%EB%B0%8F-%EC%A1%B0%ED%9A%8C-%EC%B2%98%EB%A6%AC-MultipartFile)
### ? 메모장 - [ ] 이름 / 닉네임 / 아이디 / 이메일 중복확인 - [X] 프로필 이미지 수정 - [X] 이미지 서버로 보내기 - [ ] 게시판 crud