220120 TIL

CoderS·2022년 1월 20일
0

TIL DAY 161

오늘 배운 일

✔️ Django 웹 개발

1. 포스트 작성 페이지

이번에는 저번에 작성했던 django 폼을 처리하는 로직을 넣어서 밑에 있는 포스트 페이지를 완성시켜보겠다.

우선 시작하기전에 폼 처리 과정을 한 번 짚고 넘어가겠다.

첫 번째 과정은 유저가 폼을 작성하는 페이지를 서버의 요청한다는 것이다.

http://127.0.0.1:8000/posts/new/

위의 링크처럼 posts/new 로 들어오면 그건 곧 서버에 요청을 하는 것이니까 폼 처리과정의 첫 번째 단계인 것 이다.

이 때의 요청은 우리 서버에서 GET 방식으로 요청을 하게 된다.

모든 요청은 서버에 요구하는 것에 따라 몇 가지 방식으로 나뉘는데 그중 대표적인 것이 GET 과 POST 이다.

POST

  • 서버에 데이터 변경을 요청하는 방식

GET

  • 일반적인 조회 요청 방식

그럼 우리 costory 프로젝트의 post_form.html 을 보면...

post_form.html

이렇게 간단하게 작성이 되어있는데 앞에서 배웠던 폼에다가 속성으로 action 과 method 라는 것을 작성할 수 있었다.

action 속성 같은 경우에는 우리의 폼을 전달할 서버의 URL 을 적어주는 곳이다.

method 같은 경우에는 폼 데이터를 담아서 서버에 요청할 때 즉 서버에 전송할 때 어떤 방식으로 전송할 것인지를 적어주는 곳이다.

그리고 속성을 아무것도 적지않으면 기본적으로 action 에는 현재 URL 이 들어가게 되고 method 는 GET 을 사용하게 된다.

action 의 현재 URL 이란 뜻은...

전송 버튼을 누르면 현재 페이지의 URL 로 다시 요청을 하게 되는데 이 때는 폼 데이터인 {{form.as_ul}} 부분을 담아서 보낸다는 뜻이다.

그러면 이제 코드를 작성해보겠다. 밑에 코드를 참고하자!

method 를 post 라고 적어주었는데 이렇게 하면 데이터를 입력하고 전송을 누르게 되면 POST 방식으로 서버에 전송을 하겠다.

그리고 action 을 따로 적어주지 않았으니까 현재 URL 즉...

http://127.0.0.1:8000/posts/new/

위의 URL 로 데이터를 전송하게 될 것이다.

그리고 폼 태그 뒷 부분에 csrf_token 템플릿 태그를 써준다.

csrf_token 에서 csrf 는 (cross site request forgery) 의 약자로 교차 사이트 위조 검증 이라고 뜻한다.

쉽게 말하면 내가 하지 않은 요청을 내가 한 것처럼 위조하는 것을 방지하기 위한 보안 기술이다.

우리는 폼을 사용할 때는 django 가 제공하는 csrf 템플릿 태그를 사용한다.

템플릿 작성은 다 끝났다.

이렇게 작성한 폼에 유저가 데이터를 입려하고 전송을 눌러서 데이터를 서버에 보내는 것이 폼 처리의 두 번째 단계이다.

이 다음부터 이제 서버에서 데이터를 받아서 처리해 주는 단계인데, 로직을 작성하는 곳인 views.py 로 이동한다.

이제부터 서버에서 데이터를 받아서 처리하는 과정을 작성해보도록 하겠다.

시간하기 앞서 로직에 대해 간단하게 설명을 드리자면...

views.py

빨간줄로 그어져있는 request 요청이 POST 방식으로 들어오면 그 말은 즉 urls.py 에서 posts/new 로 POST 방식으로 요청이 온다면

urls.py

유저가 폼의 데이터를 작성하고 전송을 눌렀을 때...

views.py

위의 빨간줄이 그어져있는 코드를 추가해준다.

우리는 유저가 입력한 데이터를 가져와서 모델을 이용해서 데이터베이스에 저장하면 된다.

그러면 POST 요청에서 데이터를 가져와보겠다.

위에처럼 코드를 추가해준다.

이렇게 해주면 요청에서 데이터를 가져올 수 있다.

