Project 댕린이집

게시글 수정 기능 구현 과정을 기록해보겠습니다.먼저, 모든 사용자가 모든 글에 대한 수정과 삭제 권한을 갖으면 안되므로 해당 글의 작성자에게만 수정/삭제 권한을 줄 것입니다. 현재 로그인한 사용자 = 특정 글 작성자 라면 글 상세보기 화면에서 수정/삭제 버튼이 렌더링 되게하고해당 기능을 실행할 수 있도록 구현했습니다.   📌 현재 로그인한 사용자 = 특정 글 작성자 인지 판별하는 로직 [ 서버 ]  BoardService.java public Map boardDetail(Long id) { BoardEntity boardEntity = boardRepository.findById(id) .orElseThrow(() -> new RuntimeException("게시글을 찾을 수 없습니다.")); ..

게시글 전체목록 조회는 구현했으니 이제 특정 글의 상세정보를 조회하는 기능을 구현해봅니다!특정 ID의 글을 못 찾아오는 사소한 이슈가 있었어서 그것도 함께 기록해볼 생각입니다.  [ 서버 ]   먼저, BoardEntity 입니다.package com.example.demo.entity;import jakarta.persistence.*;import lombok.*;import java.time.LocalDate;import java.util.List;@Entity(name = "board")@Getter@Setter@Builder@AllArgsConstructor@NoArgsConstructorpublic class BoardEntity { @Id @GeneratedValue(strategy = Ge..

게시글 목록 조회를 구현할건데요, entity와 dto, repository는 특별하게 추가한게 없어서 생략하겠습니다!   [ 서버 ]   BoardController.javapackage com.example.demo.controller;import com.example.demo.dto.BoardDTO;import com.example.demo.service.BoardService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;import java.util.List;@RestController@RequestMapping("/api/v1/auth/n")p..

게시판 작성 기능은 로그인한 회원만 사용할 수 있게 구현할 생각입니다. 1. 먼저 로그인을 한 상태라면? 게시글 작성 버튼을 누를시 작성 화면으로 이동2. 로그인을 안 한 상태라면? 로그인이 필요하다는 알림을 띄우고 로그인 화면으로 이동3. 현재 로그인한 사용자의 정보를 가져오기4. 새로운 게시글 생성: 클라이언트로부터 받은 DTO를 ENTITY로 변환하고 필요한 필드 설정5. Repository를 이용해 entity를 저장6. 클라이언트로 응답을 보내기 위해 ENTITY를 다시 DTO로 변환하여 리턴 처음에는 일반적인 로직을 구현을 했는데요나중에 유틸리티 메소드를 사용하여 리팩토링 했습니다.현재 인증된 사용자를 가져오는 작업은 거의 모듈마다 다 필요로 하다고 생각되어 보안 컨텍스트에서 사용자 ID를 가..

이제 사진첩의 특정 글을 들어가면 상세보기를 할 수 있는 기능과 화면을 구현해보겠습니다. [ 전체코드 ] GalleryView.js더보기import React, { useEffect, useState } from "react";import { useParams } from "react-router-dom";import axios from "axios";import 'bootstrap/dist/css/bootstrap.min.css';import { Button, Card } from 'react-bootstrap';const GalleryView = () => { const { id } = useParams(); // URL에서 id 파라미터를 가져옴 const [imageData, setIm..

사진을 업로드 했으니 경로를 통해서 가져와 렌더링 해줘야겠죠? [ 전체코드 ]  GalleryController.java 더보기package com.example.demo.controller;import com.example.demo.dto.GalleryDTO;import com.example.demo.entity.GalleryEntity;import com.example.demo.service.GalleryService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.http.HttpStatus;import org.springframework.http.MediaType;import org.sp..

정처기 실기 + 방통대 기말고사를 끝내고 컴백했습니다...물론 그동안 프로젝트를 병행하며 공부했지만, 노션에만 매일 기록해놓고 미처 블로그에는 업로드를 못했네요 😱오늘부터 노션에 기록했던 내용들을 정리하여 다시 기록해보겠습니다!  [ 전체코드 ]GalleryService.java더보기package com.example.demo.service;import com.example.demo.dto.GalleryDTO;import com.example.demo.entity.GalleryEntity;import com.example.demo.repository.GalleryRepository;import lombok.extern.log4j.Log4j2;import org.springframework.beans.f..

CreateGallery.js [ 전체코드 ]더보기import React from "react";import { useState } from "react";import axios from "axios";import { useCookies } from "react-cookie";import Nav2 from "../components/Nav2";import DatePicker from "react-datepicker";import "react-datepicker/dist/react-datepicker.css";import '../css/CreateGallery.css'let CreateGallery = () => { let [cookies, setCookies, removeCookies] = useC..

지난 글에서 올렸던 galleryService 중 업로드되는 파일의 저장경로와 파일명 지정하는 부분을 자세히 살펴보겠습니다. 먼저 application.properties에 업로드된 파일을 저장하는 경로를 지정해주었구요.중간에 폴더 이름에 한글이 있으면 깨지는 현상이 나타나길래 전부 영어로 설정해주었습니다.  그 후, galleryService에서 @Value 어노테이션을 사용하여 part.upload.path 속성의 값을 가져와서 uploadPath 변수에 할당합니다. 업로드할 파일들을 저장할 위치를 지정하는 속성 값을 가져오는 것 입니다. // 업로드 할 위치 @Value("${part.upload.path}") private String uploadPath;    @Service@Log4j2pub..

[ 화면 UI ]먼저 다른 페이지들처럼 React의 pases 폴더 안에 CreateGallery.js 라는 이름의 파일을 생성해주고 App.js에서 라우터에 등록해주었습니다.   💡 useState 훅 사용 useState Hook을 사용하여 컴포넌트의 상태를 관리하고 useCookies Hook을 사용하여 accessToken 쿠키 값을 가져와 cookies 상태 변수를 관리하기 위해서import를 해줍니다.import { useState } from "react";import { useCookies } from "react-cookie";  accesstToken 쿠키 값을 가져오고,업로드 할 파일 목록을 관리하기 위해 files 상태 변수를 작성해줬습니다.초기 상태는 빈 배열로 설정됩니다. ..