dev-jong의 개발일지

이번에 마무리한 프로젝트에서 계정/보안 관련 업무를 담당하게 되었다. 기존에 단순한 암호화 없이 CRUD를 통해서 구현했던 로그인과 다르게 Spring Security를 통한 JWT 방식의 계정기능 구현을 하게 되었다.로그인이 인증되면, JWT 토큰을 사용자의 브라우저 Cookie에 담아주고 사용자는 다음 방문부터 DB를 거치지 않고 쿠키에 담긴 토큰을 통해서 Filter단에서 로그인처리가 완료된다. 하지만 로그인정보가 담긴 JWT 토큰을 브라우저에 쿠키/세션에 담아 놓았을 때, 생기는 공격 취약점이 상당히 많이 존재한다. 공개적으로 널리 알려진 공격 중에서 대표적으로 사용되는 공격 2가지에 대해서 해당 게시물에서 다뤄보겠다.1. XSS (Cross - Site - Scripting) XSS 공격 : ..

이전 JPA 2번 게시물에서는 N:1 (Board : Member) 에 대한 예제에 관해서 Entity 구조에 대해서만 다루었다. 이번 게시물에서는 Board / Member 테이블 사이에 있어서 Like 테이블을 추가하여 좋아요기능을 추가해보려고 한다. 어떤 사용자가 특정 게시물에 좋아요를 누르게 되면 Like 테이블에 어떤 사용자가 어떤 게시물에 좋아요를 눌렀는지 데이터가 추가된다. 그리고 그 테이블을 기반으로1. 특정 사용자가 어떤 게시물들에 좋아요를 눌렀는지에 대해서 조회할 수 있도록하고2. 특정 게시물이 어떤 사용자들로 부터 좋아요를 받았는지를 조회할 수 있도록 한다. 구조는 다음과 같다. 기존에 Board - Member에 대해서만 다루고 있었다면 지금은 중계테이블 처럼Board - Like ..

React 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 그러면 프론트엔드에 기초를 배울때 했던 HTML/CSS와 대체 뭐가 다른 것인지 인지해야한다.React는 화면구성에 있어서 컴포넌트 단위로 만들기 위한 컴포넌트 라이브러리 라고 할 수 있다. 다른 특별한 템플릿 언어가 아닌 JavaScript를 이용해서 만든다. 다시 말해서 기능을 넣은 특정한 UI 부분을 따로 구성하고 모듈화 시켰다고 볼 수 있다. 이러한 독립적인 모듈 하나 하나를 컴포넌트라고 지칭하고 개발자가 컴포넌트 요소 하나하나를 조립해서 전체적인 UI를 구현하는 것이 리액트의 방향이다. 그러면 React의 장점은 무엇일까 ? 1. 재사용성, 유지보수성에서 뛰어남- UI를 독립적인 컴포넌트 단위로 ..

React에서 프론트엔드 부분의 브라우저 서버를 단독 포트를 가진 서버를 열게되고,Spring boot에서도 서버도 단독으로 포트를 가진 서버를 열게된다. 세션 + 쿠키를 통해서 로그인 기능을 구현하려고 할 때, 기존에는 JDBC에서 프론트엔드 코드가 동일한 프로젝트 내에 JSP 파일로 존재해서 같은 포트내에서 적용되고 있었다. 그래서 같은 포트 번호내에서 존재한 프론트엔드와 백엔드 코드간의 세션에 있어서 JAVA를 통한 HttpSession 클래스에 세션을 setAttribute() 메서드를 통해서 session을 생성하게되면 JSP 파일로 열린 브라우저 내에 어플리케이션 정보의 세션에 등록이 되는 것을 확인할 수 있다. 하지만 별로의 포트로 열린 리액트 / spring boot 의 구조에서는 다..

이전 게시물에서는 외래키 제약조건 없이 로그인 기능에 대해서만 코드를 작성하고 예제를 연습했었는데, 이번 게시물에서는 서로 다른 테이블 간의 기본키와 외래키 제약조건을 설정하고 어떤식으로 테이블이 생성되어지고외래키 참조에 있어서 JPA형식의 코드를 어떤식으로 작성해야하는지에 대해서 다루겠다. [클래스 구조]1. Member- MemberApiController- MemberService- MemberRepository- MemberEntity- MemberDto 2. Board- BoardApiController- BoardService- BoardRepository- BoardEntity- BoardDto 2가지의 테이블을 다루고 멤버테이블에서 MEMBER 테이블의 기본키(no)를 통해서 Board 테..

