19. 상세(detail) 페이지로 링크 추가하기

data_hamster·2023년 4월 25일

학습주제
상세(detail) 페이지로 링크 추가하기

학습내용
이제 목록의 question을 클릭하면, 링크가 연결되어 상세화면으로 연결되는 실습을 한다.



링크를 클릭해서 이동하는 것은 a 태그를 이용한다.

템플릿의 인덱스를 열어준다.

{{question}} 에 링크가 걸리면 된다.
<li><a href="/polls/1">{{question}}</a></li>


이렇게 링크가 활성화 되었다.

일단 a 태그의 주소가 모두 /polls/1로 연결된 모습을 볼 수 있다. 이제 연결되는 url을 각 question에 맞게 바꿔주면 된다. 바꾸는 것도 규칙적이므로, /polls/1에서 1부분을 바꿔주면 된다. 1 부분에는 question 의 id가 들어가면 된다.
따옴표 속에 변수를 넣을 때도 마찬가지로 중괄호 {{}} 두개를 사용한다.

<li><a href="/polls/{{question.id}}">{{question}}</a></li>


각기 다른 주소가 입력된 것을 볼 수 있다. 이렇게 url을 직접 경로를 적지 않고, 코드를 통해 얻는 방법도 있다.

urls.py 에서 path의 name을 이용하는 방법이 있다.


여기서 이 name='detail'을 활용한다.

<a href="{% url 'detail' question.id %}">
중괄호, %, url, url 이름, 넘겨줄 값 순으로 입력한다.

detail이라는 url은 하나의 숫자를 필요로 한다. 바로 question_id를 필요로 한다. 그래서 이 url 태그에 question.id를 함께 넘겨준다.


지금은 주소가 간단하기에 /polls/2 넣어주는 것과 똑같다고 생각할 수 있다. 나중에는 url 태그를 이용하는 것이 훨씬 편리하다.

Q&A -> 개발자 라운지 앱과 앱 이동시, 앱 내에 같은 이름을 사용하고 싶을 수 있다. 이때는 url 이름 앞에 앱 이름도 같이 넣는다.


이렇게 app_name = 'polls'로 설정하면, 앞으로 name='detail'을 사용할 때 앞에 polls를 붙여줘야 한다.

새로고침 시, 다음과 같은 오류가 발생한다.

app name을 지정해줬는데, 안붙혔기 때문에

detail이라는 url을 찾아오지 못했음.



다시 잘 찾아오는 것을 알 수 있다.

어려운 점


{% url 'polls:detail' question.id %}
에서 어디로 이동하는지 헷갈렸다. 왜냐면, 직접 주소를 입력했을 때는 그 뒤의 숫자값을 question_id 변수로 받아 테이블의 id에 접근 한 뒤 그 값을 얻어, detail.index를 통해 구현되었는데, a태그를 누를 시에는 뒤의 주소값을 입력받지 않았기 때문이다.

  • 따라서 url의 question.id -> urls.py의 path의 question_id에 대입되고, views.detail로 넘어가는 것 같다.

views.detail에선 링크, 직접입력 상관 없이 question_id가 생성되어 있으므로 이후 동작은 같다.

url은 이후 주소를 만들어줄 수 있기 때문에 더 편리한 것 같다.

임의로 100 숫자를 넣었다.

다음으로 이동할 링크 주소가 모두 100이 붙은 것을 알 수 있다.


직접 입력의 경우 정상적으로 동작하는 것을 알 수 있다.

profile
반갑습니다 햄스터 좋아합니다

0개의 댓글