최종 프로젝트 사전 준비 기간(9.3 ~ 10.4)

Rest-api를 활용한 블로그 구현

기능 구현

React

◦

PostCard.jsx

import { Avatar, Card, CardContent, CardHeader, CardMedia, Typography, useTheme } from "@mui/material";
import { useNavigate } from "react-router-dom";

const PostCard = ({ post }) => {
    const navigate = useNavigate();
    const theme = useTheme();

    return ( 
        <Card sx={{ maxWidth: 345, cursor: "pointer" }} onClick={() => navigate(`/post/${post.id}`)}>
            <CardHeader
                avatar={
                    <Avatar sx={{ bgcolor: theme.palette.main.main }}>
                        {post.id}
                    </Avatar>
                }
                title={post.title}
                subheader={post.createdAt}
            />
            {/* <CardMedia
                component="img"
                height="194"
                image=""
                alt="게시글 이미지"
            />
            <CardContent>
                <Typography gutterBottom sx={{ color: 'text.secondary', fontSize: 12 }}>
                    {post.author.name} - {post.author.email}
                </Typography>
                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                    {post.content}
                </Typography>
            </CardContent> */}
        </Card>
    );
}
 
export default PostCard;
JavaScript
복사

◦

PostForm.jsx

import { Button, Grid2, TextField, Typography } from "@mui/material";
import axios from "axios";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";

const PostForm = () => {
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = useForm();

    const navigate = useNavigate();

    const onSubmit = async (data) => {
        data.authorId = 1;                                      // 로그인 기능 추가 전까지 임의로 작성
        console.log("서버에 게시글 요청을 보낼 데이터 : ", data)
        
        // 서버에 요청을 보내고
        try {
            const res = await axios.post("http://localhost:8080/api/post", data);
            // 정상적인 응답이면 -> 게시글 목록으로 보내주자
            navigate("/post");
        } catch (error) {
            // 비정상이면 -> 에러페이지 ㄱㄱ
            navigate("/error");
        }
    };

    // watch("이름") -> 해당 입력 "이름"의 값을 가져온다.
    // console.log(watch("example"));               // watch input value by passing the name of it

    return (
        <>
            {/* "handleSumbit 함수는 onSubmit 동작 전에 입력값에 대한 유효값 검증(validation)을 한다." */}
            <form onSubmit={handleSubmit(onSubmit)}>
                <Grid2 container direction={"column"} spacing={3} sx={ { width : {xs: '250px', sm: '500px'}} } >
                    {/* ...register("이름") -> 값이 전달된다. */}
                    {/* 필수값, 유효성 검증 등을 추가할 수 있다. */}
                    {/* 제목 (필수, 50자 이내) */}
                    <TextField
                        variant="outlined"
                        label="제목"
                        error={errors.title && true}
                        helperText={errors.title && "제목은 필수값이며, 50자 이내로 작성해야 합니다."}
                        {...register("title", { required: true, maxLength: 50 })}
                        fullWidth
                    />
                
                
                    {/* 내용 (필수) */}
                    <TextField
                        id="outlined-multiline-flexible"
                        label="내용"
                        multiline
                        rows={4}
                        error={errors.content ? true : false}
                        helperText={errors.content && "내용은 필수값입니다."}
                        {...register("content", { required: true })}
                    />
                
                    {/* 비밀번호 (필수) */}
                    <TextField
                        id="outlined-password-input"
                        label="비밀번호"
                        type="password"
                        autoComplete="current-password"
                        error={errors.password ? true : false}
                        helperText={errors.password && "비밀번호는 필수값이며, 영어와 숫자를 포함해 8자리 이상 20자리 이하로 작성해주세요."}
                        {...register("password", { required: true, pattern: /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,20}$/ })}
                        fullWidth
                    />
                    
                    {/* 유효값 검증 실패 시 나타나는 문구 */}
                    <Button fullWidth type="submit" variant="outlined" color="main">제출</Button>
                </Grid2>

            </form>
        </>
    );
}
 
export default PostForm;
JavaScript
복사

•

백엔드 연동

const onSubmit = async (data) => {
    data.authorId = 1;                                      // 로그인 기능 추가 전까지 임의로 작성
    console.log("서버에 게시글 요청을 보낼 데이터 : ", data)
    
    // 서버에 요청을 보내고
    try {
        const res = await axios.post("http://localhost:8080/api/post", data);
        // 정상적인 응답이면 -> 게시글 목록으로 보내주자
        console.log(res);
    } catch (error) {
        // 비정상이면 -> 에러페이지 ㄱㄱ
    }
};
JavaScript
복사

◦

App.js

import logo from './logo.svg';
import './App.css';
import Layout from './components/layouts/Layout';
import { Route, Routes } from 'react-router-dom';
import Post from './components/posts/Post';
import PostForm from './components/posts/PostForm';
import PostDetail from './components/posts/PostDetail';

function App() {
  return (
    <Layout>
      <Routes>
        <Route path='/' element={<h1>홈</h1>} />
        <Route path='/post' element={<Post />} />
        <Route path='/post/write' element={<PostForm/>} />
        <Route path='/post/:postId' element={<PostDetail />} />
        <Route path='/search' element={<h1>검색</h1>} />
        <Route path='/error' element={<h1>에러</h1>} />
        <Route path='*' element={<h1>낫 파운드</h1>} />
      </Routes>
    </Layout>
  );
}

export default App;
JavaScript
복사

•

SpringBoot

◦

글 추가 테스트

▪

ImageFile 엔티티 생성

package com.kosta.entity;

import jakarta.persistence.*;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Entity
@Data
public class ImageFile {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(updatable = false)
    private Long id;

    @Column(nullable = false, name = "original_name")
    private String originFileName;

    @Column(nullable = false, name = "saved_name")
    private String savedName;

    @Column(nullable = false, name = "file_size")
    private int fileSize;

}
Java
복사

▪

PostController

@PostMapping("")
/* { "title" : "제목", "content" : "내용", "password" : "1234", "authorId" : 1 } */
public ResponseEntity<PostResponse> writePost(PostRequest post) {
		PostResponse savedPost = postService.insertPost(post);
		return ResponseEntity.status(HttpStatus.CREATED).body(savedPost);
}
Java
복사

▪

Post Entity

package com.kosta.entity;

import jakarta.persistence.*;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.data.annotation.CreatedDate;
import org.springframework.data.annotation.LastModifiedDate;
import org.springframework.data.jpa.domain.support.AuditingEntityListener;

import java.time.LocalDateTime;

@Entity
@EntityListeners(AuditingEntityListener.class) 		// 생성, 수정 날짜 추적 -> Application.java (@EnableJpaAuditing)
@Data 												// toString, getter, setter, equals, hashCode
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class Post {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Column(updatable = false)
	private Long id;
	
	@Column(nullable = false)
	private String title;
	
	@Column(nullable = false, length = 1000)
	private String content;
	
	@Column(nullable = false)
	private String password;
	
	@JoinColumn(name = "author_id", nullable = false)
	@ManyToOne
	private User author;

	@JoinColumn(name = "image_id", nullable = true)
	@ManyToOne
	private ImageFile image;
	
	@CreatedDate
	@Column(name = "created_at")
	private LocalDateTime createdAt;
	
	@LastModifiedDate
	@Column(name = "updated_at")
	private LocalDateTime updatedAt;

}
Java
복사

▪

결과 확인

{
    "id": 10,
    "title": "제목",
    "content": "내용",
    "author": {
        "id": 1,
        "email": "test@gmail.com",
        "name": "민성"
    },
    "createdAt": "2024-09-03",
    "updatedAt": "2024-09-03"
}
JSON
복사

◦

ImageFileRepository

package com.kosta.repository;

import com.kosta.entity.ImageFile;
import com.kosta.entity.Post;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface ImageFileRepository extends JpaRepository<ImageFile, Long>{

}
Java
복사

◦

PostServiceImpl - insertPost

@Override
	public PostResponse insertPost(PostRequest postDTO, MultipartFile file) {
			String originalFileName = file.getOriginalFilename();
			Long fileSize = file.getSize();
	
			// 파일을 저장하고,
			String savedFileName = FileUtils.fileUpload(file);
			if (savedFileName != null) {
				// DB에도 추가하고
				ImageFile imageFile = ImageFile
						.builder()
						.originFileName(originalFileName)
						.savedName(savedFileName)
						.fileSize(fileSize)
						.build();
				imageFileRepository.save(imageFile);
			}
	
			User user = userRepository.findById(postDTO.getAuthorId())
				.orElseThrow(() -> new IllegalArgumentException("해당 유저를 찾을 수 없음"));
			Post post = postDTO.toEntity(user);
			Post savedPost = postRepository.save(post);
			PostResponse result = PostResponse.toDTO(savedPost);
			return result;
	}
