[ToyPJ/Python] django 로 인스타그램 만들기 - 05 DB에서 피드 글 불러오기

현재까지는 html에 직접 피드를 생성해서 보여줬다. 피드를 5개 올리고 싶으면 5개의 피드 html 소스를 만들어야 된다. 즉, 현재까지는 서버 없이 클라이언트(프론트)에서 알아서 데이터를 생성해서 피드 리스트를 만들고 있다. 이제 이것을 백엔드 쪽에서 피드 데이터를 내려주도록 바꿔보도록 하자.

📌 01. DB를 구성하는 데에 필요한 필드 정하기

먼저 DB에서 피드 리스트를 불러와야 되니까 당연히 피드에 대한 DB를 만들어야 하는 것이 우선이다. 이 때, 먼저 고려해주어야 하는 것은 DB를 만드는 데에 필요한 피드의 필드를 정하는 것이다. 

🤔 하나의 피드를 구성하는 데에는 어떤 정보들이 필요할까?

• 피드 테이블 - 피드 ID, 프로필 사진, 글쓴이 이름, 피드 이미지, 글 내용
• 댓글 테이블 - 피드 ID, 댓글 작성자, 댓글 내용
• 좋아요 테이블 - 피드 ID, 좋아요한 사람, 좋아요 여부

피드를 구성하는데에 최소한으로 필요한 것들은 "프로필 사진, 작성자, 피드 이미지, 글 내용, 댓글 작성자, 댓글 내용, 좋아요한 사람, 좋아요 여부"이다. 이것을 세 개의 테이블로 나누어 구성하였고 하나의 피드는 하나의 피드 ID를 가지도록 구성하였다.
인스타그램에는 "좋아요"시스템이 있다. 좋아요는 한 사람당 한번 밖에 누르지 못하고, 취소가 가능하며, 좋아요를 눌렀거나 취소했을 때 실시간 적으로 피드의 좋아요 개수에 반영이 된다. 이러한 인스타그램의 시스템을 봤을 때, 특정 피드 ID에 좋아요를 한 사람은 누가 있는지, 좋아요 여부를 실시간적으로 파악이 가능해야 한다.

이처럼 서비스별로 요구되는 사항이 다르기 때문에 이것에 맞게 적절히 DB를 구성해야 한다.

📌 02. 모델(Model) 만들기

장고에서 DB를 사용하려면 MVT패턴 중 Model을 구성하면 된다. 먼저, 피드에 해당하는 모델을 만들었다.

텍스트 필드를 사용하는 이유는 DB를 만들 때 DB 내의 해당 필드에 어떤 데이터가 들어가는지 명시를 해주어야 하기 때문이다. 글 내용, 글쓴이와 같은 컬럼은 텍스트를 사용하는게 당연한 것으로 보이고, 프로필 이미지, 피드 이미지와 같은 컬럼은 파일을 넣어줄 수도 있지만 그렇게 되면 DB에 적재되는 크기가 커지기 때문에 파일 대신 이미지 주소를 넣는다. (DB 부하를 방지하기 위해 실제 이미지나 파일은 이미지 서버, 파일 서버에 올리고 DB에는 경로만 넣는다.) 

• TextField() : 해당 필드가 텍스트 필드에 적합하다면 사용
• CharField() : 해당 필드가 캐릭터 필드에 적합하다면 사용
• IntegerField() : 해당 필드가 숫자 필드에 적합하다면 사용
• FloatField() : 해당 필드가 실수 필드에 적합하다면 사용
• BooleanField() : 해당 필드가 Y/N True/False 값을 표현하는 데에 적합하다면 사용

html - model 안에 Feed 클래스

이제 만든 모델을 마이그레이션 해야하는데 터미널 명령어 "python manage.py makemigrations" 를 통해 마이그레이션 파일을 생성한다.

terminal - 마이그레이션 파일 생성

그 후 마이그레이션 파일을 실행시키는 명령어 "python manage.py makemigrations" 를 입력하게 되면 소스에 있던 객체 class들이 DB 테이블에 생기게 된다. DB는 장고가 디폴트로 사용하는 sqlite3를 자동으로 사용한다.

 

