Blog-v3(리팩토링),CDN,댓글 작성하기

CDN(Content Delivery Network)

💡

CDN(Content Delivery Network)은 전 세계에 분산된 서버 네트워크를 통해 웹 콘텐츠를 더 빠르고 효율적으로 사용자에게 전달하는 시스템입니다. CDN은 웹사이트의 성능을 향상시키고, 로딩 속도를 개선하며, 트래픽 부하를 분산시켜 서버 과부하를 방지하는 데 중요한 역할을 합니다.

주요 기능 및 작동 원리:

1. 분산된 서버 네트워크: CDN은 전 세계 여러 지역에 위치한 서버들로 구성됩니다. 이를 "엣지 서버"라고도 부르는데, 사용자의 위치에 가까운 서버에서 콘텐츠를 제공하여 더 빠른 응답 시간을 제공합니다.

2. 캐싱: CDN은 정적 콘텐츠(이미지, CSS, JavaScript 파일 등)를 캐싱합니다. 사용자가 웹사이트에 접근할 때, CDN 서버는 원본 서버에 요청하기 전에 사용자에게 가장 가까운 엣지 서버에서 캐시된 콘텐츠를 제공합니다. 이를 통해 웹사이트의 로딩 시간을 줄일 수 있습니다.

3. 콘텐츠 가속: 동적 콘텐츠는 캐시하기 어려울 수 있지만, CDN은 네트워크 경로를 최적화하여 동적 콘텐츠의 전송 속도를 높입니다. 이를 통해 사용자 경험을 개선할 수 있습니다.

4. 트래픽 부하 분산: CDN은 여러 서버에 웹사이트 트래픽을 분산시키므로, 특정 서버에 트래픽이 몰리는 것을 방지하고, 서버 다운타임을 최소화할 수 있습니다.

5. 보안: CDN은 DDoS 공격을 방어하는 데도 효과적입니다. 분산된 서버 네트워크를 통해 트래픽을 분산시키기 때문에 특정 서버에 과도한 트래픽이 집중되지 않도록 보호할 수 있습니다. 또한, SSL 인증서도 CDN에서 관리하여 보안 연결을 제공합니다.

CDN을 사용하는 주요 이점:

• 빠른 콘텐츠 로딩 시간

• 전 세계 사용자에게 균일한 성능 제공

• 서버 부하 감소

• 대규모 트래픽 및 공격으로부터 보호

정리하자면, CDN은 웹사이트나 애플리케이션의 성능을 향상시키고, 전 세계적으로 빠르고 안전하게 콘텐츠를 제공하기 위해 사용하는 필수적인 기술입니다.

JQuery의 data() 메소드: 데이터 저장, 가져오기, 삭제 사용법

javascript
// 특정 요소에 데이터를 저장하는 방법
$('#myElement').data('key', 'value');

javascript
// 특정 요소에서 데이터를 가져오는 방법
var value = $('#myElement').data('key');
console.log(value); // 'value

javascript
$('#myElement').data({
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
});

html
<div id="myElement" data-key="initialValue"></div>
javascript

// 이미 HTML에 정의된 data-* 속성을 가져올 수 있습니다.
var value = $('#myElement').data('key');
console.log(value); // 'initialValue'

javascript
$('#myElement').removeData('key');

순수 자바스크립트를 사용한 HTML5 data- 속성 처리 방법

html
<div id="myElement"></div>
javascript

// 데이터를 저장하는 방법
var element = document.getElementById('myElement');
element.setAttribute('data-key', 'value');

javascript
// 데이터를 가져오는 방법
var value = element.getAttribute('data-key');
console.log(value); // 'value'

javascript
// dataset을 사용하여 데이터 저장하기
element.dataset.key = 'value';

javascript
// dataset을 사용하여 데이터 가져오기
var value = element.dataset.key;
console.log(value); // 'value'

html
<div id="myElement" data-key1="value1" data-key2="value2"></div>
javascript

// dataset을 사용하여 여러 데이터 접근
var element = document.getElementById('myElement');

console.log(element.dataset.key1); // 'value1'
console.log(element.dataset.key2); // 'value2'

// 데이터를 수정하기
element.dataset.key1 = 'newValue1';
console.log(element.dataset.key1); // 'newValue1'

javascript
// 데이터 제거하기
element.removeAttribute('data-key');

BlogV3 리팩토링

1.Reply Package

1. reply

@Builder
    public Reply(Integer id, String comment, User user, Board board, Timestamp createdAt) {
        this.id = id;
        this.comment = comment;
        this.user = user;
        this.board = board;
        this.createdAt = createdAt;
    }

• 코드 설명

2. ReplyController

@PostMapping("/api/reply")
    public ResponseEntity<?> save(@RequestBody ReplyRequest.SaveDTO saveDTO){
       // System.out.println(1);
        User sessionUser = (User) session.getAttribute("sessionUser");
      //  System.out.println(2);
        ReplyResponse.DTO replyDTO = replyService.댓글쓰기(saveDTO, sessionUser);
       // System.out.println(7);
        return ResponseEntity.ok(Resp.ok(replyDTO));
    }

• 코드설명

3. ReplyRequest, ReplyResponse

