인프런 커뮤니티 질문&답변

안녕하세요 강사님, 현재 태그를 누르면 포스트 목록 페이지 이동까지 구현을 성공한 상태입니다. (섹션 11에 올려주신 메인메뉴 수정 참고해서요 !)

섹션 11 영상이 아니라 앞서 설명해주실 때에는 장고서버에서 설명해주셨어서 (?) 약간 헷갈리는 부분이 있는데,

제가 이해하고 있는 게 맞는지 여쭤보고싶어서 질문 드립니다 !!

postdetail.vue 에 내용에 의해

serverPage(tagname) {
        console.log("serverPage()...", tagname);
        location.href = `/my_blog.html?tagname=${tagname}`;
      }

이렇게 태그를 누르면 `/my_blog.html?tagname=${tagname}`; 로 이동하게 해놨는데, (저는 ~/my_blog 에 postlist 컴포넌트를 위치시켜놔서 url 이 저렇습니다 !)

이러면 postlist.vue 에서 저 url 을 파싱해서

created () {
    const params = new URL(location).searchParams;
    // const paramTag = params.get('tagname');
    this.tagname = params.get("tagname")
    this.fetchPostList()
  },

tagname 을 추출하는 것까지는 이해 했습니다 !

그 후에

fetchPostList() {
      console.log("fetchPostList()...", this.tagname);
      // 메서드 이름을 콘솔에 로깅하여 메서드가 호출되는 것 확인
      let getUrl = '';
      if (this.tagname) getUrl = `/api/post/list/?tagname=${this.tagname}`;
      else getUrl = '/api/post/list/';
        
      axios.get(getUrl)
      // axios를 사용하여 /api/post/list/로 HTTP GET 요청 보내기
      .then(res => {
        // 성공적인 응답의 경우 then 부분 실행
        // 서버로부터 받은 응답 데이터 는 res 매개변수 안에

        console.log("POST LIST GET RES", res);
        // 서버 응답을 콘솔에 로깅

        this.posts = res.data;
        // res.data 에 서버에서 받은 데이터가 있을 것
        // 이 데이터를 Vue 컴포넌트의 this.posts 데이터 속성에 할당

axios 를 통해 해당 태그에 맞는 데이터를 가져오는 것으로 이해 했습니다. 근데 여기서 getUrl = `/api/post/list/?tagname=${this.tagname}` 부분이 약간 이해가 안되어서요.

urlpatterns = [
    path('post/list/', views.ApiPostLV.as_view(), name='post_list'),
    path('post/<int:pk>/', views.ApiPostDV.as_view(), name="post_detail"),
    path('tag/cloud/', views.ApiTagCloudLV.as_view(), name='tag_cloud'),
]

django 에서 api 에 관련된 url 은 이렇게 지정을 해두었는데,

post list 에서 특정 포스트를 누르면 해당 포스트의 id를 추출해서 axios 를 통해 요청하는 url은 axios.get(`/api/post/${postId}/`) 이잖아요. 이부분은 위의

path('post/<int:pk>/', views.ApiPostDV.as_view(), name="post_detail"),

에서 <int:pk> 에 id 가 들어가는 거로 이해가 됩니다.

그런데 태그에 대한 목록 부분은, api/post/list 뒤의 부분은 정의(?)를 안해두었는데, 어떻게 오류없이 저 url 뒤의 태그를 알아서 인식하고 해당 태그에 대한 데이터를 보내주는 것인지 궁금합니다. 감사합니다 :)