💻 Today I Learned

URL Parameter 값 얻기

프론트 작업을 진행하던 중 게시글 목록들이 보이는 메인 페이지에서 특정 게시글을 선택했을 때 해당 게시글의 상세페이지로 이동하고, 상세 페이지에서는 해당 게시글의 데이터를 서버의 원격 API를 호출하여 가져와야했다.

그러기 위해서는 백엔드에서 url을 설계한대로 아래와 같이 게시글의 id 값을 url 파라미터로 같이 전달 해주어야 한다.

# articles/urls.py
urlpatterns = [
    path('', views.ArticleView.as_view(), name='article_view'),
    path('<int:article_id>/', views.ArticleDetailView.as_view(), 
]

먼저 JavaScript의 fetch 요청을 보내는 함수를 실행하여 게시글 목록들을 response를 받아오고 반복문을 돌려 게시글을 생성할 때 onclick 속성을 부여해서 실행될 함수 안에 id 값을 넣어주었다.

async function article_list() {
    const response = await get_articles()
    const data = await response.json()

    for (let i = 0; i < data.length; i++) {
        let id = data[i]['id']
        let title = data[i]['title']
        let comment = data[i]['comment_article']
        let category = data[i]['category']
        let user = data[i]['user']
        let date = data[i]['date']
        let time = data[i]['time']
        let like = data[i]['like']
        let views = data[i]['views']

        const article = `<tr>
                            <td>${id}</td>
                            <td>${category}</td>
                            <td align="left" id="article_id"token interpolation">${id})">${title} [${comment}]</td>
                            <td>${user}</td>
                            <td>${date}</td>
                            <td>${time}</td>
                            <td>${like}</td>
                            <td>${views}</td>
                        </tr>`
        const article_list = document.getElementById('article_list')
        article_list.insertAdjacentHTML('beforeend', article)
    }

그 다음 해당 게시글을 눌렀을 때 id값을 받아 게시글 상세 페이지로 이동하는 함수가 실행되고 함수가 실행되면서 전달받은 id 값을 url 파라미터로 넣어준다.

function replace_article_detail(article_id) {
    const url = `${frontend_base_url}/templates/main/article_detail.html?id=${article_id}`;
    location.href = url;
}

그리고 아래와 같이 백엔드 서버의 원격 API를 호출하여 데이터를 response로 받아오는 함수를 만들어 준 다음

async function get_article_detail(article_id){
    const response = await fetch(`${backend_base_url}/articles/${article_id}/`, {
        method: "GET",
    })
    return response
}

게시글의 상세 페이지로 이동하게 되면 위에서 만든 특정 게시글의 데이터를 백엔드 서버의 원격 API를 호출하는 함수가 실행되는데 이 때 들어갈 id 값을 어떻게 넣어줘야 할지 정말 고민을 많이 했다.

async function LoadDeatail(article_id) {
  	// 백엔드 서버에 해당 게시글의 id 값으로 데이터를 요청하는 함수
    const response = await get_article_detail(article_id)
    const data = await response.json()

    const title = document.getElementById('article_title')
    title.innerText = data['title']

    const author = document.getElementById('author_info')
    author.innerText = data['user'] + data['date'] + data['time']
    
    const views = document.getElementById('views')
    views.innerText = '조회수 : ' + data['views']
    
    const likes = document.getElementById('likes')
    likes.innerText = '추천수 : ' + data['like']
    
    const article_image = document.getElementById('article_image')
    article_image.src = `${backend_base_url}`+data['article_image']
    // article_image.setAttribute('src', `${backend_base_url}`+data['article_image'])

    const content = document.getElementById('content')
    content.innerText = data['content']
}

구글링을 하면서 방법을 찾던 중 window.location.search로 현재 위치의 url에서 Parameter 값을 얻을 수 있다는 것을 알게되었고, new URLSearchParams()로 URLSearchParams객체를 생성한 다음 .get()으로 해당 객체에서 Parameter를 추출 할 수 있었다.

// 현재 URL의 쿼리스트링 값을 가져옴 -> ex)?id=1
const url_str = window.location.search
// url_str의 URLSearchParams 객체를 생성
const urlParams = new URLSearchParams(url_str);
// URLSearchParams 객체에서 id 값만 추출 -> ex)1
const article_id = urlParams.get("id");