Spring Security를 이용해 회원 관리나 로그인 기능을 구현할 때, 비밀번호를 평문(plain text)으로 저장하면 보안상 매우 취약합니다. 이번 글에서는 Spring Security에서 제공하는 BCryptPasswordEncoder를 사용하여 안전하게 비밀번호를 암호화하는 방법을 소개하겠습니다. 1. BCryptPasswordEncoder란?BCryptPasswordEncoder는 Spring Security에서 제공하는 비밀번호 암호화 도구로, 단방향 해싱(hashing)을 수행합니다. 한번 암호화된 비밀번호는 복호화가 불가능하며, 로그인 시에는 입력된 비밀번호를 다시 암호화하여 데이터베이스에 저장된 암호화된 비밀번호와 비교하여 인증합니다.주요 특징:단방향 암호화 방식안전한 salt 자..
JWT(JSON Web Token)은 당사자 간에 정보를 JSON 형태로 안전하게 전송하기 위한 토큰 JWT는 URL로 이용할 수 있는 문자열로만 구성되어 있으며, 디지털 서명이 적용되어 있어 신뢰할 수 있음. JWT는 주로 서버와의 통신에서 권한 인가를 위해 사용된다. URL에서 사용할 수 있는 문자열로만 구성되어 있기 때문에 HTTP 구성요소 어디든 위치할 수 있다. JWT의 구조 JWT는 점('.')으로 구분된 아래의 세 부분으로 구성되어있다. 헤더(Header) 내용(Payload) 서명(Signature) 따라서 JWT는 일반적으로 아래와 같은 형식을 띠고 있다. 헤더 JWT의 헤더는 검증과 관련한 내용을 담고 있다. 헤더에는 두 가지 정보를 포함하고 있는데, 바로 alg와 typ 속성이다. {..
애플리케이션의 인증, 인가 등의 보안기능을 제공하는 스프링 하위 프로젝트 중 하나. 스프링 시큐리티의 동작구조 스프링 시큐리티는 서블릿 필터(Servlet Filter)를 기반으로 동작, DispatcherServlet 앞에 필터가 배치되어 있음 위 그림의 필터체인은 서블릿 컨테이너에서 관리하는 ApplicationFilterChain을 의미한다. 클라이언트에서 애플리케이션으로 요청을 보내면 서블릿 컨테이너는 URI를 확인해서 필터와 서블릿을 매핑한다. 스프링 시큐리티는 사용하고자 하는 필터체인을 서블릿 컨테이너의 필터 사이에서 동작하기위해 DelegatingFilterProxy를 사용 DelegatingFilterProxy는 서블릿 컨테이너의 생명주기와 스프링 애플리케이션 컨텍스트(Application..
https://devjunyeok.tistory.com/193 답변형 게시판 구현 (2) https://devjunyeok.tistory.com/192 답변형 게시판 만들기 (1) 네이버 카페 등의 게시판을 주로 보면 질문에 대한 답글이 게시되어 있는 기능을 종종 볼 수 있습니다. 이번에는 답글을 달 수 있는 게시판을 devjunyeok.tistory.com 📝 실행결과 지난 글에 이어 이번에는 게시글 생성 기능구현을 해보겠습니다. 💻 프론트 작업 게시글 추가 페이지를 만들기 위해 AddReplyBoard.tsx 페이지를 생성합니다. rfce 단축키를 이용해 함수를 생성하고, return 문 아래에 html 코드를 작성합니다. // return문 아래에 작성 {submitted ? ( You submit..
https://devjunyeok.tistory.com/192 답변형 게시판 만들기 (1) 네이버 카페 등의 게시판을 주로 보면 질문에 대한 답글이 게시되어 있는 기능을 종종 볼 수 있습니다. 이번에는 답글을 달 수 있는 게시판을 제작해 보겠습니다. 단, 간단한 예제를 위해 답글은 devjunyeok.tistory.com 지난 시간에 답변형 게시판 전체조회 기능까지 구현하였습니다. 이번에는 답글을 생성하는 기능을 구현해보겠습니다. 프론트 작업은 이미 앞에서 답변글 생성 함수 및 Service를 코딩하였으므로 백엔드 부분만 코딩하도록 하겠습니다. ReplyBoardService에 답변글 저장(수정) 함수 추가 📂 src > main > java > 프로젝트 폴더 > service > normal > Rep..
네이버 카페 등의 게시판을 주로 보면 질문에 대한 답글이 게시되어 있는 기능을 종종 볼 수 있습니다. 이번에는 답글을 달 수 있는 게시판을 제작해 보겠습니다. 단, 간단한 예제를 위해 답글은 1번만 달 수 있도록 제한하고 테이블 설계 및 코딩을 하도록 하겠습니다. 요소 기술 및 테이블 설계는 아래와 같습니다. 요소 기술 : - 프로젝트 키워드 : ReplyBoard - 프론트엔드 : 리액트 & 타입스크립트 - 벡엔드 : 스프링부트 & JPA & Oracle 18xe(Oracle Cloud 19c) 프론트 작업 1) 답변형 게시판 TYPE 정하기 IReplyBoard.ts 파일을 types 폴더에 저장합니다. export default interface IReplyBoard { bid?: any | nul..
📖 프론트엔드 작업 (1) Qna Type 지정 // IQna.ts : 타입 인터페이스 export default interface IQna { qno?: any | null, question: string, answer: string, questioner: string, answerer: string } (2) Qna 게시판 CRUD 함수 생성을 위한 QnaService 생성 // QnaService.ts : axios 공통함수 (벡엔드 CRUD 연동함수) import IQna from "../../types/basic/IQna"; import http from "../../utils/http-common"; // 전체 조회 + like 검색(paging 기능 : page(현재페이지), size(한 페..
이번에는 페이징 처리를 적용한 게시판을 만들어보겠습니다. 우선 DeptList 라는 페이지를 생성하고 변수를 정의합니다. 1) 부서 배열을 담을 변수 정의 const [dept, setDept] = useState([]); 2) 상단 검색어 값을 담을 변수 정의 const [searchDname, setSearchDname] = useState(""); 3) 공통 변수 정의 : page(현재페이지 번호), count(총 페이지 건수), pageSize(3, 6, 9 배열) const [page, setPage] = useState(1); const [count, setCount] = useState(1); const [pageSize, setPageSize] = useState(3); // 한 페이지당 ..
https://devjunyeok.tistory.com/186#3)%20%EB%B6%80%EC%84%9C(Department)%20%EA%B2%8C%EC%8B%9C%ED%8C%90%20%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0-1 front + backend 게시판 CRUD 구현 (1) 안녕하세요 ! :) front + backend 를 통합한 게시판을 생성하는 예제를 만들어보겠습니다. 📖 frontend작업 프론트 작업은 VSCode를 이용하여 프로젝트를 생성하였습니다. frontend 프로젝트는 React + typescri devjunyeok.tistory.com 지난시간에 이어 이번에는 부서 게시판 기능 중 부서 추가 페이지를 생성해보겠습니다 :) 먼저 프론트 프로젝트 작업..
안녕하세요 ! :) front + backend 를 통합한 게시판을 생성하는 예제를 만들어보겠습니다. 📖 frontend작업 프론트 작업은 VSCode를 이용하여 프로젝트를 생성하였습니다. frontend 프로젝트는 React + typescript를 이용하였습니다. 프로젝트 형태는 다음과 같습니다. src 폴더 아래에는 다음과 같은 파일들이 들어갑니다. assets(css파일, 이미지파일, javascript 파일) compoents(common(헤더, 푸터, 타이틀)) page(auth(로그인관련), 각종 메뉴 페이지들) common(공통으로 사용할 페이지 관련) service(벡엔드에 요청할 서비스 함수작성 파일) types(자바의 모델과 같은 파일) utils(백앤드 서버와 연동) 파일을 생성하였..
📖 연관관계 매핑 종류와 방향 연관관계를 맺는 두 엔티티 간에 생성할 수 있는 연관관계의 종류는 아래와 같습니다. One To One : 일 대 일(1:1) One To Many : 일 대 다(1:N) Many To One : 다 대 일(N:1) Many To Many : 다 대 다(N:M) 데이터베이스에서는 두 테이블의 연관관계를 설정하면 외래키(FK)를 통해 서로 조인해서 참조하는 구조로 생성되지만, JPA를 사용하는 객체지향 모델링에서는 엔티티 간 참조 방향을 설정할 수 있습니다. 데이터베이스와 관계를 일치시키기 위해 양방향으로 설정해도 무관하지만, 비즈니스 로직 관점에서 봤을 때는 단방향 관계만 설정해도 해결되는 경우가 많습니다. 단방향과 양방향 관계에 대해 아래에 간단하게 정리하면 다음과 같습니..