Java
복사

◦

공통 Util - 이미지 파일 고려

package com.kosta.util;

import com.kosta.entity.ImageFile;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.nio.file.StandardCopyOption;
import java.util.UUID;

@Component
public class FileUtils {
    // application.yml 파일의 location 정보 가져오기
    @Value("${spring.upload.location}")
    private String uploadPath;

    public ImageFile fileUpload(MultipartFile file) {
        try {
            // 원본 파일명 가져오기
            String originalFileName = file.getOriginalFilename();
            // 파일 크기명 가져오기
            Long fileSize = file.getSize();
            // 새로운 파일명 만들어주기
            String savedFileName = UUID.randomUUID() + "_" + originalFileName;

            // 해당 경로에 파일 이미지 업로드
            InputStream inputStream = file.getInputStream();
            Path path = Paths.get(uploadPath).resolve(savedFileName);
            Files.copy(inputStream, path, StandardCopyOption.REPLACE_EXISTING);

            // 이상없으면 새로운 파일명 반환
            return ImageFile.builder()
                    .originFileName(originalFileName)
                    .savedName(savedFileName)
                    .fileSize(fileSize)
                    .build();
        } catch (Exception e) {
            e.printStackTrace();
            // 이상있으면 null 반환
            return null;
        }
    }
}
Java
복사

◦

파일 다운로드

▪

Controller

// 파일 다운로드
	@GetMapping("/download/{imageId}")
	public ResponseEntity<Resource> downloadImage(@PathVariable("imageId") Long id) throws MalformedURLException {
		FileDTO fileDTO = postService.getImageByImageId(id);

		UrlResource resource = new UrlResource("file:" + uploadPath + "\\" + fileDTO.getSaved());
		String fileName = UriUtils.encode(fileDTO.getOrigin(), StandardCharsets.UTF_8);
		String contentDisposition = "attachment; filename=\"" + fileName + "\"";
		return ResponseEntity.ok()
				.header(HttpHeaders.CONTENT_DISPOSITION, contentDisposition)
				.body(resource);
	}
Java
복사

▪

Service

@Override
	public FileDTO getImageByImageId(Long id) {
			ImageFile imageOpt = imageFileRepository.findById(id)
					.orElseThrow(() -> new IllegalArgumentException("해당 아이디에 맞는 파일 없음"));
			return FileDTO.toDTO(imageOpt);
	}
Java
복사

▪

FileDTO

package com.kosta.domain;


import com.kosta.entity.ImageFile;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;

@Data
@AllArgsConstructor
@Builder
public class FileDTO {
    private String origin;
    private String saved;
    private String kbSize;
    private Long size;

    public static FileDTO toDTO(ImageFile imageFile) {
        if (imageFile == null) {
            return null;
        }

        return FileDTO.builder()
                .origin(imageFile.getOriginFileName())
                .saved(imageFile.getSavedName())
                .kbSize(((Double) (imageFile.getFileSize() / 1024.0)).toString())
                .build();
    }
}
Java
복사

•

다운로드 (react)

2024. 9. 3 (rest-api)

실습

1.

Favorite 엔티티 생성

a.

번호(id), 제목(title), 주소(url), 이미지번호(image_id) 

2.

Repository 생성

3.

Service 생성

a.

FavoriteResponse insertFav(FavoriteRequest fav, MultipartFile file);

b.

List<FavoriteResponse> getAllFav();

c.

FavoriteResponse updateFav(FavoriteRequest fav, MultipartFile file);

d.

FavoriteResponse deleteFav(Long id);

4.

FavoriteController 생성

a.

/api/favorite (getAllFavList)

b.

/api/favorite (addFav)

c.

/api/favorite (modifyFav)

d.

/api/favorite (removeFav)

•

엔티티 생성

•

Repository 생성

•

FavoriteController

2024. 9. 4 (rest-api)

rest-api 관련 실습 진행 (blog 예제)

•

react

◦

링크 테이블 추가 후 코드 내용

import { Box, Button, FormControl, FormLabel, Grid2, Paper, Stack, styled, Switch, TextField, Typography } from "@mui/material";
import { useForm } from "react-hook-form";
import { favAPI } from "../../api/services/favorite";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { useEffect, useRef, useState } from "react";

