220111 TIL

CoderS·2022년 1월 11일

TIL django 코드잇 코딩

TIL DAY 154

오늘 배운 일

✔️ Django 웹 개발

1. 포스트 목록 페이지

이제 본격적으로 웹 사이트를 만들기 시작할 것 이다.

우린, 가장 먼저 홈페이지가 될 포스트 목록 페이지를 만들어주겠다.

스타트로 URL 구조로부터 시작하는데, posts 앱에 urls.py 를 잘 보면 우리가 미리 작성했던 URL 들이 보인다.

posts/urls.py

여기서는 전체 포스트 즉, posts 의 URL 을 구현할 것 이다.

위의 빨간색 줄로 그어져있는 부분만 주석을 해제시켜준다.

이 코드같은 경우에는 posts 들어오면, views.post_list 로 가라고 써있다.

아직 우리는 이 부분을 구현하지 않았다.

그리하여 views.py 로 가서 post_list 를 구현해주겠다.

views.py

def 을 해주고 post_list(request): 라고 해준다.

view 함수는 request 를 파라미터로 받는다. 다음으로 return 값으로

render(request, 'posts/post_list.html') 이라는 템플릿을 렌더링 해준다.

그런데 우리는 post_list.html 이라는 템플릿을 만든적이 없다.

그래서 posts 에다가 새로운 디렉토리를 생성해주고 전에 배운 템플릿 파일의 구조를 사용한다.

posts 앱 안에 templates 라는 디렉토리를 만들고 다시 앱 이름으로 된 posts 디렉토리르 만들어준다.

그러면 templates 에 있는 posts 아래에 새로운 파일을 만들어서 이름을 post_list.html 이라고 만든다.

다 만들고 나면 해당 루트는 밑에처럼 나타나야 한다.

그러면 우린 기본적인 html 구조를 잡아주겠다.

post_list.html

앞으로 이 구조를 자주 사용할 것 같아서 이 템플릿을 base.html 로 만들어주고 상속받아서 사용하도록 구조를 만들어주겠다.

그럼 마지막 posts 에 base.html 을 만들어준다.

그리고 post_list.html 구조를 복사해서 붙여넣기 해준다.

그리고 body 태그안에 포스트를 담아둘 블록을 만들어준다.

posts/base.html

그리고 post_list.html 로 가서 기본 html 코드를 삭제해준다.

다음으로 base 템플릿을 상속받도록 extends 를 해준다.

그리고 포스트들이 들어갈 블록을 지정해준다.

posts/post_list.html

잘 작성했는지 확인해보자!

개발 서버를 켜고 posts 로 이동한다.

터미널로 가서 해당 커맨드를 입력해준다.

python3 manage.py runserver

http://127.0.0.1:8000/posts 를 이동해주면...

h3 태그로 작성해준 문구가 잘 보인다.

그러면 작성이 잘 된 것이다.

그러면 이제 데이터를 가져와서 템플릿으로 전달하고 템플릿에서는 전달받은 데이터를 화면에 표시해주겠다.

다시 VSCode 로 이동해서...

posts 에 views.py 로 가서...

post_list 뷰의 데이터를 가져오는 로직을 넣어주도록 해주겠다.
데이터베이스와 소통할려면 모델을 갖고 와야한다.

views.py

위의 코드를 참고해서 Post 모델을 가져온다.

다음으로 posts 라는 변수에 모든 포스트들을 가져와서 넣어주고 context 에 사전형으로 담아서 템플릿을 전달하도록 해주겠다.

render 함수의 세 번째 파라미터로 context 를 넣어준다.

이제 post_list.html 로 돌아가서 우리가 받은 데이터를 화면에 표시해준다.

포스트 목록은 posts 를 키로 뷰에서 넘어왔으니, 템플릿 태그 for 를 사용해서 반복하면 되겠다!

밑에 코드를 참고해서 작성해준다.

post_list.html

다 완료했으면 웹 페이지를 새로고침 해본다.

뭔가 지저분하게 보여서 테이블을 사용해서 바꿔보겠다.

{% extends './base.html'%}

{% block post_container %}
    <h3>글 목록 페이지에요</h3>
    <table>
        <tr>
            <td>제목</td>
            <td>작성일</td>
            <td>수정일</td>
        </tr>
        {% for post in posts  %}
        <tr>
            <td>{{post.title}}</td>
            <td>{{post.dt_created}}</td>
            <td>{{post.dt_modified}}</td>
        </tr>
        {% endfor %}
    </table>
{% endblock post_container %}