Project 댕린이집

📌 개선 이유백엔드와 통신시 인증이 필요한 경우 아래와 같이 헤더에 토큰을 넣어서 메서드를 요청해야 한다.매 요청 작업마다 작성하면서도 '이걸 이렇게 다 쓰는 게 맞나?' 'spring의 인터셉터 같은 게 있지않을까?' 하고 생각했었다.하지만 무지했었기 때문에 일단 일일이 다 작성했던 상태였다.그리고 이제 리팩토링을 해볼까 하는 시점에서 편리한 방법이 있는지 검색해보았고,  Axios Interceptor 를 알게 되었다.  📌 Axios Interceptor 란?Axios Interceptor는 Axios에서 HTTP 요청과 응답을 가로채고, 이를 처리하거나 변형할 수 있는 기능을 제공한다. 이 기능은 요청을 보내기 전이나 응답을 받은 후에 특정 작업을 수행해야 할 때 매우 유용하고, 주로 다음과 ..

📌 개선 이유이번 프로젝트에서 대부분의 주요 기능을 구현한 후, 서버 부하를 줄이고 유지보수성을 향상시키기 위해 리팩토링을 진행하기로 했습니다.이번 프로젝트에서 가장 많은 공부를 하였고, 신경을 썼던 부분은 Spring Security와 JWT를 사용한 토큰 및 회원 관리입니다. 백엔드 파트에서 신경쓰고자 한다면 무수히 많은 부분이 있겠지만, 아무래도 회원 관리의 보안에 대한 부분이 가장 기본적이라고 생각했기 때문입니다. 그래서 이 부분에 대해 더욱 깊이 이해하고 개선하고자 하는 욕심이 있었습니다. Refresh Token은 유효기간이 있기 때문에, 이를 DB에 저장하면 주기적으로 삭제해주어야 하는 번거로움이 존재합니다.Refresh Token에 대한 깊은 이해가 부족했고 일단 구현만하자 라는 생각으로..

요즘 어느 사이트든 기본인 소셜 로그인을 구현해봐야겠다는 생각이 들어서 도전!    기본적으로 먼저 카카오 디벨로퍼에서 애플리케이션을 등록해주어야 한다. 📌 Kakao Developers 애플리케이션 등록 https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com Kakao Developers에 접속하여 로그인'내 애플리케이션' 으로 이동하여 '애플리케이션 추가'를 클릭하여 생성플랫폼 설정Web 플랫폼을 추가하고 도메인을 설정배포 전이라면 localhost:3000을 설정하고, 배포 후에는 배포한 도메인도..

알림장은 별거 아닌거 같지만, 초보자 입장에서 꽤나 공수가 많이 들어갔다😓일단 처음에 식사나 배변 횟수 또는 상태 컬럼을 어떻게 나누고 표현할지, 라디오버튼 또는 체크박스를 어떻게 표현할지 많이 고민하고 헤매었다.개인적으로 이 부분은 사용자가 쉽고 빠르게 작성하며 한 눈에 확인할 수 있는 페이지이길 바랐으며, 댕린이집 웹사이트의 기능들 중에 어쩌면 가장 주요 기능이기도 하다.  먼저 테이블 설계부터 기록해보자.⭐ Noteid: 고유 식별자 (자동 증가)note_date: 알림장의 날짜meal: 식사 정보 (JSON 형태로 아침식사, 점심식사, 저녁식사, 간식 여부를 저장)poop_frequency: 배변 횟수 (0회, 1회, 2회, 3회 중 하나의 값을 저장)poop_condition: 배변 상태 (건..

[ 클라이언트 ] BoardView.jsimport Comment from './Comment';   Comment.js  게시물 ID를 props로 받습니다.   상태 변수 let [newComment, setNewComment] = useState(''); // 댓글 입력 필드의 현재 값을 저장 let [comments, setComments] = useState([]); // 해당 게시물과 관련된 댓글 목록을 저장 useEffect 컴포넌트가 마운트될 때 실행되는 useEffect 훅입니다. 댓글을 가져오는 fetchComments 함수를 호출합니다. useEffect(() => { fetchComments(); }, []);  댓글을 가져오는 비동기 함수요청..

좋아요 기능 구현한 것을 기록해보겠습니다!먼저, 게시글 좋아요 기능을 구현하기 위해서 진행단계를 생각해봤습니다.1. 좋아요 버튼 추가2. 좋아요 상태 관리 -> 한 번 누르면 '좋아요'                                -> 한 번 또 누르면 '좋아요 취소'3. 좋아요 API 호출   [ 클라이언트 ] BoardView.js 먼저 좋아요 여부의 상태를 관리하기 위해 useState훅을 사용해줍니다.let [isLiked, setIsLiked] = useState(false); // 좋아요 여부 상태 그리고 리턴문 안에 좋아요 수를 표시해주는 부분을 작성해줍니다. 🖤좋아요 ..

게시판의 기본 CRUD 기능은 끝났으니 이제 부가적인 기능을 넣어보겠습니다.부가적인 기능으로는 조회수, 좋아요, 댓글, 대댓글 정도를 구현해 볼 생각이구요.먼저 조회수 기능부터 추가해보겠습니다.   [ 클라이언트 ] BoardList.js   BoardView.js 조회수를 출력해줄수있는 부분을 작성해줍니다.     [ 서버 ]  BoardEntity.java columnDefinition = "integer default 0”조회수의 기본값은 0 이라는 코드를 추가해줍니다. BoardDTO.java 추가 X  BoardRepository.java package com.example.demo.repository;import com.example.demo.entity.BoardEntity;import or..

[ 클라이언트 ] BoardView.js // 게시글 삭제 let del = () => { axios.delete(`http://localhost:8082/api/v1/auth/n/deleteBoard?id=${id}`, { headers: { 'Authorization': 'Bearer ' + cookies.accessToken } }) .then(() => { console.log("게시글 삭제 성공!"); alert("게시글을 삭제하였습니다 🗑️") navigate("/boar..

PUT과 POST의 차이가 있고, 실무에서는 POST를 많이 쓴다는 얘기를 줏어듣고선 궁금해졌습니다. PUT 이라는 것을 따로 만들어놓은 데엔 분명 이유가 있을텐데..왜 POST를 쓰는거지?!   📌 RESTful API란?먼저 RESTful에 대해 다시 한번 상기해봅니다. 간단히 말해, 자원을 URI로 표현하고, 자원에 대한 행위를 HTTP Method(GET, POST, PUT, DELETE)로 표현하는 것입니다. 그리고 자원에 대한 행위를 나타내는 4가지 Method는 CRUD(Create/Read/Update/Delete)에 각각 매칭됩니다. 📌POST와 PUT💡 멱등성: 여러 번 수행해도 결과가 같음예를 들어, POST로 이름이 까미인 강아지를 생성해달라고 2번 요청한다면 → id가 1과 ..

이제 본격적으로 수정 기능을 구현해보겠습니다.  [ 클라이언트 ] BoardView.jsisAuthor가 true 라면 버튼이 렌더링되고 edit() 함수를 실행하게 됩니다.  edit() 함수 // 게시글 수정 페이지로 이동 let edit = (id) => { console.log(id); navigate(`/editBoard/${id}`); }; edit 함수가 실행되면 /editBoard 페이지로 이동하게 됩니다. App.js }> App.js에 새로운 페이지를 등록해줘야겠죠.  EditBoard.js더보기import React, { useState, useEffect } from "react";import axios from "axios";import..