❗ 방 생성자를 제외한 참여자 강퇴하기 버튼 출력

• 방장의 화면
• view

  <!-- 생성자인 경우 다른 참여자 강퇴 기능 -->
  <div th:if="${details.getUserName == #authentication.getName()}">
  <button th:if="${member.getUserName != details.getUserName}" type="button" class="btn btn-outline-secondary btn-sm" th:crewId="${crewId}" th:userId="${member.joinUserId}"
          th:onclick="deleteUserFromCrew(this.getAttribute('crewId'),this.getAttribute('userId'))">
    강퇴하기
  </button>
  </div>

• 흐름도
  

❗ 현재 로그인 한 참여자에게만 나가기 버튼 출력

• 참가자 화면
  • view

    <!-- 일반 참여자인 경우 자기 자신만 나가기 기능-->
    <div th:if="${member.getUserName() == #authentication.getName() and details.getUserName != #authentication.getName()}">
    <button type="button" class="btn btn-outline-danger btn-sm" th:crewId="${crewId}" th:userId="${member.joinUserId}"
         th:onclick="deleteUserFromCrew(this.getAttribute('crewId'),this.getAttribute('userId'))">
    나가기
    </button>
    </div>

  • 흐름도

javascript

async function deleteUserFromCrew(crewId, userId){
    console.log(crewId);
    console.log(userId);

    if(confirm("삭제하시겠습니까?")){
        location.href = "/view/v1/manage/crews/" + crewId + "/" + userId+"/delete";

        return true;
    } else {
        return false;
    }

}

✔ 여러 개의 파라미터를 가진 JavaScript 함수 호출

<button>안에서 th:onclick으로 javascript함수인 deleteUserFromCrew()가 호출된다.

1. 받아야 할 파라매터 값을 태그 안에서 response로부터 가져오고, 태그 안에서 변수에 저장한 다음 ex) th:crewId="${crewId}"
2. 함수 안에서 this.getAttribute('파라미터 변수')를 통해 값을 넘겨준다. th:onclick="method(this.getAttribute('parameter1'), this.getAttribute('parameter2'))"

*타임리프에서 인식을 못하는 에러가 존재하는데, 그냥 인텔리제이에서 인식을 못하는 거라서 실행에는 문제가 없다.

마무리

타임리프의 버전에 따라 호출 방법이 조금씩 다르고, 한 개 이상 파라미터를 대입하는 방법을 알려준 곳이 잘 보이지 않았기 때문에 찾는데 시간이 오래걸렸던 것 같다.

개발환경 개발 툴 : SpringBoot 2.7.7 자바 : JAVA 11 빌드 : Gradle 템플릿 엔진 : Thymeleaf spring MVC 구조

✔ self join이란?

이름그대로 자기자신 테이블과 조인을 하는 것을 말한다. 원래 조인이 두개의 테이블에 대해 연관된 행들을 조인 칼럼을 기준으로 비교하여 새로운 행 집합을 만드는 것인데 두개의 테이블이 같은 테이블인 경우를 Self Join 이라고 한다.

즉, 한 개의 테이블을 두 개의 별도의 테이블처럼 이용하여 서로 조인 하는 형태로, 대댓글을 위한 테이블을 만들지는 않고 댓글 테이블을 참조한다.

✔ 순환 참조 관계 맺기

한 개의 부모 댓글에 여러 답글이 달릴 수 있으므로 1:N 관계로 매핑해준다. -> 하나의 Comment를 부모로 가지고 List<Comment>를 자식으로 가져야한다. -> Comment 엔티티 안에서 @ManyToOne과 @OneToMany 관계를 정의해야한다.

parentId 칼럼을 추가하고 자식댓글인 경우 부모댓글의 아이디를 저장한다.

Comment Entity

@Entity
@NoArgsConstructor
@AllArgsConstructor
@Getter
@Builder
@Where(clause = "deleted_at is null")
public class Comment extends BaseEntity{
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String comment;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "user_id")
    User user;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "crew_id")
    Crew crew;

    // 부모 정의
    @Setter
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "parent_id") // parent_id 이름으로 칼럼 추가
    private Comment parent;

    // 자식 정의
    @Setter
    @OneToMany(mappedBy = "parent", orphanRemoval = true)
    private List<Comment> children = new ArrayList<>();


    public void setComment(String comment) {
        this.comment = comment;
    }
    public static List<CommentViewResponse> from(List<Comment> comments) {
        return comments.stream()
                .map(CommentViewResponse::of)
                .collect(Collectors.toList());
    }
}

✔ 부모 댓글 CRUD

가장 먼저 상세 페이지에 들어가면 👆 이전에 작성된 댓글리스트가 바로 출력되고 ✌ 댓글 입력창에서 추가할 수 있도록 구성하고자 했다. read-crew.html

<p class="comment">댓글</p>
    <!--댓글 작성 부분-->
<form method="post">
   <div class="input-group" style="width:auto">
      <label class="form-label mt-4" hidden>댓글 작성</label>
      <input type="text"  class="form-control" id="commentContent" name="commentContent" required minlength="2" maxlength="100"placeholder="댓글을 입력해주세요">
      <input type="text" hidden th:value="${crewId}" id="crewIdComment">
      <input type="text" hidden th:value="${#authentication.getName()}" id="principal">
      <button type="button" id="commentBtn"  onclick="commentCheck()" class="btn btn-light">작성</button>
      <br>
   </div>
</form>
<p class="field-error commentContentCheck"></p>
<br>
    <!--댓글 출력 부분-->
<div id="commentList"> 댓글</div>