그 다음에 new_post 라는 변수에다가 다음과 같이 코드를 작성해준다.

그러면 Post 모델을 이용해서 데이터를 생성하고 이 생성한 데이터를 new_post.save() 해서 저장을 해준다.

이렇게 데이터를 저장하고 난 다음에 방금 저장했던 글을 보는 상세 글 보기 페이지 즉 디테일 페이지로 이동해보겠다.

다음과 같이 따라서 코드를 작성해준다.

간단하게 코드를 설명하자면 지금처럼 다른 URL 로 이동하도록 할 때는

이 redirect 라는 걸 쓰는데 redirect 는 말 그대로 다른 페이지를 연결해주는 함수이다.

이걸 쓸려면 코드 맨 윗부분에 from django.shortcuts import redirect 이렇게 적어준다.

그런데 이 두개가 중첩이 되서 하나만 써도 된다.

그리고 코드를 설명하자면...

원래 하이라이트 된 부분은 어디로 이동할지를 적어주는 부분인데 지금은 URL 의 네임을 적어주었다.

URL 을 문자열로 하드코딩하는 것보다는 URL 의 네임을 적어주는게 더 좋기 때문에 이런 식으로 적어주었다.

다음으로 urls.py 로 가면...

디테일 페이지로 이동할 때는 이런 식으로 post_id 가 필요했다.

views.py

그렇기 때문에 여기서는 post_id 를 데이터베이스에 저장될 데이터에 id 값을 이용해서 상세 보기 페이지로 이동시키는 것이다.

그리하여 새로 생성한 Post 모델의 id 값이 post_id 가 되는 것이다.

마지막으로 Post 가 아닌 경우도 써보겠다.

다음과 같이 작성해준다.

else 를 작성하고 코드를 보면 위에는 POST 방식이고 밑에는 GET 방식이라고 이해하면 된다.

보통 GET 방식은 유저가 데이터를 입력하기 전 그러니까 처음으로 posts/new 이 URL 로 접속을 하면 유저는 서버로 요청을 하게 된다.

그 요청이란 우리가 데이터를 입력할 수 있는 폼을 달라는 의미이다.

그러니까 서버에서 유저들이 데이터를 입력할 수 있는 폼을 돌려준다.

views.py 맨 아래에 있는 코드 두 줄을 잘라내서...

else 에 붙여넣어준다.

그럼 이제 코드가 잘 동작하는지 확인해보자!

터미널로 가서 서버를 실행시켜준다.

그리고 포스트를 생성하는 URL 인 posts/new 로 들어가준다.

http://127.0.0.1:8000/posts/new/

그리고 새로운 글을 작성해준다.

그리고 전송을 누르면...

이렇게 글이 작성되고 해당 글에 대한 상세 페이지로 이동한다.

목록으로 버튼을 누르면...

우리가 작성했던 글들이 잘 나타난다.

그런데 웹 페이지를 살펴보면 글 쓰기 버튼이 없다. 그럼 글 쓰기 버튼도 만들어준다.

그럼 다시 VSCode 로 돌아가서 post_list.html 로 간 다음에...

content 블록 바로 밑에다가 a 태그를 넣어준다.

href 를 /posts/new 로 적어준다.

그런데 이 posts/new 같은 경우에는 하드코딩 된 것이라 템플릿 태그 URL 을 편리하다.

post_list.html

그럼 다시 웹 페이지로 가서 posts 로 가서 새로 고침을 해주면...

이렇게 글쓰기 버튼이 있다. 눌러보면...

잘 동작되는 것을 확인할 수 있다.

그런데 글쓰기 버튼의 색깔이 너무 안보여서 CSS 를 적용해 보기 좋게 꾸며보겠다.

다시 post_list.html 로 가서...

그리고 다음과 같이 똑같이 작성해준다.

post_list.html

그리고 웹 페이지로 돌아가서 새로고침 해주면...

이렇게 예쁘게 버튼이 나타난다.

끝으로 :

  • 오늘은 포스트 페이지를 완성시켜 보았다.
  • 생각보다 오래걸렸고 많은 일들이 있어서 다시 한 번 공부해서 내 것으로 만들어야겠다.
profile
하루를 의미있게 살자!

0개의 댓글