이전까지 회원가입 및 로그인을 구현하였고, 로그인 성공 시 JWT 토큰까지 발급하였다. 이제부터는 JWT 토큰을 가지고 서버에서는 사용자의 요청에 대한 권한 확인을 하게 될 텐데, 그 기능을 JWT 필터를 통해서 구현해본다. 1. UserDetails, UserDetailsService 생성 - Spring security에서 사용하는 인증 객체인 Authentication을 사용하기 위하여 UserDeatils와 UserDetails 서비스를 생성해야한다. @Data public class CustomUserDetails implements UserDetails { private User user; @Builder public CustomUserDetails(User user) { this.user =..

1. SignIn.js 작성 const SignIn = () => { const signin = [ {name: 'email', type: 'text', placeholder: '이메일'}, {name: 'password', type: 'password', placeholder: '비밀번호'} ] const [inputs, setInputs] = useState({ email: '', password: '' }) const onChange = (e) => { const {value, name} = e.target; setInputs({ ...inputs, [name]: value }); }; const navigate = useNavigate(); const onSubmit = () => { authAx..

로그인은 Email과 password를 받아와 검증 후, JWT Access Token을 발행하는 로직으로 진행한다. 1. LoginRequestDto, LoginResponseDto 작성 @Data public class LoginRequestDto { @NotBlank(message = "빈 항목이 존재합니다.") @Email(message = "이메일 양식이 올바르지 않습니다.") private String email; @NotBlank(message = "빈 항목이 존재합니다.") private String password; @Builder public LoginRequestDto(String email, String password) { this.email = email; this.passwor..

React 프로젝트의 폴더구조는 다음과 같다. public src --components --pages 1. components : 작성한 JS 모듈들을 모은 폴더이다. 2. pages : React 컴포넌트들을 모은 폴더이다. 1. 필요 모듈 설치 npm i react-router-dom axios - 컴포넌트 전환에 필요한 react-router-dom, 그리고 ajax 대신 HTTP 요청을 도와줄 axios 모듈을 설치한다. 2. App.js 설정 import {BrowserRouter as Router, Route, Routes} from "react-router-dom"; const App = () => { return ( ); } export default App; - BrpwerRouter ..

가장 먼저 회원가입을 구현하였다. 먼저 Spring Boot의 폴더 구조는 다음과 같다. java.com.woo.outstagram -- config -- controller -- dto -- entity -- repository -- service -- util 1. config : Web관련 설정이나, Spring Security 설정 등을 정의할 패키지이다. 2. controller : 요청 URL에 해당하는 처리를 담당하는 Controller 들을 정의할 패키지이다. 3. dto : 클래스들 사이에서 데이터 전달을 담당하는 DTO 객체들을 정의할 패키지이다. 4. entity : 데이터베이스에 저장될 필드와 여러 연관관계를 정의할 패키지이다. 5. repository : JPA를 사용하기 위한 R..

취업 포트폴리오 작성을 위해 인스타그램을 클론코딩하려고 한다.사용할 기술 스택은 다음과 같다. BackEnd : Spring BootDataBase : MySqlFrontEnd : React 스프링부트에서 제공하는 View(Musatache, Thymeleaf) 등을 사용하지 않고, 백엔드와 프론트앤드로 분리하여 따로 서비스 해보려 한다. - 깃허브주소https://github.com/maewakka/outstagram