[Project] 나만의 블로그 만들기 (7) - 게시글 작성과 게시글 태그 등록 로직 변경 + UUID 사용 제일 처음으로 작성한 게시글을 등록하는 방식은 다음 로직과 같이 되어있다.글쓰기 버튼 클릭 [POST] -> 백엔드에서 pk값과 createdAt 만 가지는 빈 내용의 entity 생성 후 클라이언트측에 pk값 전달클라이언트측에서는 제목, 내용, 태그 등을 작성제목, 내용 전달 [PATCH : /contents] -> update 로직을 통해 내용 수정태그 전달 [POST : /contentTags] -> 새로운 contentTag 엔티티 생성 후 DB에 저장하지만 이 방법은, 글쓰기 버튼을 누르는 순간 DB에 새로운 데이터가 생성되기 때문에 필요하지 않아진 데이터도 만들어질 것으로 생각되었고 이는 불필요한 pk값 증가 등으로 관리하는 데 있어서 불필요할 것 같다는 생각을 하였다.따라서, 다음에 시도한 .. [Project] 나만의 블로그 만들기 (6) - QueryDsl 을 이용해 페이징 + fetch join 한번에 수행하기 먼저 글을 작성하기 전에 fetch join이 무엇이고 왜 사용되는지부터 알아보자Fetch Join이란?우리는 SQL문을 사용하면서 테이블끼리 연관관계가 존재하고 이를 이용하기 위해 INNER JOIN, OUTER JOIN 등을 사용하게 된다. 그럼 스프링을 통해 개발할 때 사용되는 Fetch Join은 무엇일까?Fetch Join은 JPA나 JPQL에서 성능 최적화를 위해 제공하는 기능으로, 연관된 엔티티나 컬렉션들을 한 번의 SQL쿼리로 조회할 수 있도록 하는 기능이다. 즉 여러 데이터를 한번에 조회를 할 수 있기 때문에 성능적인 이점을 가져올 수 있으며, 주로 N+1 문제를 해결하는 데 있어 도움이 된다.다음 예시를 한 번 보자 현재, Cotnent 엔티티는 태그를 달아주기 위해 Tag 와 N:M .. [Project] 나만의 블로그 만들기 (5) - RefreshToken + Redis 통한 자동 로그인 기능 구현 사실 이번 프로젝트를 진행하면서, 프론트엔드도 같이 작성을 해야 하기 때문에 많은 시간이 백엔드 api 개발보다는 프론트엔드 코드 작성하는데에 더 많은 시간을 쏟게 되어 아쉬움이 많았다.하지만, 이번에 구현해볼 기능은 jwt 토큰을 이용해서 자동 로그인 기능을 해보려 했고, 프론트엔드 측면보다는 백엔드적인 측면에서 많은 고민을 할 수 있어서 아주 반갑고 재밌었다. 먼저, 이전에 도입했던 accessToken만 사용했을 때의 단점을 몇 가지 이야기해볼 수 있다.일단 기본 로직부터 다시 생각해본다면Oauth 로그인 -> 인증/인가를 위한 jwt 토큰 (accessToken) 발급 -> 백엔드에서 response 헤더로 AccessToken을 발급하여 전달 -> 전달받은 AccessToken을 프론트에서 관리.. [Project] 나만의 블로그 만들기 (4) - 댓글 CRUD 구현 저번 게시글 작성 이후로, 이번에는 게시글 아래에 달릴 댓글을 작성해보려 한다.전체적인 뷰는 단순하게 가져가려고 하는데, 다음과 같다. 사실 어떠한 블로그가 그렇든 똑같은 구조이다. 그래서 본문 글 아래부분에 댓글 관련 뷰를 만들고 input 으로 백엔드와 연결하는 작업을 간단하게 진행했다.구조는 다음과 같다.블로그 페이지를 띄울 때 GET 요청으로 해당 게시글에 대한 댓글들을 받아서 보여준다댓글을 입력하고 완료 버튼을 누를 시 POST 요청으로 새로운 댓글을 등록한다등록하면 새로운 데이터를 받아서 다시 렌더링한다.처음에는 간단하게 코드를 작성했기 때문에, 댓글을 등록하면 새로 댓글 정보를 받아서 useEffect을 통해서 상태관리를 했다.이렇게 했더니, 발생하는 문제는 댓글을 등록하면 페이지 전체가 새.. [Project] 나만의 블로그 만들기 (3) - 게시글 CRUD 구현 Intro ※ 해당 포스팅은, 프론트엔드에서는 게시글 작성 시에 Toast UI Editor을 사용했고, 백엔드 구현을 위주로 작성되었습니다. 일단 게시글 CRUD 를 적용함에 있어 다음과 같이 구조를 가져가기로 했다 게시글 C : 글쓰기 버튼을 누를 경우 빈 내용의 데이터를 생성한다 게시글 R : 메인 화면에는, 최근 9개의 게시글을 보여주고 Blog 페이지에서는 tailwind-nextjs-starter-blog의 양식을 같은 형태로 가져간다.(사실 그대로 가져다 쓰는게 이쁘지만 내가 하나 만들어보고 싶었다. 디자인은 다음과 같이 가져가보려고 한다. 최근 9개 게시글(Velog 같은 카드의 형태처럼) Blog 페이지는 기존과 같이 가져간다. (https://tailwind-nextjs-starter-.. [Project] 나만의 블로그 만들기 (2) - 로그인 환경 구현 Intro 일단, 내가 생각하는 웹사이트의 기본이 되는 로그인 기능을 만드려고 한다. 계획은 다음과 같다 Google, Github Oauth 로그인 기능 Oauth 로그인 시에 Jwt 토큰 발행 로그인을 하게 되면 토큰을 헤더에 담아 프론트로 전달 의 과정을 만들려고 했으며, 프론트에서 제대로 토큰을 받아서 로그인 하여 사용할 수 있는 것 까지를 목표로 한다. 로그인 과정 1차 구현 일단, 시작은 Oauth 로그인 기능을 간편하게 도와주는 Spring Security의 기능을 사용하기로 했다. 그렇게 진행했을 시 내 예상은 (프론트) {backend_url}/oauth2/authorization/google 등과 같이 로그인 url 접속 -> (백엔드) Spring Security을 통해 oauth 로.. [Project] 나만의 블로그 만들기 (1) - 프로젝트 구상 Intro마지막 글을 작성한 이후로, 팀원과 함께 2인 프로젝트도 진행하고, 꽤 규모 큰 프로젝트도 진행을 하며 혼자서 공부를 진행하고 있었다.그런데, 모종의 이유들로 인해서 어느 정도 개발이 진행되다가 무산되거나 현재까지 stop되어있는 부분이 많았다.개발 공부를 시작한 이유가 내가 만들고 싶은 것을 만들어보고자 시작한 것이 가장 컸는데, 실제로 프로젝트의 끝(배포)까지 진행되지 못하다 보니 스스로 많은 아쉬움도 생기게 되었다. (물론 그 와중에서도 백엔드관련 지식이라던지, 좋은 동료분들을 만나서 같이 성장을 하고 있다.) 따라서, 어느정도 백엔드 기본지식 + 프론트 지식 전무 한 상태이기는 하지만, 끝까지 1인 프로젝트를 진행해보고 싶었고 그 중 가장 생각나는 것이 블로그를 만드는 것이었다. 이유는 .. 이전 1 다음