const crewId = [[${crewId}]];
    const username = [[${#authentication.name}]];

    $(function() {
        getComment();
    });

read-crew의 javascript 부분으로, 위의 코드에 의해 상세 페이지에 들어가자마자 댓글 출력 함수가 실행된다.

✔️ 부모 댓글 입력 로직

가장 먼저 댓글 입력을 했을 때 데이터를 전송하면 /view/v1/crews/{crewID}/comments POST가 서버로 요청된다. CommentViewController

    // 댓글 작성
    @PostMapping("/view/v1/crews/{crewId}/comments")
    public ResponseEntity addComment(@RequestBody CommentRequest commentRequest,@PathVariable Long crewId, Authentication authentication) {
        CommentResponse commentResponse = commentService.addComment(commentRequest, crewId, authentication.getName());
        return new ResponseEntity<>(commentResponse, HttpStatus.OK);
    }

CommentService

public CommentResponse addComment(CommentRequest commentRequest, Long crewId, String userName) {
        User user = getUser(userName);
        Crew crew = getCrew(crewId);

        Comment comment = commentRepository.save(commentRequest.toEntity(user, crew));
        alarmRepository.save(Alarm.toEntity(user, crew, AlarmType.ADD_COMMENT, comment.getComment()));

        ...
        }

        return CommentResponse.of(comment);
    }

CommentResponse

@AllArgsConstructor
@NoArgsConstructor
@Getter
@Builder
public class CommentResponse {
    private Long id;
    private String comment;
    private String userName;
    private Long crewId;
    private LocalDateTime createdAt;
    public static CommentResponse of(Comment comment) {
        return CommentResponse.builder()
                .id(comment.getId())
                .comment(comment.getComment())
                .userName(comment.getUser().getUsername())
                .crewId(comment.getCrew().getId())
                .createdAt(comment.getCreatedAt())
                .build();
    }
}

ajax

function commentCheck() {
        const content = $("#commentContent").val();
        const crewId = $("#crewIdComment").val();
        $.ajax({
            type : "POST",
            url: '/view/v1/crews/'+ crewId +'/comments',
            async: false,
            data: JSON.stringify({
                "comment": content,
                "crewId": crewId,
                "parentId" : null
            }),
            contentType : "application/json; charset=utf-8",
            success: function(data) {
                alert("등록 되었습니다.") ;
                getComment();
                $('.commentContentCheck').text('');
                $('.commentContentCheck').css('display', 'none');
            },
            error: function (status) {
                alert("로그인 후 작성이 가능합니다.");
                $(status.responseJSON).each(function(){
                    $('.commentContentCheck').text(this.message);
                    $('.commentContentCheck').css('display', 'block');
                })
            }
        })
    }

✔️ 부모 댓글 출력 로직

getComment() 메소드가 실행되면서 /view/v1/crews/{crewId}/comments GET URL을 요청. 아래는 서버에서 실행되는 로직이다. CommentViewController

    // 댓글 리스트 출력
    @GetMapping("/view/v1/crews/{crewId}/comments")
    public ResponseEntity getCommentList(@PathVariable Long crewId) {
        List<CommentViewResponse> list = commentViewService.getCommentViewList(crewId);
        return new ResponseEntity<>(list, HttpStatus.OK);
    }

CommentViewService comment entity의 from 메소드를 통해 List<Comment>를 List<CommentViewResponse>로 매핑해준다.

    // 댓글 리스트
    @Transactional(readOnly = true)
    public List<CommentViewResponse> getCommentViewList(Long crewId) {
        List<Comment> list = commentRepository.findByCrewId(crewId);
        return Comment.from(list);
    }

CommentViewResponse

package teamproject.pocoapoco.domain.dto.comment.ui;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Getter;
import lombok.NoArgsConstructor;
import teamproject.pocoapoco.domain.entity.Comment;

import java.time.LocalDateTime;
import java.util.LinkedList;
import java.util.List;

@AllArgsConstructor
@NoArgsConstructor
@Getter
@Builder
public class CommentViewResponse {
    private Long id;
    private String comment;
    private String userName;
    private String nickName;
    private Long crewId;
    private boolean isParent;
    private boolean isDeleted;
    private List<CommentViewResponse> children;
    private LocalDateTime createdAt;

    public static CommentViewResponse of(Comment comment) {
        return CommentViewResponse.builder()
                .id(comment.getId())
                .comment(comment.getComment())
                .userName(comment.getUser().getUsername())
                .nickName(comment.getUser().getNickName())
                .crewId(comment.getCrew().getId())
                .isParent(comment.getParent()==null)    // true라면 부모댓글
                .isDeleted(comment.isSoftDeleted()==true) // true라면 삭제된 댓글
                .children(comment.getChildren() != null ? Comment.from(comment.getChildren()) : new LinkedList<>())
                .createdAt(comment.getCreatedAt())
                .build();
    }
}

ajax data값은 List<commentViewResponse>

• $(data).each를 통해 댓글 리스트 하나하나가 아래의 html코드형식에 맞게 출력된다.

• 부모 댓글 parent과 삭제되지 않은 댓글 !deleted만 출력되도록 조건을 걸었다.

• 조건설정을 위해 dto인 commentViewResponse에 추가한 필드

• 작성자와 로그인한 사용자가 같은 user일 경우 삭제, 수정 버튼이 출력되도록 조건을 걸었다.

    // 부모댓글 리스트 출력
    function getComment(){
  
        $("#commentList").empty();  // commentList가 비어있는지 확인
        const principal = $("#principal").val(); // username
        const crewId = document.getElementById("crewIdComment").value;
        $.ajax({
            type:"get",
            url:"/view/v1/crews/"+ crewId +"/comments",
            dataType:"json",
            success:function (data) {
                var html = " ";
                $(data).each(function(){ // data == commentViewList
                    if(this.parent===true && this.deleted ===false){
                        html += "<ul class='list-group'>";
                        html += "<li class='list-group-item comments'>";
                        html += "<div class='comment' id='"+this.id+"comment'>";
                        html += "<a href='javascript:; class='userImg'>";
                        html += "</a>";
                        html += "<a href='javascript:;' class='writer' style='display:inline'>" + this.nickName + "</a>";
                        html += "<div class='comment-info'>";
                        html += "<span class='comment4 date'>" + getFormatDate(new Date(this.createdAt)) + "</span>";
                        html += "<div class='comment-text' id='"+this.id+"content'> " + this.comment + "</div>";
                        html += "<div class='comment_etc'>";
                        html += "<div class='comment-info'>";
                        html += "<a href='javascript:;' class='btn btn-secondary btn-icon-split comment_delete' id='"+this.id+"getChildrenBtn' >";
                        html += "<button id='"+this.id+"getChildrenBtn' onclick='getChildrenComment("+this.id+")' class='btn btn'>답글("+this.children.length+")</button>";
                        html += "</a>";
                        if(principal === this.userName) {
                            html += "<a href='javascript:;'>";
                            html += "<button type='button' onclick='commentDelete(" + this.id + ")' class='delete btn btn-outline-danger'  id='" + this.id + "deleteBtn'>삭제";
                            html += "</button>";
                            html += "</a>";
                        }if(principal === this.userName) {
                            html += "<a href='javascript:;'>";
                            html += "<button type='button'  onclick='commentUpdateForm(" + this.id + ")' class='btn btn-outline-secondary'  id='" + this.id + "updateBtn'>수정";
                            html += "</button>";
                            html += "</a>";
                        }
                        html += "</div>";
                        html += "</div>";
                        html += "</div>";
                        html += "</li>";
                        html += "<div id='"+this.id+"children' class='children'></div>";
                    }
  
                });
                html += "</ul>";
  
                $("#commentList").append(html);
  
            }
        });
    }

  

  
  

✔️ 댓글 수정 및 삭제

• 수정, 삭제 로직은 댓글, 대댓글 api가 동일하다 CommentViewController

    // 댓글, 대댓글 수정
    @PutMapping("/view/v1/crews/{crewId}/comments/{commentId}")
    public ResponseEntity modifyComment(@RequestBody CommentRequest commentRequest, @PathVariable Long crewId, @PathVariable Long commentId , Authentication authentication) {
        commentService.modifyComment(commentRequest, crewId, commentId, authentication.getName());
        return new ResponseEntity<>("수정되었습니다.", HttpStatus.OK);
  
    }
    // 댓글, 대댓글 삭제
    @DeleteMapping("/view/v1/crews/{crewId}/comments/{commentId}")
    public ResponseEntity<String> deleteComment(@PathVariable Long crewId, @PathVariable Long commentId , Authentication authentication) {
        try {
            if (commentService.getDetailComment(crewId, commentId).getUserName().equals(authentication.getName()) ||
                    authentication.getAuthorities().stream().anyMatch(a -> a.getAuthority().equals("ROLE_ADMIN"))) {
                commentService.deleteComment(crewId, commentId, authentication.getName());
                return new ResponseEntity<>("articleCommentDeleting Success", HttpStatus.OK);
            } else {
                return new ResponseEntity<>(ErrorCode.INVALID_PERMISSION.getMessage(), HttpStatus.BAD_REQUEST);
            }
        }
        catch (EntityNotFoundException e){
            return new ResponseEntity<>(e.getMessage(), HttpStatus.BAD_REQUEST);
        }
    }

  CommentService

    // 수정
    public CommentResponse modifyComment(CommentRequest commentRequest, Long crewId, Long commentId, String userName) {
        Comment comment = checkCommentAndCrew(crewId, commentId);
        // 본인이 작성한 댓글이 아니면 에러
        isWriter(userName, comment);
  
        comment.setComment(commentRequest.getComment());
        return CommentResponse.of(comment);
    }
    // 삭제
    public CommentDeleteResponse deleteComment(Long crewId, Long commentId, String userName) {
        Comment comment = checkCommentAndCrew(crewId, commentId);
        // 본인이 작성한 댓글이 아니면 에러
        isWriter(userName, comment);
  
        comment.deleteSoftly(LocalDateTime.now());
        commentRepository.deleteAll(comment.getChildren());
        return CommentDeleteResponse.of(commentId);
    }
  

<br>

- - - 
- 아래는 view

_**getComment() `수정 부분`**_
수정 버튼을 누르면 수정 폼을 보여주는 commentUpdateForm()이 실행된다.  
    - text area 
    - 수정 버튼 
    - 수정 취소 버튼이 있다.

html += ""; html += "수정"; html += ""; html += "";

_**ajax**_
```javascript
    function commentUpdateForm(id){
        $("#"+id+"updateBtn").hide();
        $.ajax({
            type: "GET",
            url: "/view/v1/crews/"+crewId+"/comments/"+id,
            dataType: "json",
            success: function (data) {
                var html = "<div class='comment-update'>";
                html += "<div class='comment-update-form'>";
                html += "<textarea class='form-control' id='"+id+"ucommentContent' rows='3' placeholder='댓글을 입력하세요.'>"+data.comment+"</textarea>";
                html += "<div class='field-error "+id+"ucommentContentCheck'>";
                html += "</div>";
                html += "<div class='comment-update-btn'>";
                html += "<button type='button' class='btn btn-secondary'  onclick='commentUpdate("+data.id+")'>수정</button>";
                html += "<button type='button' class='btn btn-secondary' onclick='commentUpdateCancel("+data.id+")'>취소</button>";
                html += "</div>";
                html += "</div>";
                html += "</div>";
                $("#"+data.id+"content").html(html);
            },
            error: function (xhr, status, error) {
                alert(status.message);
            }
        });
    }
    function commentUpdate (id) {
        {
            const crewId = $('#crewIdComment').val();
            const ucommentContent = $('#'+id+'ucommentContent').val();
            $.ajax({
                type: "PUT",
                url: "/view/v1/crews/"+ crewId +"/comments/"+id,
                data: JSON.stringify({"crewId": crewId,
                    "comment": ucommentContent,
                }),
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    alert(data) ;
                    getComment();
                    $('.'+id+'ucommentContentCheck').text('');
                },
                error: function (status) {
                    $(status.responseJSON).each(function(){
                        $('.'+id+'ucommentContentCheck').text(this.message);
                    })
                }
            });
        }
    }
    function commentUpdateCancel(id){
        $(".comment-update").html("");
        $("#"+id+"updateBtn").show();
        getComment();
    }

getComment() 삭제 부분 삭제 버튼을 누르면 commentDelete()가 실행된다. 이때 id는 commentViewResponse의 id이다.

html += "<a href='javascript:;'>";
html += "<button type='button' onclick='commentDelete(" + this.id + ")' class='delete btn btn-outline-danger'  id='" + this.id + "deleteBtn'>삭제";
html += "</button>";
html += "</a>";

ajax

function confirmDelete() {
        if(confirm("정말 삭제하시겠습니까?")) {
            $("#form").submit();
        }
        return false;
    }
function commentDelete (id) {
        {
            $.ajax({
                type: "DELETE",
                url: "/view/v1/crews/"+crewId+"/comments/"+ id,
                contentType: "application/json; charset=utf-8",
                success: function () {
                    alert('댓글이 삭제되었습니다.');
                    getComment();
                }
                ,
                error: function (xhr, status, error) {
                    alert(status.message);
                }
            });
        }
    }

여기까지 부모댓글 CRUD, 대댓글 update,delete까지 구현되었다. 분량이 길어지는 것 같아 대댓글 생성 및 조회 기능은 다음 포스트에서 마무리하려고 한다!

참고문헌

[JPA] Self Reference (순환 참조, 셀프 참조) [Thymeleaf] ajax를 이용해 비동기식 화면 수정

In-memoryDB : 모든 데이터를 메모리에 저장하고 조회하는 인메모리 데이터베이스 NoSQL : Not Only SQL, RDBMS가 갖고 있는 특성뿐만 아니라, 다른 특성들을 부가적으로 지원한다 싱글 스레드 : 하나의 트랜잭션은 하나의 명령만 실행 cache : 한 번 읽어온 데이터를 임의의 공간에 저장하여, 다음에 읽을 때는 빠르게 결과값을 받을 수 있도록 도와주는 공간 영속성 : 데이터를 생성한 프로그램의 실행이 종료되더라도 사라지지 않는 데이터의 특성 global cache : 여러 서버에서 Cache Server에 접근하여 사용하는 캐시 local cache : Local 장비 내에서만 사용 되는 캐시, Local 장비의 Resource를 이용한다 (Memory, Disk) 트랜잭션 : 쪼갤 수 없는 업무 처리의 최소 단위

Redis

✔ Redis란?

redis는 오픈소스로서 데이터베이스(NOSQL DBMS)로 분류가 되기도 하고 Memcached와 같이 인메모리 솔루션으로 분류되기도 한다.

성능은 memcached에 버금가면서 다양한 데이터 구조체를 지원함으로써 Message Queue, Shared memory, Remote Dictionary 용도로도 사용될 수 있으며, 이런 이유로 인스타그램, 네이버 재팬의 LINE 메신져 서비스, StackOverflow,Blizzard,digg 등 여러 소셜 서비스에 널리 사용되고 있다.

✔️** NoSQL 관점** NoSQL관점에서 봤을 때 redis는 가장 단순한 키-밸류 타입을 사용하고 있다. 데이터 모델은 복잡할수록 성능이 떨어지므로 redis는 단순한 구조를 통해 높은 성능을 보장한다고 할 수 있다.

NoSQL에는 다양한 제품이 있지만 이 중, redis가 주목받는 이유는 다음과 같다.

• 데이터 저장소로 가장 입/출력이 빠른 메모리를 채택
• 단순한 구조의 데이터 모델인 키- 밸류 방식을 통해 빠른 속도를 보장
• 캐시 및 데이터스토어에 유리
• 다양한 API지원

✔️ 캐싱 솔루션 관점 redis, memcached, 구아바 라이브러리등 인메모리 캐시방식을 적용한 제품 중 redis는 global cache 방식을 채택하였다. global cache 방식은 네트워크 트래픽이 발생하기 때문에 java heap영역에서 조회되는 local cache의 성능이 더 낫지만, WAS 인스턴스가 증가할 경우엔 캐시에 저장되는 데이터 크기가 커질수록 redis 방식이 더 유리하다.

redis는 급격한 사용자가 집중되는 상황이나 대규모의 확장이 예정되어 있는 환경에 적합하다. global cache 방식이 적용되어 was 인스턴스 확장에는 유리하지만 cache 및 redis 세션 등 관리 포인트가 늘어난다는 단점이 존재한다.

✔ NoSQL과 Redis

✔️ 사례로 보는 NoSQL로써의 Redis 사용자 증가로 인한 서비스 중단의 원인이 DB 서버일때, 너무 많은 SQL 문 처리 요청을 받아 MySQL이 동시에 처리할 수 있는 한계치를 넘어섰고 그로 인해 응답시간이 길어질 수 있다. MySQL 서버의 응답시간 지연이 발생하여 톰캣 서버에서 DB 서버로의 네트워크 연결이 모두 끊어졌다. 이런 상황은 어떻게 대처해야 할까? 2가지의 방안이 있다.

1.서비스를 멈추고 단일 서버의 성능을 증가시켜서 더 많은 요청을 처리하는 방법을 스케일 업이라고 한다.
-> 통상적으로 스케일 업을 적용하면 서비스의 중단이나 추가 하드웨어 비용이 발생한다. 2.서비스를 멈추고 새로운 서버에 기존 서버의 데이터를 옮겨 다시 새롭게 서비스를 시작한다. -> 서비스 중지 상태에서 데이터를 옮기고 데이터를 정리하느라 많은 시간소요

이에 반해서 대부분의 NoSQL은 처음부터 스케일 아웃을 염두에 두고 설계되었기 때문에 데이터의 증가나 요청량이 증가하더라도 동일하거나 비슷한 사양의 새로운 하드웨어를 추가하면 대응이 가능하다. 데이터가 적거나 또는 요청량이 적을때는 일반 RDBMS를 사용하더라도 서비스를 제공하는데 문제가 없다. 하지만 데이터 증가량을 측정하기 불가능하거나 서비스 요청량의 증가를 예측하기 어려운 상황에서는 NoSQL을 저장소로 사용하는 것이 현명한 선택이 될것이다.

멤캐시드와 레디스를 같은 캐시 캐시 시스템으로서 동등한 위치에서 비교하게 된것은 레디스가 멤캐시드와 동일한 기능을 제공하면서 영속성, 다양한 데이터 구조와 같은 부가적인 기능을 지원하기 때문이다. 또한 특정한 조건에서는 멤캐시드에 비해서 더 나은 성능을 보여주기도 한다. 이와 같은 이유로 레디스는 멤캐시드를 대체하는 솔루션으로 주목 받았다.

레디스는 모든 데이터를 메모리에 저장하고 조회한다. 즉, 인메모리 데이터베이스 솔루션이다. 빠른 성능은 레디스의 특징 중 일부분에 지나지 않는다. 다른 인메모리 솔루션들과의 차이점 중 가장 특별한 점은 레디스의 '다양한 자료구조'다.

✔️ Key/Value Store 특정 키 값에 값을 저장하는 구조로 되어 있고 기본적인 PUT/ GET Operation을 지원한다. 단, 이 모든 데이터는 메모리에 저장되고 이로 인해 매우 빠른 write/read 속도를 보장한다. 그래서 전체 저장 가능한 데이터 용량은 물리적인 메모리 크기를 넘어설 수 있다(물론 OS의 disk swapping 영역 등을 사용해 확장은 가능하겠지만 성능이 급격하게 떨어지기 때문에 의미가 없다). 데이터 액세스는 메모리에서 일어나지만 서버 재시작(server restart)과 같이 서버가 내려갔다가 올라오는 상황에 데이터의 저장을 보장하기 위해 디스크를 persistence store로 사용한다.

✔️ 레디스의 데이터타입 모든 데이터를 메모리에 저장하고 조회하기때문에 빠른 Read, Write 속도를 보장하고 또 다양한 자료구조를 지원한다는 점이다.

📑 Redis가 지원하는 데이터 형식 String, List, Set, Sorted Set, Hash

메소드명	반환 오퍼레이션	Redis 자료구조
opsForValue()	ValueOperations	String
opsForList()	ListOperations	List
opsForSet()	SetOperations	Set
opsForZSet()	ZSetOperations	Sorted Set
opsForHash()	HashOperations	Hash
다양한 자료구조를 지원하게 되면 개발의 편의성이 좋아지고 난이도가 낮아진다.

예를들어 어떤 데이터를 정렬을 해야하는 상황이 있을 때 DBMS를 이용한다면 DB에 데이터를 저장하고 -> 저장된 데이터를 정렬하여 -> 다시 읽어오는 과정은 디스크에 직접 접근을 해야하기 때문에 시간이 더 걸린다는 단점이 있다. 이 때 In Memory 데이터베이스인 Redis를 이용하고 레디스에서 제공하는 Sorted Set이라는 자료구조를 사용하면 더 빠르고 간단하게 데이터를 정렬할 수 있다.

✔ 싱글 스레드 기반의 Redis

Redis 4.0 부터 4개의 스레드로 동작합니다. 메인스레드 1개, 시스템 명령들을 처리하는 thread 3개 메인스레드에서 사용자 명령어를 처리하기에 싱글 스레드로 동작한다고 이해하면 됩니다. 싱글 스레드로 동작하고 해시 기반의 get/set 을 지원하기에 Redis 의 주요 기능들이 O(1) 시간복잡도로 빠르게 처리되며, 데이터를 일관성있게 유지할 수 있습니다.

(자주 비교되는 맴캐쉬드는 멀티 스레드 지원)

Keys(저장된 모든키를 보여주는 명령어)나 flushall(모든 데이터 삭제)등의 명령어를 사용할 때, 맴캐쉬드의 경우 1ms정도 소요되지만 레디스의 경우 100만건의 데이터 기준 1초로 엄청난 속도 차이가 있다. -> 많은 키(100,000,000,000개) 건 적은 키(1개) 건 스키마가 많건 적건 동일한 시간이 사용된다.

✔️싱글 스레드 기반의 Redis 주의사항 주의해야할 점은 redis 는 single thread 기반이기에 시간이 오래 걸리는 명령어를 사용할 경우 뒤에 있는 명령어들은 기다려야하므로 성능에 영향을 줄 수 있습니다.

✔ 서버 복제 지원

Master - slave 구조로, 여러개의 복제본을 만들 수 있다. 데이터베이스 읽기를 확장할 수 있기 때문에 높은 가용성(오랜 시간동안 고장나지 않음) 클러스터를 제공한다.

✔ 트랜젝션

트렌잭션이란.. 트랜잭션으로 묶게 되면 트랜잭션 내부에서 하나의 로직이 실패하여 오류가 나게되면 모두 취소시키며 그렇지 않으면 모두 성공시키는 것이다. Redis는 이 트랜잭션 기능을 지원한다.

✔ Pub / Sub messaging

Publish(발행)과 Sub(구독)방식의 메시지를 패턴 검색이 가능하다. 따라서 높은 성능을 요구하는 채팅, 실시간 스트리밍, SNS 피드 그리고 서버상호통신에 사용할 수 있다.

메시지들을 queue로 관리하지 않고, publish 하는 시점 기준으로 미리 subscribe 등록 대기 중인 클라이언트들을 대상으로만 메시지를 전달한다.

✔ 위치기반 데이터 타입 지원

Redis는 실시간 위치기반데이터를 지원한다. 두 위치의 거리를 찾거나, 사이에 있는 요소 찾기등의 작업을 수행할 수 있다.

면접 예상 질문

Q1. RDBMS, NOSQL 차이점

1. RDBMS, NOSQL 차이점

• RDBMS

RDBMS는 관계형 데이터베이스 관리 시스템으로서, 구성된 테이블끼리 관계를 맺고 모여있는 집합체입니다. 테이블 형식으로 속성, 값으로 이루어져 있습니다. 트랜잭션 처리가 가능하고, 스키마를 미리 정의해 줘야해서 테이블 생성문으로 정의해줍니다.

CREATE TABLE member(
    id int not null auto_increment primary key,
    name varchar(10) nut null,
    password varchar(12) not null,
    reg_date datetime not null
 );

• NOSQL

NoSQL은 테이블 간의 관계를 정의하지 않고 key-value로 이루어져있습니다. 정해진 스키마가 없고 데이터의 입출이 자유로워서 대용량 데이터를 저장하는데 용이합니다. 몽고디비, 레디스 등이 있습니다.

오토 샤딩 기능이 있어서 대용량 데이터를 자동으로 분산 처리합니다. (RDB도 비슷한 기능인 클러스터링이 있지만 설정이 복잡)

명확한 스키마가 필요하고, 데이터 중복을 허용하지 않는 경우 RDBMS를 사용합니다. 반대로 정확한 데이터 구조가 있지 않고 데이터가 확장이 될 수 있는 경우 NoSql을 사용합니다.

Q2. Memcached vs Redis

맴캐쉬드는 명료하고 단순함을 위하여 개발된 반면,

레디스는 다양한 용도에 효과적으로 사용할 수 있도록 많은 특징을 가지고 개발되었다.

Q3. Redis는 왜 사용해야할까?

Redis는 아직도 활발하게 현재 시장에서 많이 사용되고 있습니다.

기본적으로 서비스 환경에서는 확장성을 고려해서 Redis를 사용하는 것이 일반적으로 좋아 보입니다.

• 보다 광범위한 데이터 구조 및 스트림 처리 기능에 대한 액세스가 필요합니다.
• 키와 값을 제자리에서 수정하고 변경할 수 있는 기능이 필요합니다.
• 사용자 지정 데이터 제거 정책이 필요합니다. (예: 시스템의 메모리가 부족하더라도 키를 더 긴 TTL로 유지해야 함)
• 백업 및 웜 재시작을 위해 데이터를 디스크에 유지해야 합니다.
• 복제본 및 클러스터링을 통해 애플리케이션의 높은 가용성 또는 확장성을 확보해야 합니다.

참고 문헌

[데이터베이스] Redis란? Redis 레디스 특징, 장단점, Memcached와 redis 비교 [Redis] 이것이 레디스다(1) - NoSQL 주목받는 NoSQL & Cache 솔루션 : Redis 캐시(Cache) Local Cache & Global Cache 레디스는 언제 어떻게 사용하면 좋을까

*AWS ec2에 도커를 띄우는 방법은 정리해두었으니 참고해보자 [AWS Ec2 스팟 인스턴스설정 + MySql 도커 띄우기] (https://velog.io/@jsang_log/AWS-Ec2-%EC%8A%A4%ED%8C%9F-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0)

📑 xshell에 아래의 명령어들을 입력한다

✔️ redis 이미지 파일 다운

docker pull redis 

✔️ 이미지 파일 확인

docker images

✔️ redis 컨테이너 실행

docker run -p 6379:6379 --name (redis 컨테이너 이름) -d redis

ex) docker run -p 6379:6379 --name spring-redis -d redis ✔️ AWS 보안그룹 인바운드/아웃바인드 설정 *AWS 보안그룹 인바운드/아웃바인드 설정방법은 아래 포스트를 참고해보자 [AWS Ec2 스팟 인스턴스설정 + MySql 도커 띄우기] (https://velog.io/@jsang_log/AWS-Ec2-%EC%8A%A4%ED%8C%9F-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0)
✔️ 실행중인 컨테이너 spring-redis와 상호작용하고(-i) 명령어는 redis-cli로 redis와 접근

docker exec -i -t (redis 컨테이너 이름) redis-cli

ping pong이 잘 오가면 클라이언트와 서버가 제대로 작동하고 있는 것이다. ❓ Aws 컨테이너 관점에서 localhost (또는 127.0.0.1)

🎫** 비밀번호 인증이 필요한 이유** 난데없는 backup은 뭐지? redis에 값을 넣고 key를 조회하다보면 내 key값들은 사라지고 아래 화면처럼 알 수 없는 키들을 보곤 한다. 악의적이고 단조로운 해킹에 당한 것을 축하한다 🥂

• redis의 잘 알려진 6379 포트가 열려있고
• redis에 비밀번호를 설정하지 않는다면 해킹의 표적이 되기 쉽다.

그렇다면 우리는 다음과같이 위의 두가지 조건을 만족하지 않게하면 될텐데 시스템에서 대체적으로 많이 알려져있는 포트는 가급적이면 변경하지 않고 사용하는 것이 좋으므로 6379번 그대로 유지하자. 단, redis 서버에 접근하려면 필수로 인증을 하게끔 설정하는 것을 권유한다.

❗ 비밀번호 설정

docker image로 실행하고 있기에 간단하게 도커이미지에 환경변수를 넘기는 것만으로 requirepass가 설정할 수 있다. (간단한 환경설정이 도커 방식의 장점)

✔️ 기존의 docker (비밀번호 설정되지 않은) 컨테이너 삭제 후 명령어를 재실행

• 도커 컨테이너 중지

   Ctrl + Insert로 `복사` / Shift + Insert로 `붙여넣기`

  docker ps
  docker stop (redis containerID)

  

• 도커 컨테이너 삭제

  docker rm (redis containerID)

  

✔️ docker를 사용하여 redis 이미지를 만들고 redis 비밀번호를 설정

   docker run -p 6379:6379 --name (redis 컨테이너 이름) -d redis:latest --requirepass "(비밀번호)"

ex) docker run -p 6379:6379 --name spring-redis -d redis:latest --requirepass "123456"

✔️ redis-cli에서 인증 후 접속 확인

docker exec -i -t (redis 컨테이너 이름) redis-cli
AUTH (비밀번호)

❗ Springboot과 연동하기

라이브러리 Spring Boot에서는 Spring Date Redis를 통해 Lettuce, Jedis라는 오픈소스 Java 라이브러리를 사용할 수 있다. 접근방식 Spring Data Redis는 Redis에 두 가지 접근 방식을 제공한다.

하나는 RedisTemplate을 이용한 방식이며, 다른 하나는 RedisRepository를 이용한 방식이다.

_ *해당 포스트는 Lettuce를 통해 Redis를 사용한다._ _ *또한 RedisTemplate 방식으로 Redis에 접근한다._

Redis에 접근하기 위해서는 Redis 저장소와 연결하는 과정이 필요하다.

✔️ build.gradle 의존성 추가

// redis
implementation 'org.springframework.boot:spring-boot-starter-data-redis'

✔️ Redis 저장소와 연결

@Configuration
@EnableRedisRepositories // redis 활성화
public class RedisConfig {
    @Value("${spring.redis.host}")
    private String redisHost;

    @Value("${spring.redis.port}")
    private int redisPort;

    @Value("${spring.redis.password}")
    private String redisPassword;

    /*
    RedisTemplate을 이용한 방식

    RedisConnectionFactory 인터페이스를 통해
    LettuceConnectionFactory를 생성하여 반환
     */

    @Bean
    public RedisConnectionFactory redisConnectionFactory(int dbIndex) {
        final RedisStandaloneConfiguration redisStandaloneConfiguration = new RedisStandaloneConfiguration();
        redisStandaloneConfiguration.setHostName(redisHost);
        redisStandaloneConfiguration.setPort(redisPort);
        redisStandaloneConfiguration.setPassword(redisPassword);
        return new LettuceConnectionFactory(redisStandaloneConfiguration);

    @Bean
    public RedisTemplate<String, String> redisTemplate() {
        // redisTemplate를 받아와서 set, get, delete를 사용
        RedisTemplate<String, String> redisTemplate = new RedisTemplate<>();
        /**
         * setKeySerializer, setValueSerializer 설정
         * redis-cli을 통해 직접 데이터를 조회 시 알아볼 수 없는 형태로 출력되는 것을 방지
         */
        redisTemplate.setKeySerializer(new StringRedisSerializer());
        redisTemplate.setValueSerializer(new StringRedisSerializer());
        redisTemplate.setConnectionFactory(redisConnectionFactory());

        return redisTemplate;
    }
}

✔️ 환경 설정

• application.yml 에 해당 내용 추가 application.yml 파일은 깃허브에 그대로 노출되므로 임시의 값을 넣어주고 Environment Variables 설정을 통해 실제 값을 주입한다.

spring:
  redis:
    host: localhost
    port: 6379
    password: hello

• Environment Variables
• ⭐ SPRING_REDIS_HOST 의 주소는 ec2 인스턴스의 퍼블릭 IPv4 주소로 값을 넣어주어야 한다.

‼ 마무리

Redis는 build.gradle dependencies에서만 적용을 하면 redis가 되는 줄 알았지만, 따로 다운로드 및 설치 후 port 실행을 해야지 연결이 가능했다. 그리고 redis를 ec2에 띄웠기 때문에 spring.reids.host주소를 IPv4주소로 주입해주는 것을 알기까지 오래 헤맸던 것 같다. 막상 정리하고 보니 설치 과정이 너무 복잡하지는 않다는 생각이 들고, redis를 설정함으로써 이번 팀프로젝트에 다양한 기능을 확장해나갈 수 있었기에 보람찬 마음도 든다!

참고 문헌

https://ratseno.tistory.com/93 내redis가해킹당했다고심지어local인데/ https://wildeveloperetrain.tistory.com/32 https://jojoldu.tistory.com/297

*ec2 docker 컨테이너가 아닌 localhost 환경에 Redis를 설치하고 싶다면 이 링크를 참조해서 설정할 수 있다 [REDIS] 📚 Window10 환경에 Redis 설치 & 설정

• 동기 방식과 비동기 방식의 차이
• 비동기로 구현하는 이유
• 언어나 프레임워크가 아닌 비동기를 구현하는 방식인 Ajax

등등 에 대한 간단한 설명을 곁들이려고 한다.

개발환경

개발 툴 : SpringBoot 2.7.7 자바 : JAVA 11 빌드 : Gradle 템플릿 엔진 : Thymeleaf spring MVC 구조

💬 비동기 방식은 왜 필요할까?

HTML 파일을 전체 새로고침하게 되면 그 안에 있는 많은 script, jpg 등의 컨텐츠를 새로 불러와야 한다. CDN이나 많은 javascript 이벤트가 있을 경우 서버가 매우 버벅거릴 것이다.

댓글을 다는 경우에는 해당 댓글 파트만 변경이 되면 되는데 굳이 다른 파트까지 변경시키게 되는 것이다. 이는 심각한 자원 낭비이다. 따라서 비동기 통신으로 이를 처리한다.

✔ Ajax란?

** Ajax(Asynchronous JavaScript And XML)**

• 브라우저 내에서 비동기 기능(신호를 보냈을 때 새로운 html페이지를 로딩 할 필요 없이 동작 수행)을 제공하는 기법
• 동적으로 페이지를 변화 시켜주는 기능 즉, Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.

• 최근에는 XML 보다 JSON을 더 많이 사용한다.

동기 방식 vs 비동기 방식

• 동기 : 서버에 신호를 보냈을 때 응답이 들어와야 다음 동작 수행 가능
• 비동기 : 신호를 보냈을 때 응답 상태와 상관없이 동작 수행 가능
  • 자료를 요청할 때 클라이언트의 진행 시간을 기다릴 필요 없이 작업을 수행할 수 있다는 장점이 있다.
    

✔ Ajax 동작 방식

브라우저가 Data를 요청 및 전송한다. ex) 댓글로 예를 들면, 댓글 내용과 해당 댓글이 달린 글의 id값을 서버로 보낸다. 그리고 처리 결과를 받기를 기다린다.)

서버는 받은 Data를 로직을 따라 처리한다. 그리고 Json이라는 형식으로 다시 브라우저에게 Data를 전송한다.

브라우저는 처리 결과를 받고 event를 발생시켜 비동기적으로 html 파일의 일부를 변경시킨다.

이 때 Json 이라는 건 무엇일까? 데이터를 전달할 목적으로 사용하는 하나의 '형식' 중 하나이며 중괄호 ({})같은 형식으로 하고, 값을 ','로 나열하는 포맷이다.

실습으로 들어가보자!

🤗 실습

❗ 연관 관계 매핑

모임-좋아요, 회원-좋아요 테이블 관계는 모두 다대일 양방향 매핑으로 설정했다.

*JPA에서는 양쪽에서 단방향 매핑하는 방법으로 양방향 매핑을 구현한다.

❗ 좋아요 개수 출력하기(동기 방식)

게시글 "상세 페이지"에 들어갔을 때 현재 좋아요 개수가 출력(응답)되어야 한다.

흐름도는 위 사진과 같다.
CrewViewController

// 크루 게시물 상세 페이지
    @GetMapping("/view/v1/crews/{crewId}")
    public String detailCrew(@PathVariable Long crewId, Model model, @ModelAttribute("sportRequest") CrewSportRequest crewSportRequest,
                             @PageableDefault(page = 0, size = 1, sort = "lastModifiedAt", direction = Sort.Direction.DESC) Pageable pageable, Authentication authentication) {
            ...

        try {
            // 좋아요
            int count = likeViewService.getLikeCrew(crewId);
            model.addAttribute("likeCnt", count);

            // 상세게시글 정보
            CrewDetailResponse details = list.getContent().get(0);
            model.addAttribute("details", details);
            ...
            }

        } catch (Exception e) {
            return "redirect:/index";
        }

        return "crew/read-crew";
    }

crewId를 파라메터로 넘긴다.

LikeViewService

public int getLikeCrew(Long crewId){
        Crew crew = crewRepository.findById(crewId).orElseThrow(()->new AppException(ErrorCode.CREW_NOT_FOUND,ErrorCode.CREW_NOT_FOUND.getMessage()));
        List<Like> num = likeRepository.findByCrew(crew);
        return num.size();
    }

해당 crew가 가진 like를 list로 받고, list.size()를 출력

LikeRepository

public interface LikeRepository extends JpaRepository<Like, Long> {
    List<Like> findByCrew(Crew crew);
}

read-crew.html

<div id="likeCnt" th:text="${likeCnt}"></div> 

현재 crew가 가진 좋아요 개수를 출력한다.

❗ 좋아요 누르기(⭐비동기 방식)

"👍" 버튼을 눌렀을 때 Ajax를 이용하여 API를 호출한 후 그 결과로 비동기 방식을 통해 좋아요 개수가 변경되어야 한다.

아래는 좋아요 버튼까지 포함한 html코드 read-crew.html

<div align="center">
  <form class="container">
    <button type="button" class="btn btn-light btn-lg" id="like-btn" onclick="likeBtn(crewId)">👍
    </button>
    <tr><div id="likeCnt" th:text="${likeCnt}"></div> </tr>
  </form>
</div>

ajax

function likeBtn(crewId){
        $.ajax({
            type : "POST",
            url: '/view/v1/crews/'+crewId+'/like',
            success: function(data) {
                console.log(data);                 // likeResponse값
                if(data.likeCheck == 1){         // likeResponse.likeCheck로 값에 접근
                    alert("좋아요를 눌렀습니다💕")
                    $("#likeCnt").empty();
                    $("#likeCnt").append(data.count);
                }
                else if (data.likeCheck == 0){
                    alert("좋아요를 취소했습니다✔")
                    $("#likeCnt").empty();
                    $("#likeCnt").append(data.count);

                }
            },
            error: function (request, status, error) {
                alert("로그인 후 좋아요가 가능합니다.")
            }
        }) ;
    }

url이 호출된 후 흐름도는 다음과 같다 CrewViewController

// 크루 좋아요 누르기
    @PostMapping("/view/v1/crews/{crewId}/like")
    public ResponseEntity likeCrew(@PathVariable Long crewId, Authentication authentication) {
        LikeViewResponse likeViewResponse = likeViewService.pressLike(crewId, authentication.getName());
        return new ResponseEntity<>(likeViewResponse, HttpStatus.OK);
    }

LikeResponse

@Setter
@Getter
@AllArgsConstructor
@NoArgsConstructor
public class LikeViewResponse {
    private int likeCheck;    // like를 눌렀는지 확인하기 위한 필드
    private int count;          // 현재 likeCnt
    private String userName;  // 좋아요 버튼을 누른 회원의 이름
}

LikeService crewId와 userName을 파라메터로 넘겨받고, 해당 crew에 현재 로그인 되어있는 회원이 좋아요를 눌렀는지를 확인해본다.

@Transactional
    public LikeViewResponse pressLike(Long crewId, String userName){
        User user = userRepository.findByUserName(userName).orElseThrow(()->new AppException(ErrorCode.USERID_NOT_FOUND,ErrorCode.USERID_NOT_FOUND.getMessage()));
        Crew crew = crewRepository.findById(crewId).orElseThrow(()->new AppException(ErrorCode.CREW_NOT_FOUND,ErrorCode.CREW_NOT_FOUND.getMessage()));
        LikeViewResponse likeViewResponse = new LikeViewResponse();
        // 이미 좋아요한 상태라면 -> 좋아요 취소
        if(user.getLikes().stream().anyMatch(like -> like.getCrew().equals(crew))){
            likeRepository.deleteByUserAndCrew(user,crew);
            likeViewResponse.setLikeCheck(0); 

        } else {
            likeRepository.save(Like.builder().crew(crew).user(user).build());
            likeViewResponse.setLikeCheck(1);
                     ...
                }
            }
        }

        List<Like> num = likeRepository.findByCrew(crew);

        likeViewResponse.setCount(num.size());
        likeViewResponse.setUserName(user.getUsername());
        return likeViewResponse;
    }

LikeRepository

public interface LikeRepository extends JpaRepository<Like, Long> {
    void deleteByUserAndCrew(User user, Crew crew);

✔️ 결과 확인

좋아요를 처음 눌렀을 때 출력되는 json

좋아요를 다시 눌러서 취소할 경우 json

• 좋아요 버튼을 누르면 새로고침 없이 likeCnt의 값을 likeResponse의 count 값으로 변경하여 출력(비동기 방식)

참고 문헌

https://devlogofchris.tistory.com/14 https://lshdv.tistory.com/73 https://chaelin1211.github.io/study/2021/04/14/thymeleaf-ajax.html

자세한 코드는 깃허브에서 올려놨으니 참고해주세요 https://github.com/sanghee2359/WorkoutMate

• AWS EC2 인스턴스를 생성
• Xshell ssh 접속 프로그램으로 우분투 서버 접속
• docker 설치
• docker 컨테이너에 mysql 띄우기까지 과정을 정리할 것입니다.

📍 스팟 인스턴스 설정 이유 : 스팟으로 설정된 인스턴스는 서버가 갑자기 종료될 수 있다는 단점이 존재하지만, 가격이 t3.small기준 거의 1/6로 줄어들므로 가성비가 좋습니다! (약 3만원 -> 약 5천원)

1. AWS 인스턴스 생성

1. aws에서 EC2를 검색하고 들어가면 인스턴스를 생성하는 버튼을 볼 수 있습니다. 2. 인스턴스 생성하며 정보를 설정하는 화면입니다.

• 설정한 부분은 모두 박스로 표시
• 인스턴스 유형과 이름 설정 부분은 원하는대로 설정 해주세요👨‍🔧

마지막으로 고급 세부 정보에서 스팟 인스턴스 요청을 설정합니다

인스턴스의 ID를 클릭하면 더 많은 세부정보를 볼 수 있습니다

2. Xshell 연결

1. xshell 설치 후 파일 새로 만들기 2. 인스턴스 ID를 클릭해서 들어가고 퍼블릭 DNS 주소를 복사 3. xshell 세션 등록 정보 중 호스트 칸에 붙여 넣어줍니다. 4. 저장한 다음 새로 생성한 세션을 더블 클릭하면 아래의 화면이 띄워집니다 수락 및 저장을 누른 후 ec2의 인스턴스 이름을 적어주었습니다. 5. ec2를 생성하며 다운받았던 키페어를 찾아옵니다. 찾아보기 > 사용자 키 > 가져오기 키 선택 -> 확인

우분투 서버 접속이 확인되었습니다.

3. docker 설치

https://github.com/Kyeongrok/docker_minikube_kubectl_install 1. 위 깃허브에 접속해서 주소를 복사합니다. 2. xshell에 다음 명령어를 차례로 입력합니다.

sudo su -    // root 계정 변경
mkdir git    // 'git' 이라는 폴더 생성
cd git        // 'git' 폴더로 이동
git clone https://github.com/Kyeongrok/docker_minikube_kubectl_install 

git clone + (복사된 깃허브 주소) 명령어를 통해 깃허브의 Repository에 있는 파일을 내 로컬 컴퓨터로 복사했습니다.

cd docker_minikube_kubectl_install // 파일 이동
sh docker_install.sh                // docker 설치 스크립트 실행
docker -v                           // docker 버전 확인

버전이 보인다면 성공적으로 도커설치가 완료된 것입니다.

3_1. docker 컨테이너에 MySql 띄우기

1. docker 컨테이너 실행

docker run -p 3306:3306 -e MYSQL_ROOT_PASSWORD=(비밀번호) -d mysql

도커 옵션 설명

• -e environment : 컨테이너 내부의 환경변수를 설정
• -d Detached : 컨테이너를 백그라운드에서 동작하는 어플리케이션으로써 실행
• -p port : 포트 포워딩 설정 (docker 호스트의 포트번호 : 컨테이너 내에서 사용되는 포트번호) 위 설정은 호스트 시스템의 3306번 포트로 유입되는 트래픽을 모두 도커 컨테이너의 3306번 포트로 전달해줌으로써 컨테이너 외부와 내부를 연결해줍니다.

mysql docker image가 컨테이너 위에 잘 떠있는 것을 확인할 수 있습니다.
2. AWS 보안그룹 인바운드/아웃바인드 설정

AWS의 보안그룹에 올라가지 않은 포트는 방화벽에서 필터링되듯이 걸러지기 때문에 반드시 사용할 포트를 AWS 보안그룹에 추가해주어야 접근 가능합니다. 인바운드 규칙 편집 -> 규칙 추가 아웃바인드 규칙 편집 -> 규칙 추가

3_2. MySql Workbench 연결

1. mysql workbench를 설치한 후

2. Hostname에 ec2 퍼블릭 DNS 주소를 넣어줍니다.

3. xshell에서 docker MySql을 띄울 때 설정했던 비밀번호를 입력해줍니다.

    docker run -p 3306:3306 -e MYSQL_ROOT_PASSWORD=(비밀번호) -d mysql

mysql이 성공적으로 연결되었다면 성공적으로 workbench editor이 열립니다.

에러 로그

1_ 로그인이 안될 때 확인해 볼 것

• ec2의 인스턴스 생성할 때 AMI(Amazon Machine Image)가 ubuntu로 설정했었는지
• private key(.pem)를 맞게 설정했는지
• Xshell에서 로그인 할 때 로그인 할 사용자 이름을 ubuntu로 설정했는지

이전에 알아야 할 지식

• 토큰 인증 방식

  인증받은 사용자에게 토큰을 발급해주고,

  서버에 요청을 할 때 HTTP 헤더에 토큰을 함께 보내 인증받은 사용자(유효성 검사)인지 확인한다.

• Spring boot 예외처리 방식

  • @ControllerAdvice와 @RestControllerAdvice를 이용해서 컴포넌트를 생성하고 예외처리 메서드를 작성해놓으면 모든 클래스에 전역적으로 적용이 가능하다.

  • @ExceptionHandler을 통해 특정 컨트롤러의 예외를 처리한다.

Q. Spring Security에서 토큰을 검증할 경우, 예외가 발생한다면 기존에 사용 중이던 Custom Exception으로 처리가 될까?

A. 가능하다면 좋겠지만 불가능하다!

spring security와 spring boot 예외 처리구간이 다르다고 생각해보면 간단하다.

Filter는 Dispatcher Servlet 보다 앞단에 존재하며 Handler Intercepter는 뒷단에 존재하기 때문에 Filter 에서 보낸 예외는 Exception Handler로 처리를 못한다.

따라서, 토큰 예외처리를 위해선 새로운 Filter를 정의해서 Filter Chain에 추가해줘야 한다.

1. SecurityConfig 클래스 수정

public class SecurityConfig  {
    private final UserService userService;
    @Value("${jwt.token.secret}")
    private String secretKey;
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {
        return httpSecurity
                .httpBasic().disable()
                .csrf().disable()
                .cors().and()
                .authorizeRequests()
                .antMatchers("/api/v1/users/join", "/api/v1/users/login").permitAll()
                .antMatchers( "/api/v1/users/list","/api/v1/users/{userId}/role/change").hasAnyRole("ADMIN")
                .antMatchers(HttpMethod.GET,"/api/v1/posts/my", "/api/v1/alarms").authenticated()
                .antMatchers(HttpMethod.POST, "/api/v1/**").authenticated()
                .antMatchers(HttpMethod.PUT, "/api/v1/**").authenticated()
                .antMatchers(HttpMethod.DELETE, "/api/v1/**").authenticated()
                .and()
                .exceptionHandling()
                .authenticationEntryPoint(new CustomAuthenticationEntryPointHandler())
                .accessDeniedHandler(new CustomAccessDeniedHandler())
                .and()
                .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .addFilterBefore(new JwtTokenFilter(jwtProvider, redisTemplate), UsernamePasswordAuthenticationFilter.class)
                .build();

    }

addFilterBefore(Filter, beforeFilter)

beforeFilter가 실행되기 이전에 Filter을 먼저 실행시키도록 설정하는 메소드이다.

.addFilterBefore(new JwtTokenFilter(jwtProvider, redisTemplate), UsernamePasswordAuthenticationFilter.class)

그 외 추가한 메소드 설명

.exceptionHandling()
 // 인증 과정에서 예외가 발생할 경우 예외를 전달한다.
             .authenticationEntryPoint(new CustomAuthenticationEntryPointHandler())
 // 권한을 확인하는 과정에서 통과하지 못하는 예외가 발생하는 경우 예외를 전달한다.
             .accessDeniedHandler(new CustomAccessDeniedHandler())

메소드를 살펴보면 인가 과정의 예외 상황에서 CustomAccessDeniedHandler와 CustomAuthenticationEntryPointHandler 로 예외를 전달하고 있었다.

다음은 이러한 클래스를 작성하는 방법이다.

2. CustomAccessDeniedHandler클래스 생성

@Component
public class CustomAccessDeniedHandler implements AccessDeniedHandler {
    @Override
    public void handle(HttpServletRequest request, HttpServletResponse response, AccessDeniedException accessDeniedException) throws IOException, ServletException {

        // 4. 토큰 인증 후 권한 거부
        ErrorCode errorCode = ErrorCode.FORBIDDEN_REQUEST;
        JwtTokenFilter.setErrorResponse(response, errorCode);
    }
}

AccessDeniedHandler

액세스 권한이 없는 리소스에 접근할 경우 발생하는 예외

handle() 메소드를 오버라이딩한다.

3. CustomAuthenticationEntryPointHandler 클래스 생성

@Slf4j
@Component
public class CustomAuthenticationEntryPointHandler implements AuthenticationEntryPoint {
    @Override
    public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException, ServletException {
        final String authorization = request.getHeader(HttpHeaders.AUTHORIZATION);

        // 1. 토큰 없음 2. 시그니처 불일치
        if (authorization == null || !authorization.startsWith("Bearer ")) {
            log.error("토큰이 존재하지 않거나 Bearer로 시작하지 않는 경우");
            ErrorCode errorCode = ErrorCode.INVALID_TOKEN;
            JwtTokenFilter.setErrorResponse(response, errorCode);
        } else if (authorization.equals(ErrorCode.EXPIRED_TOKEN)) {
            log.error("토큰이 만료된 경우");

        // 3. 토큰 만료
            ErrorCode errorCode = ErrorCode.EXPIRED_TOKEN;
            JwtTokenFilter.setErrorResponse(response,errorCode);
        }
    }
}

AuthenticationEntryPoint

인증이 실패한 상황을 처리한다.

commence() 메서드를 오버라이딩해서 코드를 구현한다.

4. 예외처리

에러코드는 enum으로 관리한다

@AllArgsConstructor
@Getter
public enum ErrorCode {

    INVALID_TOKEN(HttpStatus.UNAUTHORIZED, "잘못된 토큰입니다."),
    EXPIRED_TOKEN(HttpStatus.UNAUTHORIZED, "만료된 토큰입니다."),
    INVALID_PERMISSION(HttpStatus.UNAUTHORIZED, "사용자가 권한이 없습니다."),
    FORBIDDEN_REQUEST(HttpStatus.FORBIDDEN, "ADMIN 회원만 접근할 수 있습니다.");

    private final HttpStatus httpStatus;
    private final String message;
}

JwtTokenFilter에 메소드를 추가로 작성해서 가독성을 높였다.

      /**
     * Security Chain 에서 발생하는 에러 응답 구성
     */
    public static void setErrorResponse(HttpServletResponse response, ErrorCode errorCode) throws IOException {
        response.setContentType("application/json;charset=UTF-8");
        response.setStatus(errorCode.getHttpStatus().value());
        ObjectMapper objectMapper = new ObjectMapper();

        ErrorResponse errorResponse = new ErrorResponse
                (errorCode, errorCode.getMessage());

        Response<ErrorResponse> error = Response.error(errorResponse);
        String s = objectMapper.writeValueAsString(error);

        /**
         * 한글 출력을 위해 getWriter() 사용
         */
        response.getWriter().write(s);
    }

JwtTokenFilter의 전체 코드를 추가겠습니다

@RequiredArgsConstructor
@Slf4j
public class JwtTokenFilter extends OncePerRequestFilter {
    /**
     * request 에서 전달받은 Jwt 토큰을 확인
     */

    private final String BEARER = "Bearer ";
    private final JwtProvider jwtProvider;
    private final RedisTemplate redisTemplate;



    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {

        String token = request.getHeader(HttpHeaders.AUTHORIZATION);
        log.info("First Authorization = {}", token);
        request.setAttribute("existsToken", true); // 토큰 존재 여부 초기화
        if (isEmptyToken(token)) request.setAttribute("existsToken", false); // 토큰이 없는 경우 false로 변경

        //쿠키 값 셋팅
        if (token == null) {
            Cookie[] cookies = request.getCookies();
            if (cookies != null) for (Cookie cookie : cookies) if(cookie.getName().equals("jwt")) token = cookie.getValue().replace("+", " ");
            else {
                HttpSession session = request.getSession(false);
                if (session == null || session.getAttribute("Authorization") == null) {
                } else {
                    token = session.getAttribute("Authorization").toString();
                }
            }
        }
        // 쿠키 조회했는데도 null이거나 'Bearer ' 로 시작하지 않으면 에러
        if (token == null || !token.startsWith(BEARER)) {
            log.info("Error At nullCheck Authorization = {}", token);
            filterChain.doFilter(request, response);
            return;
        }

        token = parseBearer(token);
        log.info("After remove Bearer Authorization = {}", token);

        if (jwtProvider.validateToken(token)) {
            // Redis 에 해당 accessToken logout 여부 확인
            String isLogout = (String)redisTemplate.opsForValue().get(token);
            log.info("isLogout?:{}",isLogout);

            if (ObjectUtils.isEmpty(isLogout)) {
                // 토큰이 유효할 경우 토큰에서 Authentication 객체를 가지고 와서 SecurityContext 에 저장
                Authentication authentication = jwtProvider.getAuthentication(token);
                SecurityContextHolder.getContext().setAuthentication(authentication);

            } else if(isLogout.equals("logout")) {
                MakeError(response,ErrorCode.INVALID_PERMISSION);
                filterChain.doFilter(request, response);
                return;
            }
        }
        log.info("finish add Authorization to Security ContextHolder= {}", token);
        filterChain.doFilter(request, response);
    }

    private boolean isEmptyToken(String token) {
        return token == null || "".equals(token);
    }

    private String parseBearer(String token) {
        return token.substring(BEARER.length());
    }

    /**
     * Security Chain 에서 발생하는 에러 응답 구성
     */
    public static void setErrorResponse(HttpServletResponse response , ErrorCode errorCode) throws IOException {
        response.setContentType("application/json;charset=UTF-8");
        response.setStatus(errorCode.getHttpStatus().value());
        ObjectMapper objectMapper = new ObjectMapper();

        ErrorResponse errorResponse = new ErrorResponse
                (errorCode, errorCode.getMessage());
        Response<ErrorResponse> resultResponse = Response.error(errorResponse);

        // 한글 출력을 위해 getWriter()
        response.getWriter().write(objectMapper.writeValueAsString(resultResponse));
    }
}

필터 클래스를 직접 만들어 사용할 때 만약 filterChain.doFilter() 메소드를 호출해주지 않으면 다음 필터로 넘어가지도 않을 뿐더러 서블릿으로 요청이 가지도 못한다는 것에 주의해야 한다.

• JwtTokenFilter는 JWT토큰으로 인증하고 SecurityContextHolder에 추가하는 필터를 설정하는 클래스.
  • HttpServletRequest에서 토큰 추출
  • 토큰에 대한 유효성을 검사 > 유효하다면 Authentication 객체를 생성해서 SecurityContextHolder에 추가

필터 수행 순서 : JwtTokenFilter > UsernamePasswordAuthenticationFilter => Dispatcher Servlet

마무리

시큐리티를 처음 설정할 땐 낯설게 느껴지지만 핵심적인 클래스와 메서드를 짚어보면 큰 그림이 그려진다.

어려운 내용을 만났을 때 잘 모르고 다음으로 넘어가는 것보다 이렇게 하나씩 정리해두면

두고두고 이용해먹을 수 있겠다.

[참고문헌]

Security Filter에서 발생하는 Exception 처리하기

[Spring Boot] JWT 토큰 만료에 대한 예외처리

스프링부트핵심가이드(397~403) [Spring] 스프링 Filter, DoFilter 스프링 필터와 스프링 시큐리티(Spring Security)의 동작 구조