03/23(Tue) findById와 window.location.search

🚩 로그인 기능을 제외한 CRUD를 구현한 페이지 만들기

 

 

어제 그리고 오늘 계속 해결이 안됐던 문제 2가지. 하루 온종일 해결을 못해서 결국 멘토님이 해결해주셨다.

모르는 게 너무 많아서 막막하고, 답답하다. 어제는 너무 힘들었는데 잘 넘어갔고 힘들게 얻어낸 것 정리 잘하고 넘어가자.

 

 

📕 폴더 구성

 

메인이 되는 페이지는 index.html 

글을 작성하는 페이지는 write.html  

게시글 상세조회 페이지는 detail.html

 

 

index.html은 전체 게시글이 보여지고, 그 중 한 게시글의 제목을 클릭했을 때는 detail.html로 넘어가서 게시글 제목, 작성자, 작성일, 내용을 보여주게 만들었다.

index.html에서 글쓰기 버튼을 클릭하면 글을 작성할 수 있는 write.html로 넘어가게 된다.

 

 

html 페이지 소개

 

📑 코드 흐름

1. 글쓰기 버튼을 클릭해서 write.html로 페이지가 넘어간다.

 

<nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active write" aria-current="page"><a href="write.html" class="write-link">write</a></li>
        </ol>
    </nav>

 

2. write.html에서 write버튼을 클릭하면 writeBoard()함수를 호출한다.

write.html

<div id="btn-done">
     <button type="submit" onclick="writeBoard()" class="btn btn-primary">write</button>
</div>

 

2-1. writeBoard()함수

 

function writeBoard() {
            let title = $('#inputTitle').val();
            let username = $('#inputUsername').val();
            let contents = $('#inputContents').val();
            
            let data = {'title':title, 'username':username, 'contents':contents};
            
            $.ajax({
                type: "POST",
                url: "/api/boards",
                
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (response) {
                    alert("글이 작성되었습니다.");
                    window.location.href="index.html";
                }

            })

        }

각 input태그들의 value값을 변수에 담아두고 이들을 data 변수에 JSON형식으로 담아둔다.

컨트롤러에 요청할 때 데이터를 함께 보낸다. 컨트롤러로부터 응답이 오면 index.html로 이동하게 한다.

 

 

3. index.html -> 특정게시글 클릭 -> detail.html 이동

 

index.html

 

index.html에서 '헬로월드!' 제목을 클릭하면

 

 

detail.html

 

게시글 제목을 클릭하면 detail.html로 이동하게 해뒀는데, 이 때 url에 id를 같이 쿼리로 넘긴다.

 

function addHTML(id, username, title, contents, createdAt) {
            console.log("addHTMl펑션에 들어왔음.")
            
            let tempHtml = `<div class="list_content">
                                <a  class="title-edit" href="detail.html?id=${id}" onclick="showOneList('${id}'>
                                    <strong id="${id}-title">${title}</strong>
                                </a>
                                <div class="info-edit">
                                    <p class="info-username" id="${id}-username">${username}</p>  |
                                    <span id="${id}-time">${createdAt}</span>
                                </div>
                            </div>`
            $('#list-box').append(tempHtml);

        }

 

 

 

4. 이 모든 고난이 여기서 시작되었다. detail.html

 

1) 고난 1

url로 id를 넘겨 줬는데, url에서 이 id를 가져오는 방법을 모른다.

방법을 찾다가 모르겠어서, a 태그에 showOneList(id)로도 id를 넘겨가며 이것저것 고쳐봤는데, 어떻게 넘기더라고 id 가져오는 방법을 못 찾았었다.

 

다시 url로 넘긴 id 가져오는 법을 코드로 보자.

 

$(document).ready(function() {
            $('#boards-box').empty();

            let id = window.location.search.split('=')[1];  //?id=2
            // "?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8"
            console.log(id);    //잘 나오고
            showOneList(id);
        })

detail.html에 들어왔을 때 실행되는 코드들.

 

그리고 url로 넘긴 id를 가져오는 코드 - window.location.search

이렇게 하면 "?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8" 이런식으로 url뒤에 쿼리로 넘긴 것들을 가져올 수 있다.

내 코드에선 id=2를 받게 된다. 여기서 나는 아이디 값만 필요하므로 ' = '를 기준으로 split()를 하고 인덱스[1]을 가져오면 아이디 값만 얻을 수 있다. 이걸 let id 변수에 담고 showOneList(id)에 id를 넘겨주면 된다.

 

 

2) 고난 2

 

showOneList(id) 함수를 살펴보자.

function showOneList(id){
            // id 잘 받아왔는지 확인해보자.
            console.log(`id: ${id}`)
            $.ajax({
                type: 'GET',
                url: `/api/boards/${id}`,
                success: function (resp) {
                    addBoardHTML(
                        resp.title,
                        resp.username,
                        resp.createdAt,
                        resp.contents
                    );
                }
            })
        }

 

컨트롤러에 id와 같이 요청을 했는데, 이것과 매치되는 컨트롤러 코드는 아래와 같다.

@GetMapping("/api/boards/{id}")
    public Board getOneBoard(@PathVariable Long id) {
        return boardService.readOne(id);
    }

 

 

서비스에서 readOne(id)함수를 호출했으므로 서비스 코드를 보자.

@Transactional(readOnly = true)
    public Board readOne(Long id) {
        log.info("id: {}", id);
        final Board board = boardRepository.findById(id).orElseThrow(
                () -> new IllegalArgumentException("해당 아이디가 존재하지 않는다.")
        );

        log.info("board: {}", board);
        return board;
    }

 

이 부분이 이해가 안됐다. 

final Board board = boardRepository.findById(id).orElseThrow(
                () -> new IllegalArgumentException("해당 아이디가 존재하지 않는다.")
);

repository에서 find by id를 하면 결과 값이 id 값 하나라고 생각했다. 이걸 board에 담으면, board에 있는 id 멤버변수만 설정 되는 거 아닌가 라고 생각을 하니, return 해서 board를 반환해봤자 컨트롤러는 id만 설정돼있는 board를 반환할 것이고, 컨트롤러는 이 board를 클라이언트에 응답해줄텐데 어떻게 결과값이 잘 찍히는 건지 이해가 되지 않았다.

 

이 부분을 팀원들께 여쭤봤더니, findById를 하면 id만 주는 게 아니라 그 아이디와 일치하는 데이터 한 행을 리턴해 주는 것이라고 하셨다. 오브젝트 형으로 반환이 된다고 하셨는데 그건 아직 무슨 의민지 모르겠다. 찾아봐야지.

진작에 팀원들한테 여쭤볼 걸...

 

다시 코드로 돌아가서 log.info를 보면 board에 어떤 값이 들어가있는지 확인해 볼 수 있는데, 이걸 확인해보자.

 

 

log.info("board: {}", board);

log.info한 모습

위에서 예시로 든 '헬로월드!' 게시글을 클릭했을 때 board에 들어있는 데이터 값.

이렇게 눈으로 확인하니까 이해가 잘 된다.