인스타그램14 [내멋대로 만드는 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. [내멋대로 만드는 Kimstagram] 3.Spring Security + JWT 로그인 구현하기 Spring Security 인증과 권한 관리를 용이하게 해주는 라이브러리 build.gradle에서 Spring Security의 주석을 해제해보자. 이제 그 어떤 페이지로도 들어갈 수 없다. Security에서 해당 주소로 오는 주소는 모두 /login으로 보내기 때문이다. 여기서 로그인을 하면 들어갈 수는 있지만… 우리가 기껏 만들어 놓은 로그인 페이지가 있는데, 그걸 활용해야지 무슨 듣도 보도 못한 폼에다가 로그인 하라는 걸까…? 그래서 Spring Security의 설정을 조금 변경해 주었다. @Override protected void configure(HttpSecurity http) throws Exception { // csrf 토큰 비활성화 http.csrf().disable(); //.. 2024. 1. 9. 이전 1 2 3 다음 반응형