db.sqlite3 내의 content_feed가 방금 만든 테이블이다.

db.sqlite3 살펴보기

콘솔을 열고 SQL을 입력하여 현재 테이블에 어떤 것들이 들어가 있는지 확인할 수 있다.

SQL 명령어를 통해 앞서 생성한 DB 테이블을 조회할 수 있다.

DB에 필드를 2개 생성했다.

DB 테이블에 2개의 필드를 생성했다.

장고의 모델에 필드를 작성하고, db.sqlite3을 통해 만든 필드 안에 내용을 채워놓고 commit을 하게되면 모델을 만드는 과정의 큰 틀은 끝나게 된다. 이제 이 DB를 어떻게 불러가는지 공부해보자.

 

📌 03. View 이용해서 DB 내용을 Template으로 옮기기

지금부터는 DB 내에 피드 필드들을 채워넣고 그것들을 불러오는 작업을 해보기로 하자. 모델(models.py)에서 만든 DB에서 main.html이 있는 곳까지 데이터를 이동하는 역할은 뷰(views.py)가 수행한다.

이전에 render을 통해 브라우저에서 main.html을 읽을 수 있게 한 것처럼, 같은 방식으로 데이터를 넣어주어 model의 데이터를 사용 가능하다.

 

views.py

위의 소스에서 "feed_list = Feed.objects.all()" 은 모델을 활용하는 코드이다. 즉, 모델(models.py)에서 작성한 클래스 Feed 의 모든 내용을 불러오는 코드이다. "render(request, "hwangstagram/main.html", context=dict(feed_list=feed_list))" 는 "render에 우리가 이동하고 싶은 html(main.html)과 데이터(context=~)를 각각 넣으면 데이터가 이동한다."는 뜻이다. 

 

이제 뷰를 작성했으니 main.html에서 뷰를 호출 해주기만 하면 된다. for문을 통해, DB에 작성한 데이터의 개수 만큼 반복을 수행할 수 있어서, 여러 개의 피드를 표시하기 위해 작성한 html을 한 번만 작성하면 된다.

 

📌 04. html 수정해서 DB 데이터 불러오기

• models.py 안에 class Feed
• views.py 안에 class Main
  feed_list = Feed.objects.all() (모델에서 작성한 모든 객체들)
• urls.py 안에 Main.as.view (views.py에서 작성한 호출 방식 사용)
• 이제 main.html 에서 views.py 의 feed_list 불러오기

views.py에 넘어온 데이터는 중괄호 두개로 사용이 가능하다. 예를 들어 {{ feed_list }} 처럼 말이다.

또한 html에서 python 코드를 사용하기 위해서는 {% %}를 사용하면 된다. DB에 작성한 데이터의 개수만큼 반복을 수행하기 위해 for문을 사용하여 데이터(feed_list) 안에 feed를 하나씩 꺼냈고, for문이 끝나면 항상 {% endfor %}를 해줘야 한다.  

이렇게 모델을 만들고, 모델에 데이터를 넣어서 뷰를 통해 템플릿으로 이동시키게 되고, for문을 통해 데이터의 개수 만큼 반복을 수행하게 되면 하나의 html을 작성하더라도 데이터의 개수 만큼 화면이 보여지게 된다.

데이터의 개수만큼 피드가 만들어졌다.

 

 

 

📚 요약하자면,

장고는 모델을 만들고, 모델에 데이터를 넣어서 뷰를 통해 템플릿으로 이동시켜 웹사이트 화면을 구성하는 것이 가능하다.

그리고, 대부분의 조회 서비스는 이렇게 작동한다고 한다. 항상 백엔드와 프론트엔드가 어떻게 연동되면서 동작하는지 궁금했는데 이번 기회로 그 과정들을 살펴볼 수 있어서 좋았다. 다음 강의도 화이팅!

 

 

 

 

https://cholol.tistory.com/548

 

이 게시물의 모든 저작권은 마이쮸(mychew__)님께 있으며, 저는 오직 학습과 기록을 목적으로 포스팅한 것임을 알려드립니다.

좋은 강의 컨텐츠를 제공해주신 마이쮸님께 감사의 말씀 드립니다. (_ _)