CRUD게시판_url에 id담아 넘기기

게시판 만들기에서 글을 쓰고 작성하기 버튼을 누르면 전체 목록을 조회할 수 있는 페이지로 넘어간다.
이 부분은 아주 간단하게 ajax에서 post방식으로 데이터를 보내고 성공 시 window.location.href = "list.html"를 통해 페이지를 넘어갈 수 있다.

전체 목록 조회 페이지에서 특정 게시글을 누를 경우 상세히 볼 수 있는 상세페이지로 넘어가는 부분이 관건이었는데,
특정 게시글의 id를 알아야 DB에서 해당 id에 대한 정보를 불러와 페이지에 뿌려줄 수 있으므로 onclick에 함수를 연결해 파라미터로 id값을 보내고 window.location.href = "detail.html?id=" +id 코드에 받은 id값을 넣어서 넘겨주었다.

이제 detail.html에서는 정보를 뿌려줄 때 id가 필요하므로 ajax에서 type은 get, url은 /api/memos/${id}이 된다. 그러나 detail.html의 웹페이지에는 detail.html?id=숫자 이런식으로 url이 형성되어있기 때문에 여기서 id값만, 즉 숫자만 뽑아서 ajax로 보내줘야할 것이다.

인터넷에서 발견한 이 코드는 url을 파라미터로 받아 {key: value}형태로 리턴한다.

function getURLParams(url) {
            var result = {};
            url.replace(/[?&]{1}([^=&#]+)=([^&#]*)/g, function(s, k, v) { result[k] = decodeURIComponent(v); });
            return result;
        }

현재 페이지의 url을 받아오는 방법은 window.location.href이고 return 값에서 value가 필요한 것이므로

$.ajax({
                type: 'GET',
                url: `/api/memos/${getURLParams(window.location.href)['id']}`,
                success: function (response) {

                    let message = response;
                    let id = message['id'];
                    let title = message['title'];
                    let username = message['username'];
                    let contents = message['contents'];
                    let modifiedAt = message['modifiedAt'];
                    addHTML(id, title, username, contents, modifiedAt);

                }
            })

이렇게 ajax로 보내주었다.
그렇다면 이에 대응하는 controller에서는

@GetMapping("api/memos/{id}")
    public Optional<Memo> detailMemo(@PathVariable Long id){
        return memoRepository.findById(id);
    }

주소에 변수값을 받아 이를 활용하는 @PathVariable어노테이션을 사용해주고 repository에서 id에 해당하는 정보를 findById로 받아온다. 이 때, 메소드의 자료형을 Memo로 했더니 빨간 줄이 떴다. Alt+enter를 누르니 저렇게 Optional로 알아서 바뀌었는데 그 결과 빨간 줄도 안뜨고 아주 잘 실행이 되었다.

참고 | [JavaScript] 다음 페이지에 값 전달하기
참고 | [JavaScript] URL Parameter parsing (파라미터 가져오기)
참고 | [JavaScript] 현재 페이지의 url 가져오기