스프링부트16 [내멋대로 만드는 Kimstagram] 9. 팔로우 기능 구현하기 이제 대망의 팔로우 기능을 구현해보자... 사실 이걸 어떻게 구현해야 하나 로직을 꽤 고민했다. 여차하면 맞팔로우까지 필요할 수도 있으니까... 결국 내가 생각한 방법은 Follow라는 클래스를 하나 만들어서 테이블을 만들고, 팔로우하는 Account와 팔로우 당하는 Account를 저장하는 방법이었다. 일단 글은 이렇게 써놓긴 했는데... 구현을 시작해보자. 일단 Follow 클래스를 하나 만들었다. package com.kimdev.kimstagram.model; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import org.hibernate.ann.. 2024. 1. 24. [내멋대로 만드는 Kimstagram] 8. 프로필 수정 이번에 할 것은 프로필을 수정하는 것이다. 예를 들면 프로필 사진이나 한 줄 커멘트 같은 거... 그런데 사실 프로필이라고 해봤자 수정할 게 저 둘 밖에 없어서... 그냥 어렵지 않게 구현했다. 프로필에서 '프로필 편집' 버튼을 누르면 위와 같은 프로필 편집 폼으로 이동한다. 실제 인스타그램에는 성별도 있고 웹사이트 주소도 넣을 수 있는데... 이건 딱히 구현해봤자 큰 의미는 없을 것 같아서 다 생략한다. 사진 변경은 게시물 업로드 때와 동일하게 MultipartFile으로 구현했다. 여기서 헤맸던 부분은... static 폴더에 image를 저장하면 서버를 재시작하기 전 까지는 서버에서 파일을 인식하지 못한다. 곰곰이 생각해 보면 당연한 게... static은 정적 리소스를 관리하는 폴더이므로 동적으로.. 2024. 1. 21. [내멋대로 만드는 Kimstagram] 7. 게시물 좋아요 구현하기 인스타그램의 대표 기능이라고 볼 수 있는 좋아요 기능... 이번 게시글은 구현하면서 함께 글을 작성하는 중이라서 아직 모르긴 하는데 지금까지 해왔던 것들에 비하면 나름 쉽게 구현할 수 있을 것 같은데...? 일단 DB에 좋아요 정보를 저장해야 하므로 모델을 하나 만들어준다. package com.kimdev.kimstagram.model; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; import org.hibernate.annotations.CreationTimestamp; import javax.persistence.*; import java.sql.T.. 2024. 1. 21. [내멋대로 만드는 Kimstagram] 6. 게시글 화면 구현과 댓글 작성하기 사실 게시글 화면도 인스타그램의 화면을 그대로 클론하려고 했는데 어려워서 포기했다... 프론트 쪽 지식은 거의 전무해서 ㅋㅋㅋ 그냥 최대한 인스타그램 느낌이 살도록 내가 커스텀 해서 만들었다. 일단 결과물부터 업로드... 1. Controller 주소로 게시글ID를 받는다. 이 컨트롤러에서는 게시글ID를 받아서 해당 게시글을 가지고 post를 찾아서 Model에 함께 넘겨준다. 그리고 replyRepository에 findAllByPost()를 만들어서 방금 찾은 post에 달린 replies(댓글) 목록을 찾아서 함께 Model에 넘겨준다. @GetMapping("/post/{postId}") public String write(@PathVariable int postId, Model model) { .. 2024. 1. 21. [내멋대로 만드는 Kimstagram] 5. 프로필 화면 만들기 글쓰기를 구현했으니, 이제 그 유저의 프로필 화면을 구현할 수 있게 되었다. 프로필 폼에는 유저의 정보와 게시물, 팔로잉 정보가 보여야 한다. 유저의 정보는 주소에 입력한 username으로 accountRepository에서 해당 account를 찾아서 Model에 같이 넘겨주었다. 그리고 그 유저가 작성한 게시글 목록도 함께 jsp로 이동되어야 하므로, 찾은 account를 가지고 post를 찾을 수 있도록 postRepository에 findAllByAccount를 만들어 활용한 후 posts 리스트도 Model에 함께 추가해 주었다. @GetMapping("/profile/{username}") public String profile(@PathVariable String username, Mode.. 2024. 1. 21. [내멋대로 만드는 Kimstagram] 4. 글쓰기 구현하기 대망의 글쓰기를 구현할 시간이 다가왔다. 사실 프로필 화면을 먼저 작성하긴 했는데, 이건 프론트엔드에 가깝기도 하고... 또 글쓰기가 먼저 구현 되어야 프로필을 얼추 만들 수 있을 것 같아서 도중에 그만두고 글쓰기를 먼저 구현했다. 우선 게시물 작성 화면은 위와 같다. 뭐... 보면 알 수 있겠지만 굉장히 간단하게 만들었다. 사진 업로드는 을 이용해서 MultipartFile로 업로드되게 만들었다. 물론 이미지만 올릴 수 있게 해야 하는데 그거까지는 로직을 짜기 귀찮아서(...) 생략했다. 물론 이미지는 최대 10개 까지 올릴 수 있다. function previewImages(event) { var preview = document.getElementById('imageBox'); var files =.. 2024. 1. 16. 이전 1 2 3 다음 반응형