JPA (JAVA Persistence API) 자바에서 객체를 데이터베이스에 저장하고 관리하기 위한 인터페이스와 기능을 제공하는 APIJPA를 사용하면 객체와 관계형 데이터베이스 간의 매핑을 손쉽게 처리할 수 있으며데이터베이스의 CRUD 작업을 간편하게 수행이 가능해짐 여기서 ORM(Object-Relational Mapping)이라는 용어와 연관성이 있는데,우리가 일반적으로 알고있는 어플리케이션 Class 와 RDB(Relational DataBase)의 테이블을 매핑(연결)한다는 뜻으로 기술적으로 어플리케이션의 객체를 RDB 테이블에 자동으로 영속화(데이터가 계속 유지되도록) 해주는 것이다. # JPA 장점- 생산성 (쿼리 X, SQL 자동)- 유지보수 (엔티티 변경 유연)- 패러다임 불일치 해..

해당 게시물에서는 게시물목록을 출력할 때, 페이지를 구분해서 게시물 n개씩 나눠서 보여줄 수 있도록 하는페이지네이션 기능에 대해서 알아보자 일단 페이지네이션이 어떤식으로 구현되는지 확인하기 위해서 티스토리 블로그 목록을 참조하였다. 해당 페이지는 내 티스토리 게시물 목록의 페이지 네이션이다. 내 티스토리 테마에서는 10개의 게시물씩 페이지를 나눠 놓았고,총 22개의 게시물을 3개의 페이지에 10개 / 10개 / 2개 나누어서 페이지가 구성 되어있다. 일단 가장 최근에 적었던 게시물이 1페이지 상단에 오도록 되어있으므로, DB에 게시물이 저장될 때, 고유키 글 번호가 1씩 오르는 시퀀스로 구성되어있다면, 글번호 값을 내림차순으로 정렬해서 게시물을 사용자에게 보여주면 된다. 2페이지를 눌렀을때, 10개..

요놈은 내 블로그 우측상단에 있는 아이콘으로 웹페이지 헤더로 설정되어 내 닉네임과 설정했던 프로필 사진을 보여주는 공간이다. 웬만해서 거의 모든 홈페이지에 계정이 있는 경우에 프로필 사진을 등록하고 사용하는 경우가 많다. 그래서 해당 게시물에서는 웹페이지에 계정이 등록될 때, 계정 정보와 더불어 프로필 사진에 대해 처리하고 웹페이지에 출력되는 기능을 알아보자. [기능]1. 회원가입 시, 계정 프로필 등록가능2. 티스토리 블로그와 동일하게 fixed 형태의 헤더 우측상단위에 로그인된 계정닉네임과 프로필 사진 보이도록 하기 MemberApiController 회원가입 요청 처리 메서드를 살펴보자. 해당 메서드는 api/board 요청에 대해서 POST 방식으로 왔을 때, 실행되는 join() 메서드이다. 일..

해당 게시물에서는 자바스크립트 fetch() 함수를 통한 비동기 api 웹페이지 파일처리 방식에 대해서 알아보겠다. [페이지 포워딩을 위한 BoardController 클래스] 해당 클래스에서는 board/insert 그리고 board/detail/*에 대해서 페이지 포워딩을 진행하는 클래스이다. 게시물 등록을 위한 페이지는 board/insert 요청이 들어왔을때 insert.jsp를 포워딩해줄 것이고,게시물 상세페이지는 board/detail/* 요청이 들어왔을때 detail.jsp를 포워딩 해준다. 일단 게시물 내용과 파일등록을 위한 jsp 파일코드를 살펴보자.[게시물 내용과 파일 첨부를 위한 insert.jsp] 해당 코드에서는 브라우저에서 서버로 데이터를 보내기 위한 형식의 태그가 존재한다...

해당 게시물에서는 게시판 CRUD 작업과 게시판에 각각의 게시물 페이지 포워딩 방식에 대해서 설명하려고 한다. [클래스 구성]BoardApiController - 자바스크립트에 fetch() 함수 요청에 대한 CRUD 작업 및 응답을 담당BoardController - 단순하게 페이지 포워딩을 위한 컨트롤러BoardService - Mapper에서 다룰 mybatis sql 구문 들의 트랜잭션 처리를 담당BoardMapper - mybatis를 활용한 sql 구문 실행BoardVo - DB 테이블에 담긴 컬럼형식을 필드로 담고있고, lombok을 통해 캡슐화가 진행될 클래스 해당 클래스에서는 @RestController 어노테이션으로 @Controller + @ResponseBody 기능을 합친 어노..