const FavForm = () => {
    // const { favId } = useParams();
    const { state } = useLocation();
    const navigate = useNavigate();
    const { register, formState: { errors }, handleSubmit, setValue,  } = useForm();

    const [uploadFile, setUploadFile] = useState();
    const imgRef = useRef();
    const uploadFilePreview = () => {
        const reader = new FileReader();
        reader.readAsDataURL(imgRef.current.files[0]);
        reader.onloadend = () => {
            setUploadFile(reader.result);
        };
    };

    useEffect(() => {
        if (state) {
            state.image && setShowFileInput(false);
            setValue("title", state.title);
            setValue("url", state.url);
        }
    }, []);

    const [showFileInput, setShowFileInput] = useState(true);
    const toggleFileInput = () => {
        setShowFileInput(prev => !prev);
    }
    const onSubmit = async (data) => {
        try {
            const formData = new FormData();
            Object.keys(data).forEach(key => {
                formData.append(key, data[key]);
            });

            if (data.logo.length) {
                formData.append("image", data.logo[0]);
            } else {
                formData.delete("image");
                if (showFileInput) {
                    formData.append("deleteImage", true);
                }
            }

            if (state) {
                formData.append("id", state.id);
                const res = await favAPI.modifyFav(formData);
            } else {
                const res = await favAPI.writeFav(formData);
            }
            navigate("/favorite")
        } catch (error) {
            console.error(error);
        }
    }
    return (
        <Paper
            elevation={3}
            sx={{
                padding: 4,
                maxWidth: 600,
                margin: "auto",
                marginTop: 4,
            }}
            >
         <Box component="form" onSubmit={handleSubmit(onSubmit)} noValidate>
            <Grid2 container spacing={3}>
                <FormControl fullWidth>
                    <FormLabel htmlFor="title">사이트 이름</FormLabel>
                    <TextField
                        autoComplete="title"
                        {...register("title", { required: true })}
                        fullWidth
                        id="title"
                        placeholder="구글"
                        error={errors.title ? true : false}
                        helperText={errors.title && "사이트 이름은 필수값입니다."}
                    />
                </FormControl>
                <FormControl fullWidth>
                    <FormLabel htmlFor="url">URL</FormLabel>
                    <TextField
                        id="url"
                        fullWidth
                        {...register("url", { 
                            required: true,
                            pattern: /((?:https\:\/\/)|(?:http\:\/\/)|(?:www\.))?([a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(?:\??)[a-zA-Z0-9\-\._\?\,\'\/\\\+&%\$#\=~]+)/
                        })}
                        autoComplete="url"
                        placeholder="www.google.com"
                        variant="outlined"
                        error={errors.url ? true : false}
                        helperText={errors.url && "주소 규격에 맞지 않습니다."}
                    />
                </FormControl>
                <FormControl fullWidth>
                    <FormLabel component="legend">로고 이미지</FormLabel>
                    {state?.image && (
                        <Stack
                        direction="row"
                        spacing={1}
                        sx={{ alignItems: "center", marginBottom: 1 }}
                        >
                        <Typography>변경</Typography>
                        <AntSwitch
                            defaultChecked
                            onClick={toggleFileInput}
                        />
                        <Typography>유지</Typography>
                        </Stack>
                    )}
                    {showFileInput &&
                        <>
                            <TextField
                                type="file"
                                {...register("logo")}
                                slotProps={{ htmlInput : {"accept": "image/*"}}}
                                variant="outlined"
                                inputRef={imgRef}
                                onChange={uploadFilePreview}
                            />
                        </>
                    }
                    { (!showFileInput || uploadFile) && 
                        <Box sx={{ textAlign: "center", marginTop: 2 }}>
                            <img
                                src={uploadFile ? uploadFile : `${process.env.REACT_APP_SERVER}/img/${state.image.saved}`}
                                alt="Current Logo"
                                style={{ maxWidth: "100%", maxHeight: 200 }}
                            />
                        </Box>
                    }
                </FormControl>
                <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                >
                    {state ? "수정하기" : "등록하기"}
                </Button>
            </Grid2>   
        </Box>
        </Paper>
    );
}
 
const AntSwitch = styled(Switch)(({ theme }) => ({
    width: 36,
    height: 20,
    padding: 0,
    display: "flex",
    "&:active": {
      "& .MuiSwitch-thumb": {
        width: 15,
      },
      "& .MuiSwitch-switchBase.Mui-checked": {
        transform: "translateX(16px)",
      },
    },
    "& .MuiSwitch-switchBase": {
      padding: 2,
      "&.Mui-checked": {
        transform: "translateX(16px)",
        color: "#fff",
        "& + .MuiSwitch-track": {
          backgroundColor: "#1890ff",
          opacity: 1,
        },
      },
    },
    "& .MuiSwitch-thumb": {
      width: 16,
      height: 16,
      borderRadius: 8,
      transition: theme.transitions.create(["width"], {
        duration: 200,
      }),
    },
    "& .MuiSwitch-track": {
      borderRadius: 10,
      backgroundColor: "rgba(0,0,0,.25)",
      opacity: 1,
    },
  }));

export default FavForm;
JavaScript
복사

◦

FavList

import { useNavigate } from "react-router-dom";
import { Box, Button } from "@mui/material";
import { useEffect, useReducer, useState } from "react";
import { favAPI } from "../../api/services/favorite";
import FavAccordion from "./FavAccordion";

const favListReducer = (state, action) => {
  switch (action.type) {
      case "SET_FAVS":
          return action.payload;
      case "DELETE_FAV":
          return state.filter(fav => fav.id != action.payload.id);
  }
}

const FavList = () => {
  const [favList, dispatch] = useReducer(favListReducer, []);
  const navigate = useNavigate();
  const getFavList = async () => {
    const res = await favAPI.getFavList();
    dispatch({type: "SET_FAVS", payload: res.data});
  };

  useEffect(() => {
    getFavList();
  }, []);


  return (
    <>
      <Button onClick={() => navigate("/favorite/write")}>즐겨찾기 추가</Button>
      
      <Box sx={{width: "500px"}}>
        {favList.map((fav) => (
          <FavAccordion key={fav.id} fav={fav} dispatch={dispatch}/>
        ))}
      </Box>
    </>
  );
};

export default FavList;
JavaScript
복사

◦

FavAccordion

import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Avatar,
  Box,
  Button,
  styled,
  Typography,
} from "@mui/material";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import { useState } from "react";
import Swal from "sweetalert2";
import { favAPI } from "../../api/services/favorite";
import { useNavigate } from "react-router-dom";

const FavAccordion = ({fav, dispatch}) => {
  const navigate = useNavigate();
  const [isExpand, setIsExpand] = useState(false);
  const handleExpand = () => setIsExpand(prev=> !prev);
  const handleMove = () => {
    let urlLink = fav.url;
    if (!fav.url.startsWith("http://") && !fav.url.startsWith("https://")) {
      urlLink = `http://${fav.url}`;
    }
    window.open(urlLink, "_blank", "noopener, noreferrer");
  }
  const handleDelete = () => {
    Swal.fire({
      title: "확실해요?",
      text: "한 번 삭제하면 다시 되돌릴 수 없어요",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "응! 지워줘."
    }).then(async (result) => {
      if (result.isConfirmed) {
        try {
          const res = await favAPI.deleteFav(fav.id);
          if (res.status == 200) {
            Swal.fire({
              text: "삭제되었습니다.",
              icon: "success"
            });
            dispatch({type:"DELETE_FAV", payload: fav})
          }
        } catch (err) {
          console.error(err);
        }
      }
    });
  }

  const handleModify = () => {
    navigate(`/favorite/modify/${fav.id}`, { state : fav });
  }

  console.log(fav);
  return (
    <MyAccordion expanded={isExpand} onClick={handleExpand}>
      <MyAccordionSummary>
        <Box sx={{display: "flex", justifyContent: "space-between", width: "100%"}}>
          <Avatar alt={fav.title} src={`${process.env.REACT_APP_SERVER}/img/${fav.image?.saved}`} />
          <span>{fav.id}</span>
          <span style={{width: "40%"}}>{fav.title}</span>
          <Button onClick={handleModify}>수정</Button>
          <Button onClick={handleDelete}>삭제</Button>
        </Box>
      </MyAccordionSummary>
      <MyAccordionDetails>
        <Button onClick={handleMove}>{fav.url}</Button>
      </MyAccordionDetails>
    </MyAccordion>
  );
};

const MyAccordion = styled((props) => (
  <Accordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  "&:not(:last-child)": {
    borderBottom: 0,
  },
  "&::before": {
    display: "none",
  },
}));

const MyAccordionSummary = styled((props) => (
  <AccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor: "rgba(0, 0, 0, .03)",
  flexDirection: "row-reverse",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1),
  },
  ...theme.applyStyles("dark", {
    backgroundColor: "rgba(255, 255, 255, .05)",
  }),
}));

const MyAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
  borderTop: "1px solid rgba(0, 0, 0, .125)",
}));

export default FavAccordion;
JavaScript
복사

•

springboot - 회원가입 인증 관련 내용 진행

◦

AuthController

package com.kosta.controller;

import java.util.List;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PatchMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.kosta.domain.SignUpRequest;
import com.kosta.domain.UserDeleteRequest;
import com.kosta.domain.UserResponse;
import com.kosta.domain.UserUpdateRequest;
import com.kosta.service.AuthService;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@RestController
@RequestMapping("/api/auth")
@RequiredArgsConstructor
public class AuthController {
	private final AuthService authService;
	
	// 회원가입
	@PostMapping("")
	public ResponseEntity<UserResponse> signUp(@RequestBody SignUpRequest signUpRequest) {
		log.info("[signUp] 회원가입 진행. 요청정보 : {}", signUpRequest);
		UserResponse userResponse = authService.signUp(signUpRequest);
		return ResponseEntity.status(HttpStatus.CREATED).body(userResponse);
	}
	
	// 회원 전체 리스트
	@GetMapping("")
	public ResponseEntity<List<UserResponse>> getUserList() {
		log.info("[getUserList] 회원 전체 조회");
		List<UserResponse> userList = authService.getUserList();
		return ResponseEntity.ok(userList);
	}
	
	// 회원 정보 수정
	@PatchMapping("")
	public ResponseEntity<UserResponse> updateUser(@RequestBody UserUpdateRequest userUpdateReqeust) {
		log.info("[updateUser] 회원 정보 수정. 수정 요청 정보 : {}", userUpdateReqeust);
		UserResponse userResponse = authService.updateUser(userUpdateReqeust);
		return ResponseEntity.ok(userResponse);
	}
	
	// 회원 삭제
	@DeleteMapping("")
	public ResponseEntity<?> userWithdrawal(@RequestBody UserDeleteRequest userDeleteRequest) {
		log.info("[updateUser] 회원 삭제. 삭제 요청 정보 : {}", userDeleteRequest);
		authService.deleteUser(userDeleteRequest);
		return ResponseEntity.ok(null);
	}
}
Java
복사

◦

AuthService

package com.kosta.service;

import java.util.List;

import com.kosta.domain.SignUpRequest;
import com.kosta.domain.UserDeleteRequest;
import com.kosta.domain.UserResponse;
import com.kosta.domain.UserUpdateRequest;

public interface AuthService {

	UserResponse signUp(SignUpRequest signUpRequest);

	List<UserResponse> getUserList();

	UserResponse updateUser(UserUpdateRequest userUpdateReqeust);

	void deleteUser(UserDeleteRequest userDeleteRequest);
}
Java
복사

◦

AuthServiceImpl

package com.kosta.service;

import java.util.List;

import org.springframework.stereotype.Service;

import com.kosta.domain.SignUpRequest;
import com.kosta.domain.UserDeleteRequest;
import com.kosta.domain.UserResponse;
import com.kosta.domain.UserUpdateRequest;
import com.kosta.entity.User;
import com.kosta.repository.UserRepository;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Service
@RequiredArgsConstructor
public class AuthServiceImpl implements AuthService {
	private final UserRepository userRepository;

	@Override
	public UserResponse signUp(SignUpRequest signUpRequest) {
		User user = User.builder().email(signUpRequest.getEmail()).name(signUpRequest.getName())
				.password(signUpRequest.getPassword()).build();
		User savedUser = userRepository.save(user);
		return UserResponse.toDTO(savedUser);
	}

	@Override
	public List<UserResponse> getUserList() {
		List<User> userList = userRepository.findAll();
		return userList.stream().map(UserResponse::toDTO).toList();
	}