public class ReplyRequest {

    @Data
    public static class SaveDTO{
        private Integer boardId;
        private String comment;
        //to Entitiy 사용하기!

        //insert into reply_tb(comment, board_id, user_id, created_at) values('댓글1', 5, 1, now());
        public Reply toEntity(User sessionUser, Board board){

            return Reply.builder()
                    .comment(comment)
                    .user(sessionUser)
                    .board(board)
                    .build();
        }
    }
}

• 코드설명

public class ReplyResponse {

    @Data
    public static class DTO{
        private Integer id;
        private String comment;
        private String username;

        public DTO(Reply reply) {
            this.id = reply.getId();
            this.comment = reply.getComment();
            this.username = reply.getUser().getUsername();
        }
    }
}

• 코드설명

4. ReplyService

 @Transactional
    public ReplyResponse.DTO 댓글쓰기(ReplyRequest.SaveDTO saveDTO, User sessionUser) {
        System.out.println(3);
        // 1. 게시글 존재 유무 확인
        Board boardPS = boardRepository.findById(saveDTO.getBoardId())
                .orElseThrow(() -> new ExceptionApi404("게시글을 찾을 수 없습니다"));

        System.out.println(4);
        // 2. 비영속 댓글 객체 만들기
        Reply reply = saveDTO.toEntity(sessionUser, boardPS);

        System.out.println(5);
        // 3. 댓글 저장 (reply가 영속화됨)
        replyRepository.save(reply);
        System.out.println(6);
        return new ReplyResponse.DTO(reply);
    }

• 코드설명

detail.mustache

 <!-- 댓글 -->
    <div class="card mt-3">
        <!-- 댓글등록 -->
        <div class="card-body">
            <!-- form태그는 부분리로딩을 할 수 없다. 기능만 돌아가게 하는 것이다.-->
            <form>
                <!-- 유저 정보는 무조건 session에서 가져와야한다.
                form 태그에서 꼭 hidden을 써야한다!!
                -->
                <input type="hidden" value="{{model.id}}" id="boardId">
                <textarea class="form-control" rows="2" id="comment"></textarea>
                <div class="d-flex justify-content-end">
                    <button onclick="saveReply()" type="button" class="btn btn-outline-primary mt-1">댓글등록</button>
                </div>
            </form>
        </div>

        <!-- 댓글목록 -->
        <div class="card-footer">
            <b>댓글리스트</b>
        </div>
        <div class="list-group" id="reply-box">

            {{#model.replies}}
                <!-- 댓글아이템 -->
                <div id="reply-{{id}}" class="list-group-item d-flex justify-content-between align-items-center">
                    <div class="d-flex">
                        <div class="px-1 me-1 bg-primary text-white rounded">{{username}}</div>
                        <div>{{comment}}</div>
                    </div>
                    {{#isOwner}}
                        <!-- 버튼타입으로 바꿔야한다. 이유는 submit이 되기 때문에-->
                        <button onclick="deleteReply('{{id}}')" type="button" class="btn">🗑</button>
                    {{/isOwner}}
                </div>
            {{/model.replies}}

        </div>
    </div>
</div>

<script>
    //1. 책임-> 디자인에 데이터를 바인딩 할 수 있다.
    function replyItem(reply){
        return `<div id="reply-${reply.id}" class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">${reply.username}</div>
                    <div>${reply.comment}</div>
                </div>
                <button onclick="deleteReply('${reply.id}')" type="button" class="btn">🗑</button>
            </div>`;
    }

    // 1. 책임 -> 통신해서 데이터 요청하고 응답받으면 CSR하기
    async function saveReply() {
        //1. Reply 객체 만들기 (id로 찾아서)
        let reply = {
            comment: $("#comment").val(),
            boardId: $("#boardId").val()
        };

        //2. fetch 요청하기
        let response = await fetch('/api/reply', {
            method: "post",
            body: JSON.stringify(reply),
            headers: {
                //들고가는 데이터를
                "Content-type": "application/json; charset=utf-8"
            }
        });
        let responseBody = await response.json(); // DTO!!
        console.log(responseBody);
        //3. CSR 하기
        //$("#reply-box")에서 #은 jQuery에서 특정 HTML 요소를 선택하기 위한 ID 선택자를 의미합니다. 즉, id 속성이 reply-box인 요소를 선택하는 것입니다.
        // 만약 #을 제거하고 $("reply-box")로 사용하게 되면, jQuery는 tag name으로 해석하게 되어 <reply-box>라는 HTML 태그를 찾으려고 시도할 것입니다.
        // 하지만 일반적인 HTML 표준에는 reply-box라는 태그가 없으므로, 원하는 요소를 찾지 못하게 됩니다.
        //따라서 id가 reply-box인 요소를 선택하려면 반드시 #reply-box로 사용해야 합니다. 만약 클래스 선택자라면 .을 사용하여 .class-name처럼 접근해야 합니다.
        $("#reply-box").prepend(replyItem(responseBody.body));
        $("textarea").val("");
    }


    // let boardId = $("#boardId2").data("hello");
    // console.log(boardId);

    //let boardId2 = document.querySelector("#boardId2").dataset.hello;
    //console.log(boardId2);

• 코드설명