분류 전체보기 (65) 썸네일형 리스트형 [여행 커뮤니티 만들기 (4)] 게시물 검색 with Springboot, JSP ✅ 메인 페이지 🌟 게시물 검색 🌟 ⭐ Main.jsp 검색을 담당하는 Controller의 url로 매핑 keyword 라는 이름으로 검색 인자 전들 검색에 성공하면 id가 "main_search_result"인 태그에 응답을 html 형식으로 전달 ⭐ MainController /** 메인 페이지 - 검색 */ @PostMapping("/ROLE_GUEST/search") public String searchMainPage(String keyword, Model model, @RequestParam(defaultValue = "1") int page) { userService.getUserAndAddModel(model); // 사용자 정보 담기 Pagination pagination = getPag.. [여행 커뮤니티 만들기 (4)] 페이징 처리 with Springboot, JSP ✅ 메인 페이지 🌟 페이징 처리 🌟 ⭐ MainController @GetMapping("/ROLE_GUEST") public String mainPage(Model model, @RequestParam(defaultValue = "2") int page) { userService.getUserAndAddModel(model); // 사용자 정보 담기 List countries = travelProductService.findAllCountriesByCountryLike(); model.addAttribute("countries", countries); // 최근 뜨는 여행지 담기 Pagination pagination = getPagination(); Page countriesExcept4 = coun.. [여행 커뮤니티 만들기 (3)] 페이지 디자인 구현 with Springboot, JSP ✅ 메인 페이지 ✅ 같이 여행 가요! - 게시판 ✅ DB ➡ 드롭 다운 ✅ 같이 여행 가요! - 작성 페이지 🌟community/travel_together_post.jsp 같이 여행 가요! 어느 나라로 갈까요? ${option.country} - ${option.city} 언제 갈까요? 몇 명을 모집할까요? 언제까지 모집할까요? 제목 내용 작성하기 게시글을 작성할 때, 하나라도 작성하지 않으면 alert로 경고창이 뜨도록 설정 모집 인원은 최소 0명부터 최대 300명까지 가능 날짜 선택 시 datepicker로 캘린더가 띄워짐 ✅ 여행에 대해 궁금해요! ✅ 나의 '같이 여행 가요!' 🌟CommunityController @Controller @RequestMapping("/ROLE_USER") publ.. [여행 커뮤니티 만들기 (2)] 헤더(header) + 네비(navigation) + 푸터(footer) with JSP ✅ 만들 페이지 ✅ 목표 헤더 / 네비 / 푸터는 각자 다른 jsp 파일로 만들고 하나로 합친다. header.jsp navigation.jsp footer.jsp base.jsp -> 헤더 + 네비 + 푸터 동적 페이지를 위해 px보다는 %로 넓이 혹은 마진 등을 설정한다. ✅ header.jsp TT | Travel Together 조유진님, 반갑습니다! ✅ navigation.jsp 어디로 여행을 떠날까요? 커뮤니티 같이 여행 가요! 여행에 대해 궁금해요. 나의 여행 곧 여기로 떠나요! 이 여행지에 관심있어요. 마이 페이지 나의 '같이 여행 가요!' 나의 '여행에 대해 궁금해요.' ✅ footer.jsp TT | Travel Together writer | YOUJIN CHO email | topj.. [여행 커뮤니티 만들기 (1)] 목표 설정과 디자인 with Figma ✅ 목표 사용자는 같이 여행 갈 파티원을 모집할 수 있다. 파티 모집자는 여행 날짜를 선택하고 최대 파티 인원수를 설정한다. 파티 모집자는 자기가 원할 때 파티 모집을 중단할 수 있다. 파티 모집글은 나라별로 정리된다. 사용자는 궁금한 것을 게시글로 올릴 수 있다. 올린 게시글에는 무한 대댓글이 달릴 수 있다. 게시글은 나라별로 정리된다. 가장 좋아요가 많이 달린 4개의 여행지는 메인 페이지에 띄워진다. 좋아요 개수는 한 나라의 모든 여행 게시글의 좋아요 수를 합해 계산한다. 일본 10개의 좋아요 = 후쿠오카의 좋아요 5개 + 도쿄의 좋아요 2개 + 도쿄의 다른 게시물의 좋아요 3개 여행지는 검색될 수 있으며, 검색된 여행지 리스트를 띄운다. 여행지 상품을 클릭하면 가격과 쿠폰, 해시태그 등이 나오며, .. [React X Springboot] Controller와 Axios로 데이터 통신하기 (Get/Post) 💡프론트엔드 ✅ package.json "proxy": "http://{백엔드 컴퓨터의 IP 주소}:8080", ✔ 배포 시 AWS에 올린 탄력적 IP 주소로 변경 ✔ 백엔드 컴퓨터는 외부 컴퓨터가 접근할 수 있도록 접근 허용 설정해야 함 (방화벽) ✅ 파일명.js const [response, setResponse] = useState('') useEffect(() => { axios.{get 또는 post}('{백엔드 API 주소}') .then(response => setResponse(response.data)) .catch(error => console.log(error)) }, []); ✔ 데이터를 읽어올 때는 Get 메소드 ✔ 데이터를 보낼 때는 Post 메소드 ✔ 백엔드에서 반환하는 데이터.. [React X Springboot] Controller와 Axios로 데이터 통신하기 (Get/Post) 💡프론트엔드 ✅ package.json "proxy": "http://{백엔드 컴퓨터의 IP 주소}:8080", ✔ 배포 시 AWS에 올린 탄력적 IP 주소로 변경 ✔ 백엔드 컴퓨터는 외부 컴퓨터가 접근할 수 있도록 접근 허용 설정해야 함 (방화벽) ✅ 파일명.js const [response, setResponse] = useState('') useEffect(() => { axios.{get 또는 post}('{백엔드 API 주소}') .then(response => setResponse(response.data)) .catch(error => console.log(error)) }, []); ✔ 데이터를 읽어올 때는 Get 메소드 ✔ 데이터를 보낼 때는 Post 메소드 ✔ 백엔드에서 반환하는 데이터.. [Springboot] MultipartFile을 통한 이미지의 저장과 전송 📸 클라이언트로부터 사진을 받아 DB에 저장하기 🖥 Image Entity @NoArgsConstructor @AllArgsConstructor @Builder @Data @Entity public class Image { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @NotNull private String name; @NotNull private String type; private byte[] picByte; } ✅ Long 타입의 id - 이미지의 기본키를 담당하며, 순서대로 자동 생성됨 ✅ String 타입의 name - 이미지의 이름 ✅ String 타입의 type - 이미지의 유형 ex) image/jpeg.. 이전 1 2 3 4 ··· 9 다음