	@Override
	public UserResponse updateUser(UserUpdateRequest userUpdateReqeust) {
		User user = userRepository.findByEmail(userUpdateReqeust.getEmail())
				.orElseThrow(() -> new IllegalArgumentException("회원 정보 조회에 실패했습니다. [없는 이메일]"));

		if (!user.getPassword().equals(userUpdateReqeust.getPassword())) {
			throw new RuntimeException("비밀번호 입력 오류");
		}
		if (userUpdateReqeust.getName() != null)
			user.setName(userUpdateReqeust.getName());
		User updatedUser = userRepository.save(user);

		return UserResponse.toDTO(updatedUser);
	}

	@Override
	public void deleteUser(UserDeleteRequest userDeleteRequest) {
		User user = userRepository.findByEmail(userDeleteRequest.getEmail())
				.orElseThrow(() -> new IllegalArgumentException("회원 정보 조회에 실패했습니다. [없는 이메일]"));
		if (!user.getPassword().equals(userDeleteRequest.getPassword())) {
			throw new RuntimeException("비밀번호 입력 오류");
		}	
		userRepository.delete(user);
	}
}
Java
복사

2024. 9. 5 (rest-api)

토큰 기반 인증

•

사용자 인증 확인 방법을 두 가지로 나누면, 세션 기반 인증(서버 기반 인증)과 토큰 기반 인증이 있다.

•

토큰은 서버에서 요청을 받을 때, 요청을 보낸 클라이언트를 구분하기 위한 유일한 값이다.

•

서버가 토큰을 생성해서 클라이언트에게 제공하면, 클라이언트는 해당 토큰을 보관하고 있다가 여러 요청을 토큰과 함께 보낸다 (토큰 = 신분증)

•

서버는 토큰을 확인 후 해당 클라이언트가 유효한 사용자인지 검증하고, 요청을 처리해준다.

토큰 기반 인증 특징

2024. 9. 9 (JWT 토큰)

JWT 토큰 관련 핵심 코드 정리

Spring 코드

LoginCustomAuthenticationFilter 작성

•

로그인 인증 필터를 위해 LoginCustomAuthenticationFilter 작성
(WebSecurityConfig 쪽에서 로그인 필터 내용 제거해도 됨)

토큰 처리 위한 TokenUtil 생성

RefreshToken 적용

•

controller

2024. 9. 10 (JWT 토큰)

JWT 토큰 내용 및 코드 정리

JWT 토큰 발행 절차

•

RefreshToken 관련 코드

2024. 9. 11 (JWT 토큰)

•

SQL(Structured Query Language)

◦

DDL (데이터 정의어): ALTER, CREATE, DROP

◦

DML (데이터 조작어): SELECT, INSERT, UPDATE, DELETE

◦

DCL (데이터 제어어[TCL]): GRANT, REVOKE, COMMIT, ROLLBACK

•

RDBMS(관계형 데이터베이스) 
: MySQL, OracleDB, MSSQL, MariaDB, PostgreSQL, DB2

•

RDBMS 특징

◦

고정된 행과 열로 구성되어 정형적인 데이터 처리가 편함

◦

데이터의 무결성과 일관성을 보장

◦

복잡한 관계 표현에 적합 (외래키를 통한 조인)

◦

SQL문 사용

•

SQL에서 테이블의 모든 데이터를 조회하기

◦

SELECT * FROM 테이블명;

•

SQL에서 특정 열(job)의 중복된 값을 제거하기 위해서는

◦

SELECT DISTINCT job FROM 테이블명;

•

특정 조건을 만족하는 데이터만 조회하기 위해서는

◦

WHERE 절 사용

•

WHERE 절에서 조건을 만족하는 첫번째 행만 조회하기 위해서는 

◦

LIMIT

2024. 9. 12 (SQL)

JWT 토큰 활용한 프로젝트 - 미니 이커머스 프로젝트 진행 과정 정리

Springboot (패키지별로 정리)

•

config

◦

WebSecurityConfig

package com.kosta.config;

import java.util.Collections;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.ProviderManager;
import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
import org.springframework.security.config.annotation.web.configurers.HttpBasicConfigurer;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;

import com.kosta.repository.UserRepository;
import com.kosta.security.JwtAuthenticationFilter;
import com.kosta.security.JwtAuthenticationService;
import com.kosta.security.JwtProperties;
import com.kosta.security.JwtProvider;
import com.kosta.security.LoginCustomAuthenticationFilter;
import com.kosta.util.TokenUtils;

import lombok.RequiredArgsConstructor;

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class WebSecurityConfig {
	private final UserDetailsService userDetailsService;
	private final UserRepository userRepository;
	private final JwtProperties	jwtProperties;
	
	// JWT PROVIDER 생성자 호출
	private JwtProvider jwtProvider() {
		return new JwtProvider(userDetailsService, jwtProperties);
	}
	
	// TokenUtils 생성자 호출
	private TokenUtils tokenUtils() {
		return new TokenUtils(jwtProvider(), jwtProperties);
	}
	
	// JwtAuthenticationService 생성자 호출
	private JwtAuthenticationService jwtAuthenticationService() {
		return new JwtAuthenticationService(tokenUtils(), userRepository);
	}
	
	// 인증 관리자 (AuthenticationManager) 설정
	@Bean
	AuthenticationManager authenticationManager() {
		DaoAuthenticationProvider authProvider = new DaoAuthenticationProvider();
		authProvider.setUserDetailsService(userDetailsService);
		authProvider.setPasswordEncoder(bCryptPasswordEncoder());
		return new ProviderManager(authProvider);
	}
	
	// 암호화 빈
	@Bean
	BCryptPasswordEncoder bCryptPasswordEncoder() {
		return new BCryptPasswordEncoder();
	}
	
	// HTTP 요청에 따른 보안 구성
	@Bean
	SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
		// 경로 권한 설정
		http.authorizeHttpRequests(auth ->
			// 특정 URL 경로에 대해서는 인증 없이 접근 가능
			auth.requestMatchers(
				new AntPathRequestMatcher("/api/join"), // 회원가입
				new AntPathRequestMatcher("/api/duplicate"), // 이메일 중복체크
				new AntPathRequestMatcher("/api/refresh"), // 토큰 재발급
				new AntPathRequestMatcher("/api/oauth/**") // 토큰 재발급
			).permitAll()
			// AuthController 중 나머지들은 "ADMIN"만 가능
			.requestMatchers(
				new AntPathRequestMatcher("/api/product", "POST"),
				new AntPathRequestMatcher("/api/product", "DELETE"),
				new AntPathRequestMatcher("/api/product", "PATCH")
			).hasRole("ADMIN")
			// 그 밖의 다른 요청들은 인증을 통과한(로그인한) 사용자라면 모두 접근할 수 있도록 한다.
			.anyRequest().authenticated()
		);
		
		// 무상태성 세션 관리
		http.sessionManagement(sm -> sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS));
		
		// 특정 경로(로그인)에 대한 필터 추가 [authenticationManager, jwtAuthenticationService 생성자를 호출해 매개변수로 등록]
		http.addFilterBefore(new LoginCustomAuthenticationFilter(authenticationManager(), jwtAuthenticationService()), UsernamePasswordAuthenticationFilter.class);
		
		// (토큰을 통해 검증할 수 있도록) 필터 추가 [jwtProvider 생성자를 호출해 매개변수로 등록]
		http.addFilterAfter(new JwtAuthenticationFilter(jwtProvider()), UsernamePasswordAuthenticationFilter.class);
		
		// HTTP 기본 설정
		http.httpBasic(HttpBasicConfigurer::disable);
		// CSRF 비활성화
		http.csrf(AbstractHttpConfigurer::disable);
		// CORS 설정
		http.cors(corsConfig -> corsConfig.configurationSource(corsConfigurationSource()));
		
		return http.getOrBuild();
	}
	
	@Bean
	CorsConfigurationSource corsConfigurationSource() {
		return request -> {
			CorsConfiguration config = new CorsConfiguration();
			config.setAllowedHeaders(Collections.singletonList("*"));
			config.setAllowedMethods(Collections.singletonList("*"));
			config.setAllowedOriginPatterns(Collections.singletonList("http://localhost:3000"));
			config.setAllowCredentials(true);
			return config;
		};
	}
}
Java
복사

•

controller

◦

CommonController

package com.kosta.controller;

import java.util.Map;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.fasterxml.jackson.databind.JsonNode;
import com.kosta.domain.request.JoinUser;
import com.kosta.domain.response.ErrorResponse;
import com.kosta.domain.response.TokenResponse;
import com.kosta.service.UserService;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;

@RestController
@RequestMapping("/api")
@RequiredArgsConstructor
public class CommonController {
	private final UserService us;
	
