4.비동기통신(fetch)

1. 부분 로딩(Partial Reloading)

2. 사용자 경험 개선 (UX 향상)

• 사용자가 버튼을 클릭한 후 서버에 요청을 보내고, 그 동안 다른 작업을 계속 수행할 수 있다.

• 로딩 화면 없이 실시간으로 정보를 받아서 화면에 표시할 수 있다.

3. 서버 자원 절약

사용 방법(문법 )

1.get + 쿼리스트링

 let isSameUsername = true;
    async function sameCheck(){
        //1. username 가져오기
        let username =$("#username").val();
        //2. fetch로 통신하기()
        let response = await fetch(`/user/samecheck?username=${username}`,{});
        let responseBody = await response.json();

        //3 중복됐으면 ->isSameUsername = true
        //4 중복안됐으면 -> isSameUsername = false; ->usernmae input을 readOnly
        if(responseBody.body){
            isSameUsername =true;
            alert("중복된 유저네임이예요");

        }else {
            isSameUsername =false;
            alert("사용할 수 있는 유저네임이에요");
            $("#username").attr("readonly",true);
        }
        //
    }

2.post

//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").prepend(replyItem(responseBody.body));
        $("textarea").val("");
    }

//인터셉터 api를 낙아챔
    @PostMapping("/api/reply")
    public ResponseEntity<?> save(@RequestBody ReplyRequest.SaveDTO saveDTO){
        User sessionUser = (User)session.getAttribute("sessionUser");
        ReplyResponse.DTO replyDTO =   replyService.댓글쓰기(saveDTO, sessionUser);
        return ResponseEntity.ok(Resp.ok(replyDTO));

    }

JSON과 Form Data의 차이점 요약:

• Form 데이터: application/x-www-form-urlencoded나 multipart/form-data 형식으로 데이터를 전송하며, 서버에서 이를 처리하려면 각각의 필드에 매핑해야 합니다 (@RequestParam, @ModelAttribute 등 사용).

• JSON 데이터: application/json 형식으로 데이터를 전송하며, @RequestBody를 사용하여 하나의 객체로 받을 수 있습니다.

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

        //2. 비영속 댓글 객체 만들기
        Reply reply = saveDTO.toEntity(sessionUser, board);

        //2. 댓글 저장
        replyRepository.save(reply);

        return  new ReplyResponse.DTO(reply);

    }