Blogs App _ 동적 페이지 만들기

현재 우리의 페이지는 글로만 이루어져 있다.

이런 블로그는 아무도 관심을 가지지 않는다! 읽는 재미도 없다.

따라서 우리는 각 게시글에 사진을 올릴 수 있는 기능을 만들 예정.

 

그전에, 동적 페이지 / 정적 페이지라는 개념이 있다.

이게 뭔디?

정적 페이지 : 정적인 거! 사전에 준비된 데이터밖에 띄워주지 못함.

동적 페이지 : 동적인 거! 활발한 거! 사전 준비 데이터 이외에 이용자가 입력한 데이터도 띄워줄 수 있음.

으로 생각하면 쉽겠다.

 

우리는 일반 이용자도 게시글과 사진을 올리게 해 줄 테니 나름 동적인 페이지라고 할 수 있다. 와우!

---

동적인 페이지를 향한 첫 번째 발걸음. 

1. static 폴더 만들기

 

blogs 앱 안에 static이라는 폴더를, 그 안에는 image라는 폴더를 만들자.

image 파일은 올리고 싶은 사진을 아무꺼나 넣어주자.

 

2. template에서 static 사용하기.

글 목록이 표시되는 페이지에 해당 사진을 넣어보도록 하자.

post_all.html

맨 위 두 줄을 보면 된다!

{% load static %}을 통해 staic 파일과 폴더를 사용할 수 있도록 템플릿 상에 불러와줬다.

 

이미지를 불러오기 위해 img태그를 사용한 건 익숙하지만... 

src로 static을 사용하기 위해 템플릿 태그 {%%} 를 사용해줬다!

즉 static의 image폴더의 파일 명 ← 요 녀석을 불러와달라...고 요청한 것!

 

으잉? 이미지를 불러오는 데 실패할 경우 자동적으로 저런 사진이 뜬다. 

당황하지 말고 서버를 한 번 껐다가 다시 runserver!

 

사진이 엄청 큰 것 같긴 하지만... 어쨌든 성공!

 

3. settings 설정하기

settings.py

settings.py에 요 두 줄을 추가해주자!

 

STATIC_URL → 요 놈은 우리가 static 요소들을 사용하기 위해 요청하는 URL.

STATIC_ROOT → 요 녀석은 배포 단계에서 앱 별로 흩어져있는 static 요소들을 한 곳에 모아주기 위한 것.

배포 시 collectstatic을 통해 설정해준 STATIC_ROOT 경로로 한 번에 모아서 관리한다.

 

4. model에서 image 파일 받기

게시글을 작성할 때 사진도 첨부할 수 있으면 얼마나 좋을까!

 

models.py

게시글을 담당하는 Post 모델 안에 image 필드를 만들어주자.

 

저 한 줄 적었는데 에러가 나온다!

당황하지 않고 읽어보니 pillow라는 녀석을 설치하란다. 해주자.

모델 필드에 새로운 녀석을 추가했으니 makemigrations - migrate 세트도 착착.

 

그럼 이렇게 Admin 페이지에서 Post를 추가할 때 Image 파일을 넣을 수 있는 공간이 생긴다.

 

5. form에서 Image 파일 받기

Admin에서밖에 Image 파일을 추가할 수 없다면... CRUD를 구현한 의미가 없다.

이용자가 게시글을 생성할 때, 즉 C / U 단계에서도 Image를 입력할 수 있도록 하자.

 

forms.py

이용자가 게시글을 입력할 때 사용되는 틀인 PostCreateForm에서 image 필드도 입력받도록 하자!

 

post_form.html

다음으로 게시글을 작성하는 post_form.html에서 form 태그 속성으로enctype="multipart/form-data" 를 넣어주자.

이를 통해 첨부한 파일이 form을 통해 제대로 넘어갈 수 있도록 한 것!

 

제일 밑에 form.image를 적어 Image도 제출할 수 있도록!

 

views.py

게시글을 작성하는 PostCreateView에서 PostCreateForm에 담긴 FILES도 함께 넣어주면 된다!

 

6. settings / urls 작성

settings.py

settings에서 아까 적은 static 밑에 요 녀석들도 적어주자.

static과 유사한 흐름! 이번에는 사용자가 media 파일들을 보기 위해 요청하면 사용된다.

 

urls.py

https://runchi.dev/ 참조! runchi에게 항상 감사를...

우리는 project 내에 urls.py를 만들어 include 했기 때문에 project의 urls.py에도 저 내용을 적어줘야 한다!

 

7. 게시글 detail에서 보여주기

마지막으로 제출받은 Image도 detail페이지에서 볼 수 있도록 하자.

 

post_detail.html

if 문을 통해 각 게시글에 image가 있을 경우 → 해당 게시글 이미지의 url을 띄워주기로!

 

blogs/post/이미지/

쨔쟌. 게시글을 작성할 때 첨부한 사진이 detail 페이지에서 잘 뜬다.