	// 이메일 중복체크 -> /api/duplicate [GET]
	// RequestParam {email}
	// Response 200 or 409
	@GetMapping("/duplicate")
	public ResponseEntity<?> checkEmailDuplicate(@RequestParam("email") String email){
		boolean exists = us.checkEmailExists(email);
		
		if (exists) {
			return ResponseEntity.status(HttpStatus.CONFLICT).body(new ErrorResponse("이미 사용 중인 이메일"));
		}
		return ResponseEntity.ok().build();
	}
	//	회원가입 -> /api/join [POST]
	// Request {name, email, password}
	// Response 201 {???} or 400
	@PostMapping("/join")
	public ResponseEntity<?> registerUser(@RequestBody JoinUser joinUser) {
		try {
			us.registerUser(joinUser);
			return ResponseEntity.status(HttpStatus.CREATED).build();
		} catch (Exception e) {
			return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ErrorResponse("입력 값 오류"));
		}
	}
	
	// 토큰 재발급 -> /api/refresh [POST]
	// Response 200 {accessToken} or 401
	@PostMapping("/refresh")
	public ResponseEntity<?> refreshToken(HttpServletRequest request, HttpServletResponse response) {
		Map<String, String> newTokenMap = us.refreshToken(request, response);
		if (newTokenMap == null) {
			return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(new ErrorResponse("리프레시 토큰 오류"));
		}
		TokenResponse tokenResponse = TokenResponse.builder().accessToken(newTokenMap.get("accessToken")).build();
		return ResponseEntity.ok(tokenResponse);
	}
	
	@GetMapping("/oauth/{company}")
	public ResponseEntity<?> google(@RequestParam("code") final String code, @PathVariable("company") final String company, HttpServletResponse response) {
		Map<String, String> tokenMap = us.oAuthLogin(code, company, response);
		if (tokenMap == null) {
			return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(new ErrorResponse("로그인 오류"));
		}
		TokenResponse tokenResponse = TokenResponse.builder().accessToken(tokenMap.get("accessToken")).build();
		return ResponseEntity.ok(tokenResponse);
	}
}
Java
복사

◦

ProductController

package com.kosta.controller;

import java.util.List;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PatchMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.kosta.domain.request.ProductAdd;
import com.kosta.domain.request.ProductEdit;
import com.kosta.domain.response.ErrorResponse;
import com.kosta.domain.response.ProductResponse;
import com.kosta.service.ProductService;

import lombok.RequiredArgsConstructor;

@RestController
@RequestMapping("/api/product")
@RequiredArgsConstructor
public class ProductController {
	private final ProductService ps;
	
	// 상품 등록 -> /api/product [POST] ★관리자만
	// Request {name, price}
	// Response 201 {id, name, price} or 401 or 403
	@PostMapping("")
	public ResponseEntity<?> addProduct(@RequestBody ProductAdd productAdd) {
		try {			
			ProductResponse productReponse = ps.addProduct(productAdd);
			return ResponseEntity.status(HttpStatus.CREATED).body(productReponse);
		} catch (Exception e) {
			return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ErrorResponse("상품 등록 실패"));
		}
	}
	
	// 상품 수정 -> /api/product [PATCH] ★관리자만
	// Request {id, name, price}
	// Response 200 {id, name, price} or 401 or 403
	@PatchMapping("")
	public ResponseEntity<?> updateProduct(@RequestBody ProductEdit productEdit) {
		try {
			ProductResponse productReponse = ps.updateProduct(productEdit);
			return ResponseEntity.ok().body(productReponse);			
		} catch (Exception e) {
			return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ErrorResponse("상품 수정 실패"));
		}
	}
	
	// 상품 삭제 -> /api/product?id=~ [DELETE] ★관리자만
	// RequestParam {id}
	// Response 200 {id, name, price} or 401 or 403
	@DeleteMapping("")
	public ResponseEntity<?> deleteProduct(@RequestParam("id") Long id) {
		try {
			ProductResponse productReponse = ps.deleteProduct(id);
			return ResponseEntity.ok().body(productReponse);			
		} catch (Exception e) {
			return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ErrorResponse("상품 삭제 실패"));
		}
	}
	
	@GetMapping("")
	public ResponseEntity<?> getProduct(@RequestParam(name = "id", required = false) Long id) {
		try {
			if (id == null) {
				//	상품 전체 목록 -> /api/product [GET] ☆로그인해야만	
				// Response 200 List<id, name, price> or 401 or 403
				List<ProductResponse> allProducts = ps.getAllProducts();
				return ResponseEntity.ok().body(allProducts);		
			}
			//	상품 디테일 -> /api/product?id=~ [GET] ☆로그인해야만	RequestParam {id}			Response 200 {id, name, price} or 401 or 403
			ProductResponse productReponse = ps.getProductById(id);
			return ResponseEntity.ok().body(productReponse);
		} catch (Exception e) {
			return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ErrorResponse("상품 조회 실패"));
		}
	}
}
Java
복사

•

domain

◦

request

▪

JoinUser

package com.kosta.domain.request;

import lombok.Getter;

@Getter
public class JoinUser {
	private String name, email, password;
}
Java
복사

▪

LoginUser

package com.kosta.domain.request;

import lombok.Getter;

@Getter
public class LoginUser {
	private String email, password;
}
Java
복사

▪

ProductAdd

package com.kosta.domain.request;

import lombok.Getter;

@Getter
public class ProductAdd {
	private String name;
	private int price;
}
Java
복사

▪

ProductEdit

package com.kosta.domain.request;

import lombok.Getter;

@Getter
public class ProductEdit {
	private Long id;
	private String name;
	private int price;
}
Java
복사

◦

response

▪

ErrorResponse

package com.kosta.domain.response;

import lombok.AllArgsConstructor;
import lombok.Getter;

@Getter
@AllArgsConstructor
public class ErrorResponse {
	private String msg; 
}
Java
복사

▪

ProductResponse

package com.kosta.domain.response;

import lombok.Builder;
import lombok.Getter;

@Getter
@Builder
public class ProductResponse {
	private Long id;
	private String name;
	private int price;
}
Java
복사

▪

TokenResponse

package com.kosta.domain.response;

import lombok.Builder;
import lombok.Getter;

@Getter
@Builder
public class TokenResponse {
	private String accessToken;
}
Java
복사

•

entity

◦

Product

package com.kosta.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Entity
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class Product {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Column(updatable = false)
	private Long id;
	
	@Column(nullable = false)
	private String name;
	
	@Column(nullable = false)
	private int price;
}
Java
복사

◦

User

package com.kosta.entity;

import java.util.Collection;
import java.util.List;
import java.util.Map;

import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.oauth2.core.user.OAuth2User;

import com.kosta.domain.RoleEnum;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.EnumType;
import jakarta.persistence.Enumerated;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Entity
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class User implements UserDetails {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	@Column(updatable = false)
	private Long id;
	
	@Column(nullable = false, unique = true)
	private String email;
	
	@Column(nullable = false)
	private String name;
	
	@Column(nullable = true)
	private String password;

	@Column(nullable = false)
	private boolean oAuth = false;
	
	@Column(nullable = false)
	@Enumerated(EnumType.STRING)
	@Builder.Default
	private RoleEnum role = RoleEnum.ROLE_USER; // 권한 컬럼 추가 (기본값 ROLE_USER)

	@Column(name="refresh_token", nullable = true)
	private String refreshToken;
	
	@Override
	public Collection<? extends GrantedAuthority> getAuthorities() {
		// 권한 목록 반환
		return List.of(new SimpleGrantedAuthority(role.name()));
	}

	@Override
	public String getUsername() {
		// 로그인할 사용자 명을 이메일로 대체
		return email;
	}
}
Java
복사

•

repository

◦

ProductRepository

package com.kosta.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.kosta.entity.Product;

@Repository
public interface ProductRepository extends JpaRepository<Product, Long>{

}
Java
복사

◦

UserRepository

package com.kosta.repository;

import java.util.Optional;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.kosta.entity.User;

@Repository
public interface UserRepository extends JpaRepository<User, Long>{

	Optional<User> findByEmail(String email);

	boolean existsByEmail(String email);

}
Java
복사

•

security

◦

JwtAuthenticationFilter

package com.kosta.security;

import java.io.IOException;

import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.filter.OncePerRequestFilter;

import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@RequiredArgsConstructor
public class JwtAuthenticationFilter extends OncePerRequestFilter {

	private final JwtProvider jwtProvider;
	private final static String HEADER_AUTHORIZATION = "Authorization";
	private final static String TOKEN_PREFIX = "Bearer ";
	
	// HTTP 요청이 들어올 때마다 실행되는 필터
	@Override
	protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
			throws ServletException, IOException {
		String header = request.getHeader(HEADER_AUTHORIZATION);
		String token = getAccessToken(header);
		if (token != null && jwtProvider.validateToken(token)) {
			// 유효한 토큰인 경우
			Authentication authentication = jwtProvider.getAuthenticationByToken(token);
			SecurityContextHolder.getContext().setAuthentication(authentication);
		}
		// 그 다음 요청 처리 체인을 이어서 진행
		filterChain.doFilter(request, response);
	}
	
	private String getAccessToken(String header) {
		log.info("[getAccessToken] 토큰 값 추출, {}", header);
		if (header != null && header.startsWith(TOKEN_PREFIX)) {
			return header.substring(TOKEN_PREFIX.length());
		}
		return null;
	}
}
Java
복사

◦

JwtAuthenticationService

package com.kosta.security;

import java.io.IOException;
import java.util.Map;

import org.springframework.security.core.Authentication;
import org.springframework.stereotype.Service;

import com.kosta.domain.response.TokenResponse;
import com.kosta.entity.User;
import com.kosta.repository.UserRepository;
import com.kosta.util.TokenUtils;

import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor
public class JwtAuthenticationService {
	private final TokenUtils tokenUtils;
	private final UserRepository userRepository;
	
	void successAuthentication(HttpServletResponse response, Authentication authResult) throws IOException {
		User user = (User) authResult.getPrincipal();	
		Map<String, String> tokenMap = tokenUtils.generateToken(user);
		String accessToken = tokenMap.get("accessToken");
		String refreshToken = tokenMap.get("refreshToken");

		// 리프레시 토큰을 DB에 저장!
		user.setRefreshToken(refreshToken);
		userRepository.save(user);
		
		// 생성된 리프레시 토큰을 cookie에 담아 응답
		tokenUtils.setRefreshTokenCookie(response, refreshToken);
		
		// 생성된 액세스 토큰을 LoginResponse에 담아 응답
		TokenResponse loginResponse = TokenResponse.builder().accessToken(accessToken).build();
		tokenUtils.writeResponse(response, loginResponse);
	}
}
Java
복사

◦

JwtProperties

package com.kosta.security;

import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
@Component
@ConfigurationProperties("jwt") // application.yml에 설정한 jwt.issuer, jwt.secret_key,...이 매핑된다.
public class JwtProperties {
	private String issuer;
	private String secretKey;
	private int accessDuration;
	private int refreshDuration;
}
Java
복사

◦

JwtProvider

package com.kosta.security;

import java.util.Date;

import javax.crypto.SecretKey;

import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.stereotype.Service;

import com.kosta.entity.User;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.security.Keys;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Service
@RequiredArgsConstructor
public class JwtProvider {
	private final UserDetailsService userDetailsService;
	// JWT 관련 설정 정보 객체 주입
	private final JwtProperties jwtProperties;
	
	// JWT Access 토큰 생성 메소드
	public String generateAccessToken(User user) {
		log.info("[generateAccessToken] 액세스 토큰을 생성합니다.");
		Date now = new Date();
		Date expiredDate = new Date(now.getTime() + jwtProperties.getAccessDuration());
		return makeToken(user, expiredDate);
	}
	
	// JWT Refresh 토큰 생성 메소드
	public String generateRefreshToken(User user) {
		log.info("[generateRefreshToken] 리프레시 토큰을 생성합니다.");
		Date now = new Date();
		Date expiredDate = new Date(now.getTime() + jwtProperties.getRefreshDuration());
		return makeToken(user, expiredDate);
	}
	
	// 토큰 생성 공통 메소드 (실제로 JWT 토큰 생성)
	private String makeToken(User user, Date expiredDate) {
		String token = Jwts.builder()
			.header().add("typ", "JWT") // JWT 타입을 명시
			.and()
			.issuer(jwtProperties.getIssuer()) // 발행자 정보 설정
			.issuedAt(new Date()) // 발행일시 설정
			.expiration(expiredDate) // 만료 시간 설정
			.subject(user.getEmail()) // 토큰의 주제(Subject) 설정 _ 사용자 이메일
			.claim("id", user.getId())
			.claim("role", user.getRole().name())
			.signWith(getSecretKey(), Jwts.SIG.HS256) // 비밀키와 해시 알고리즘 사용하여 토큰 설명값 설정
			.compact(); // 토큰 정보들을 최종적으로 압축해서 문자열로 반환
		log.info("[makeToken] 완성된 토큰 : {}", token);
		return token;
	}	
	
	// 비밀키 만드는 메소드
	private SecretKey getSecretKey() {
		return Keys.hmacShaKeyFor(jwtProperties.getSecretKey().getBytes());
	}
	
	// 토큰이 유효한지 검증 메소드
	public boolean validateToken(String token) {
		log.info("[validateToken] 토큰 검증을 시작합니다.");
		try {
			Jwts.parser()
				.verifyWith(getSecretKey()) // 비밀키로 서명 검증
				.build()
				.parseSignedClaims(token); // 서명된 클레임을 파싱..
			log.info("토큰 검증 통과");
			return true;
		} catch (Exception e) {
			e.printStackTrace();
		}
		log.info("토큰 검증 실패");
		return false;
	}
	
	// 토큰에서 정보(Claim) 추출 메소드
	private Claims getClaims(String token) {
		return Jwts.parser()
			.verifyWith(getSecretKey()) // 비밀키로 서명 검증
			.build()
			.parseSignedClaims(token) // 서명된 클레임을 파싱..
			.getPayload(); // 파싱된 클레임에서 페이로드(실제 클레임)를 반환
	}
	
	// 토큰에서 인증 정보 반환하는 메소드
	public Authentication getAuthenticationByToken(String token) {
		log.info("[getAuthenticationByToken] 토큰 인증 정보 조회");
		String userEmail = getUserEmailByToken(token);
		User user = (User) userDetailsService.loadUserByUsername(userEmail);
		Authentication authentication = new UsernamePasswordAuthenticationToken(
			user, token, user.getAuthorities()
		);
		return authentication;
	}
	
	// 토큰에서 사용자 이메일만 추출하는 메소드
	public String getUserEmailByToken(String token) {
		log.info("[getUserEmailByToken] 토큰 기반 회원 식별 정보 추출");
		Claims claims = getClaims(token);
		String email = claims.get("sub", String.class);
		return email;
	}

}
Java
복사

◦

LoginCustomAuthenticationFilter

package com.kosta.security;

import java.io.IOException;

import org.springframework.http.HttpStatus;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.AuthenticationException;
import org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.kosta.domain.request.LoginUser;

import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.extern.slf4j.Slf4j;

@Slf4j
public class LoginCustomAuthenticationFilter extends AbstractAuthenticationProcessingFilter {
	private JwtAuthenticationService jwtAuthenticationService;
	
	// 로그인되는 경로 및 메소드 타입 지정
	private static final AntPathRequestMatcher LOGIN_PATH = new AntPathRequestMatcher("/api/login", "POST");

	public LoginCustomAuthenticationFilter(AuthenticationManager authenticationManager, JwtAuthenticationService jwtAuthenticationService) {
		super(LOGIN_PATH);
		setAuthenticationManager(authenticationManager);
		this.jwtAuthenticationService = jwtAuthenticationService;
	}
	
	@Override
	public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response)
			throws AuthenticationException, IOException, ServletException {
		// POST, /api/login 에 요청이 들어오면 진행
		LoginUser loginUser= null;
		// 1. Body에 있는 로그인 정보 ({"email": "~~", "password: "~~" } 를 가져오기
		try {
			log.info("[attemptAuthentication] 로그인 정보 가져오기");
			ObjectMapper objectMapper = new ObjectMapper();
			loginUser = objectMapper.readValue(request.getInputStream(), LoginUser.class);
		} catch (IOException e) {
			throw new RuntimeException("로그인 요청 파라미터 이름 확인 필요 (로그인 불가)");
		}
		
		// 2. email과 password를 기반으로 AuthenticationToken 생성!
		log.info("[attemptAuthentication] AuthenticationToken 생성");
		UsernamePasswordAuthenticationToken uPAT = 
				new UsernamePasswordAuthenticationToken(loginUser.getEmail(), loginUser.getPassword());
		
		// 3. 인증 시작 (AuthenticationManager의 authenticate 메소드가 동작할 때 -> loadUserByUsername)
		log.info("[attemptAuthentication] 인증 시작");
		Authentication authenticate = getAuthenticationManager().authenticate(uPAT);
		return authenticate;
	}

	@Override
	protected void successfulAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain chain,
			Authentication authResult) throws IOException, ServletException {
		log.info("[successfulAuthentication] 로그인 성공 -> 토큰 생성 시작");
		jwtAuthenticationService.successAuthentication(response, authResult);
	}

	@Override
	protected void unsuccessfulAuthentication(HttpServletRequest request, HttpServletResponse response,
			AuthenticationException failed) throws IOException, ServletException {
		log.info("[unsuccessfulAuthentication] 로그인 실패");
		response.setStatus(HttpStatus.UNAUTHORIZED.value());
	}
}
Java
복사

•

service

◦

ProductService

package com.kosta.service;

import java.util.List;

import com.kosta.domain.request.ProductAdd;
import com.kosta.domain.request.ProductEdit;
import com.kosta.domain.response.ProductResponse;

public interface ProductService {

	ProductResponse addProduct(ProductAdd productAdd) throws Exception;

	ProductResponse updateProduct(ProductEdit productEdit) throws Exception;

	ProductResponse deleteProduct(Long id) throws Exception;

	List<ProductResponse> getAllProducts() throws Exception;

	ProductResponse getProductById(Long id) throws Exception;

}
Java
복사

◦

UserService

package com.kosta.service;

import java.util.Map;

import org.springframework.http.ResponseEntity;

import com.fasterxml.jackson.databind.JsonNode;
import com.kosta.domain.request.JoinUser;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public interface UserService {

	boolean checkEmailExists(String email);

	void registerUser(JoinUser joinUser) throws Exception;

	Map<String, String> refreshToken(HttpServletRequest request, HttpServletResponse response);

	Map<String, String> oAuthLogin(String code, String company, HttpServletResponse response);
}
Java
복사

◦

Impl

▪

ProductServiceImpl

package com.kosta.service.impl;

import java.util.List;

import org.springframework.stereotype.Service;

import com.kosta.domain.request.ProductAdd;
import com.kosta.domain.request.ProductEdit;
import com.kosta.domain.response.ProductResponse;
import com.kosta.entity.Product;
import com.kosta.repository.ProductRepository;
import com.kosta.service.ProductService;

import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor
public class ProductServiceImpl implements ProductService {
	private final ProductRepository pr;
	
	@Override
	public ProductResponse addProduct(ProductAdd productAdd) throws Exception {
		Product product = Product.builder()
				.name(productAdd.getName())
				.price(productAdd.getPrice())
				.build();
		Product savedProduct = pr.save(product);
		
		return ProductResponse.builder()
				.id(savedProduct.getId())
				.name(savedProduct.getName())
				.price(savedProduct.getPrice())
				.build();
	}

	@Override
	public ProductResponse updateProduct(ProductEdit productEdit) throws Exception {
		Product product = pr.findById(productEdit.getId()).orElseThrow(() -> new Exception());
		if (!product.getName().equals(productEdit.getName()))
			product.setName(productEdit.getName());
		if (product.getPrice() != (productEdit.getPrice()))
			product.setPrice(productEdit.getPrice());
		
		Product updatedProduct = pr.save(product);
		return ProductResponse.builder()
				.id(updatedProduct.getId())
				.name(updatedProduct.getName())
				.price(updatedProduct.getPrice())
				.build();
	}

	@Override
	public ProductResponse deleteProduct(Long id) throws Exception {
		Product product = pr.findById(id).orElseThrow(() -> new Exception());
		pr.delete(product);
		return ProductResponse.builder()
				.id(product.getId())
				.name(product.getName())
				.price(product.getPrice())
				.build();
	}

	@Override
	public List<ProductResponse> getAllProducts() throws Exception {
		return pr.findAll().stream().map(
				product -> ProductResponse.builder()
					.id(product.getId())
					.name(product.getName())
					.price(product.getPrice())
					.build()
				).toList();
	}

	@Override
	public ProductResponse getProductById(Long id) throws Exception {
		Product product = pr.findById(id).orElseThrow(() -> new Exception());
		return ProductResponse.builder()
				.id(product.getId())
				.name(product.getName())
				.price(product.getPrice())
				.build();
	}

}
Java
복사

▪

UserDetailsServiceImpl

package com.kosta.service.impl;

import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;

import com.kosta.entity.User;
import com.kosta.repository.UserRepository;

import lombok.RequiredArgsConstructor;

@Service
@RequiredArgsConstructor
public class UserDetailsServiceImpl implements UserDetailsService {
	private final UserRepository ur;
	
	@Override
	public User loadUserByUsername(String email) throws UsernameNotFoundException {
		User user = ur.findByEmail(email).orElse(null);
		return user;
	}

}
Java
복사

▪

UserServiceImpl

package com.kosta.service.impl;

import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;
import java.util.Map;
import java.util.Optional;

import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.server.ResponseStatusException;

import com.fasterxml.jackson.databind.JsonNode;
import com.kosta.domain.request.JoinUser;
import com.kosta.entity.User;
import com.kosta.repository.UserRepository;
import com.kosta.security.JwtProvider;
import com.kosta.service.UserService;
import com.kosta.util.TokenUtils;

import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;

@Slf4j
@Service
@RequiredArgsConstructor
public class UserServiceImpl implements UserService {
	private final UserRepository ur;
	private final BCryptPasswordEncoder bCryptPasswordEncoder;
	private final TokenUtils tokenUtils;
	private final JwtProvider jwtProvider;
	
	@Override
	public boolean checkEmailExists(String email) {
		return ur.existsByEmail(email);
	}

	@Override
	public void registerUser(JoinUser joinUser) throws Exception {
		String encodedPassword = bCryptPasswordEncoder.encode(joinUser.getPassword());
		User user = User.builder()
			.name(joinUser.getName())
			.email(joinUser.getEmail())
			.password(encodedPassword)
			.build();
		ur.save(user);
	}

	@Override
	public Map<String, String> refreshToken(HttpServletRequest request, HttpServletResponse response) {
		String refreshToken = extractRefreshTokenFromCookie(request);
		if (refreshToken != null && jwtProvider.validateToken(refreshToken)) {
			String userEmail = jwtProvider.getUserEmailByToken(refreshToken);
			User user = ur.findByEmail(userEmail).orElse(null);
			if (user != null && user.getRefreshToken().equals(refreshToken)) {
				Map<String, String> tokenMap = tokenUtils.generateToken(user);
				user.setRefreshToken(tokenMap.get("refreshToken"));
				ur.save(user);
				tokenUtils.setRefreshTokenCookie(response, tokenMap.get("refreshToken"));
				return tokenMap;
			}
		}
		return null;
	}
	
	private String extractRefreshTokenFromCookie(HttpServletRequest req) {
		Cookie[] cookies = req.getCookies();
		if (cookies != null) {
			for (Cookie c: cookies) {
				if (c.getName().equals("refreshToken")) {
					return c.getValue();
				}
			}
		}
		return null;
	}

	@Override
	public Map<String, String> oAuthLogin(String code, String company, HttpServletResponse response) {
		// 클라이언트부터 가져온 정보를 통해 해당 SNS 회사에 accessToken 요청 
		String accessToken = getAccessToken(code, company);
		
		// accsssToken 정보를 통해 사용자 정보 생성
		User user = generateOAuthUser(accessToken);
		
		// 사용자 로그인 진행
		Map<String, String> tokenMap = tokenUtils.generateToken(user);
		user.setRefreshToken(tokenMap.get("refreshToken"));
		ur.save(user);
		tokenUtils.setRefreshTokenCookie(response, tokenMap.get("refreshToken"));
		return tokenMap;
	}
	
	private String getAccessToken(String code, String company) {
		// 코드 변환
		String decodedCode = URLDecoder.decode(code, StandardCharsets.UTF_8);
        
		// 헤더 설정
		HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);        
        String clientId = "1059700581094-jkoubuj3925vsp7fs5g2qncs8d7norem.apps.googleusercontent.com";
        String clientSecret = "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";
        headers.setBasicAuth(clientId, clientSecret);
        
        MultiValueMap<String, String> parameterMap = new LinkedMultiValueMap<>();
        parameterMap.add("code", decodedCode);
        parameterMap.add("grant_type", "authorization_code");
        parameterMap.add("redirect_uri", "http://localhost:3000/oauth");
        
        HttpEntity<MultiValueMap<String, String>> requestEntity = new HttpEntity<>(parameterMap, headers);
        
        // https://oauth2.googleapis.com/token
        RestTemplate restTemplate = new RestTemplate();
        
        ResponseEntity<Map> response = restTemplate.postForEntity("https://oauth2.googleapis.com/token", requestEntity, Map.class);
        String accessToken = (String) response.getBody().get("access_token");
        return accessToken;
	}
	
	private User generateOAuthUser(String accessToken) {
		String GOOGLE_USERINFO_REQUEST_URL = "https://www.googleapis.com/oauth2/v3/userinfo";
        HttpHeaders headers = new HttpHeaders();
        headers.set("Authorization", "Bearer " + accessToken);
        HttpEntity<?> entity = new HttpEntity<>(headers);
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity<JsonNode> response = restTemplate.exchange(
                GOOGLE_USERINFO_REQUEST_URL,
                HttpMethod.GET,
                entity,
                JsonNode.class
        );
        if (response.getStatusCode().is2xxSuccessful()) {
            JsonNode responseBody = response.getBody();
            log.info("SNS 로그인 계정 정보 : {}", responseBody);
            if (responseBody == null) {
                throw new ResponseStatusException(HttpStatus.NOT_FOUND, "Response body is null");
            }
            if (responseBody.has("email") && responseBody.has("name")) {
            	String email = responseBody.get("email").asText();
            	String name = responseBody.get("name").asText();
            	
                Optional<User> optUser = ur.findByEmail(email);
                User user = null;
                if (optUser.isEmpty()) {
                	log.info("없는 사용자 -> 새로 가입합니다");
                	// 가입 처리
    				user = User.builder()
    					.email(email)
    					.name(name)
    					.oAuth(true)
    					.build();
    				ur.save(user);
                } else {
                	user = optUser.get();
                	if (!user.isOAuth()) {
                		user.setOAuth(true);
                		ur.save(user);
                	}
                }
                return user;
            }
        }
        throw new RuntimeException("SNS 로그인 에러");
	}
}
Java
복사

•

util

◦

TokenUtils

package com.kosta.util;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Component;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.kosta.domain.response.TokenResponse;
import com.kosta.entity.User;
import com.kosta.security.JwtProperties;
import com.kosta.security.JwtProvider;

import jakarta.servlet.http.Cookie;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;

@Component
@RequiredArgsConstructor
public class TokenUtils {
	private final JwtProvider jwtProvider;
	private final JwtProperties jwtProperties;
	
	// 토큰 생성
	public Map<String, String> generateToken(User user) {
		String accessToken = jwtProvider.generateAccessToken(user);
		String refreshToken = jwtProvider.generateRefreshToken(user);
		
		Map<String, String> tokenMap = new HashMap<String, String>();
		tokenMap.put("accessToken", accessToken);
		tokenMap.put("refreshToken", refreshToken);		
		return tokenMap;
	}
	
	// JSON 응답 전송
	public void writeResponse(HttpServletResponse response, TokenResponse loginResponse) throws IOException {		
		ObjectMapper objectMapper = new ObjectMapper();
		String jsonResponse = objectMapper.writeValueAsString(loginResponse);
		
		response.setContentType("application/json");
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write(jsonResponse);
	}

	public void setRefreshTokenCookie(HttpServletResponse response, String refreshToken) {
		System.out.println(jwtProperties.getRefreshDuration());
		Cookie refreshTokenCookie = new Cookie("refreshToken", refreshToken);
		refreshTokenCookie.setHttpOnly(true); // JavaScript에서 변경 불가
		refreshTokenCookie.setSecure(false); // HTTPS가 아니여도 사용 가능! (지금은)
		refreshTokenCookie.setPath("/");
		refreshTokenCookie.setMaxAge(jwtProperties.getRefreshDuration() / 1000); // Token 유효기간 1일
		response.addCookie(refreshTokenCookie);
	}
}
Java
복사

React

•

패키지 설치

2024. 9. 13 (JWT 실습)

REST TEMPLATE

•

Spring Framework 에서 HTTP 요청을 보내는 클래스

◦

GET, POST, PUT, PATCH, DELETE 모두 호출 가능

◦

JSON, XML 등의 데이터로 받아올 수 있음

•

해당 페이지 접속

◦

https://jsonplaceholder.typicode.com/posts 

◦

https://jsonplaceholder.typicode.com/posts/2

// 20240919091348
// https://jsonplaceholder.typicode.com/posts/2
// https://jsonplaceholder.typicode.com/posts?userId=2

{
  "userId": 1,
  "id": 2,
  "title": "qui est esse",
  "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}
JSON
복사

◦

https://jsonplaceholder.typicode.com/posts?userId=2

// 20240919091522
// https://jsonplaceholder.typicode.com/posts?userId=2

[
  {
    "userId": 2,
    "id": 11,
    "title": "et ea vero quia laudantium autem",
    "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
  },
  {
    "userId": 2,
    "id": 12,
    "title": "in quibusdam tempore odit est dolorem",
    "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
  },
  {
    "userId": 2,
    "id": 13,
    "title": "dolorum ut in voluptas mollitia et saepe quo animi",
    "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
  },
  {
    "userId": 2,
    "id": 14,
    "title": "voluptatem eligendi optio",
    "body": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
  },
  {
    "userId": 2,
    "id": 15,
    "title": "eveniet quod temporibus",
    "body": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
  },
  {
    "userId": 2,
    "id": 16,
    "title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
    "body": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
  },
  {
    "userId": 2,
    "id": 17,
    "title": "fugit voluptas sed molestias voluptatem provident",
    "body": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
  },
  {
    "userId": 2,
    "id": 18,
    "title": "voluptate et itaque vero tempora molestiae",
    "body": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
  },
  {
    "userId": 2,
    "id": 19,
    "title": "adipisci placeat illum aut reiciendis qui",
    "body": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
  },
  {
    "userId": 2,
    "id": 20,
    "title": "doloribus ad provident suscipit at",
    "body": "qui consequuntur ducimus possimus quisquam amet similique\nsuscipit porro ipsam amet\neos veritatis officiis exercitationem vel fugit aut necessitatibus totam\nomnis rerum consequatur expedita quidem cumque explicabo"
  }
]
JSON
복사

•

Spring 5.0 → WebClient 를 사용할 것을 권장

◦

but rest_template으로 진행

•

방식

◦

GET 방식

▪

getForEntity: Get 요청 후, 응답을 ResponseEntity로 반환

▪

getForObject: Get 요청 후, 응답을 원하는 객체로 반환

◦

POST 방식

▪

postForEntity: Post 요청 후, 응다븡ㄹ ResponseEntity로 반환

▪

postForObject: Post 요청 후, 응답을 원하는 객체로 반환

◦

Put, Patch, Delete…

•

rest template 실습 

oAuth (Google Login 기준)

2024. 9. 19 (REST TEMPLATE, OAuth)

소셜 로그인 구현 프로젝트 - 기존 미니 이커머스 프로젝트 파일에서 진행

SpringBoot

•

oAuth 계정 생성

React

•

OAuthLogin.jsx

•

oauthAPI.js

•

LoginPage.jsx

2024. 9. 20 (oAuth 실습)

컨테이너

•

컨테이너는 개별 소프트웨어가 실행되기 위한 환경을 독립적으로 운용할 수 있도록 해주는 운영체제 수준의 격리 기술을 의미한다.
(소프트웨어가 독립적으로 실행될 수 있게 해줌)

•

컨테이너는 기본적으로 리눅스 커널의 기능을 바탕으로 만들어졌다.

•

Windows 기반에서 컨테이너를 동작시키려면 Hypervisor를 활성화시켜, 리눅스 커널의 기능을 지원할 수 있어야 한다.

Ubuntu

2024. 9. 24 (Docker)

Dockerfile 생성

Nginx.conf 생성

docker 액세스 토큰 만들기

react 빌드하기 위한 명령어 실행

JPA 프로젝트 실행

2024. 9. 25 (Docker, CI/CD)

front(폴더)

nginx.conf 생성

Dockerfile 생성

VM에서 git pull 이후에 docker run

•

로그 찍어보기 + 경로 확인

2024. 9. 26 (Docker, CI/CD)

Docker 실습 (rest_product 프로젝트 배포)

기존에 설치되어 있는 Docker Container, Docker image 삭제

Front

•

Dockerfile

•

docker-compose.yml

Back

•

Dockerfile

2024. 9. 27 (Docker, CI/CD)

Github Action 실습 (복습)

•

구조도

•

Github Actions

◦

Github에서 제공하는 CI/CD 도구

◦

Repository에서 어떤 이벤트가 발생하면, 특정 작업이 수행되도록 함

2024. 9. 30 (Github Action)

EC2 연결 (기본 설정 완료 되었다고 가정)

•

해당 경로에 pem 파일이 있어야 하며 권한을 400으로 해줘야 정상 연결 됨

◦

Visual Studio Code의 터미널에서 진행 가능

Docker 설치

2024. 9. 30 Docker-Github Action 실습 복기