Django 클론코딩으로 인스타그램을 ! 3탄

백엔드 시작 !

드디어 백엔드를 하나씩 구현해보자 ! 지난 포스팅들에서 html 를 이용해 보여지는 요소들과 화면을 구성했다

서버 없이 클라이언트에서 알아서 데이터를 생성하고 피드를 만들었기 때문에 정적 .. 이다 !

이번 포스팅에서는 모델을 정의하고 모델에서 데이터를 받아와 피드를 구성하도록 해보자 !

---

MTV

장고는 MTV 구조를 이루며 MTV는 각 Model, Template, View 를 의미한다

먼저 모델은 데이터의 형태를 의미한다 우리가 만든 프로젝트에서는 피드를 예시로 이해하면 된다

피드라는 모델은 프로필사진과 아이디, 본문사진과 본문내용, 좋아요수와 댓글이라는 데이터 모음으로 구성된다

---

모델 정의하기

장고에서 모델은 클래스로 표기한다

Instapp/models.py 파일 내 피드 클래스를 정의하자 !

from django.db import models

# Create your models here.
class Feed(models.Model):
    content = models.TextField()
    image = models.TextField()
    profile_image = models.TextField()
    user_id = models.TextField()
    like_cnt = models.IntegerField()

models 각 요소 옆의 필드 형태를 명시해준다

이처럼 모델을 만든 후 해야할 일은 바로 데이터베이스(DB) 를 만드는 일이다

데이터베이스는 데이터를 엑셀처럼 저장하는 파일이다

DB 내에 정의된 Feed 테이블을 만들려면 아래 코드를 치면 장고내에서 만들어준다 !

python manage.py makemigrations
python manage.py migrate

makemigrations 는 models.py 를 DB 에 반영하기 위한 스크립트를 작성하는 명령어이고

migrate 는 만들어진 스크립트를 실행하는 명령어이다 !

 

Django 는 기본적으로 sqlite3 를 DB 로 사용하고 있다

따로 설정하기 위해서는 settings.py 를 수정하면되는데 클론코딩 프로젝트는 내장 DB 를 사용할 것이다 !

---

내장 DB 관리하기

sqlite3 파일내 DB를 관리하고 싶어도 편집기 자체에서 이 기능을 지원하지 않는 경우가 있다

vscode 편집기를 기준으로 설명하면 아래 extension 을 설치하면되고

pycharm pro 는 data 메뉴를 통해 데이터베이스를 볼 수 있다

명령 팔레트 ( ctrl+shift+p )  선택하고 open database 를 선택한다

choose databaes from file 후 db.sqlite3 를 선택하면 우리의 DB 안을 살펴 볼 수 있다

우리가 작성하지 않은 다른 테이블은 장고에서 기본적으로 생성되는 테이블들이다

그중에 우리가 작성한 Feed 모델을 눌러보면 우리가 정의한 각 요소가 보인다

우리가 만들지 않은 ID 필드는 장고에서 모델을 만들면 primary key 역할을 하기 위해 자동 생성한다

1번부터 시작하여 고유의 번호를 가지며 식별을 위해 사용된다

 

수동으로 여기에 데이터를 추가해보자

instapp_feed 우클릭후 New Query (Insert) 옵션을 선택하여 values 를 채우면 된다

--SQLite 파일내 아래 코드를 작성한 후 ctrl+shift+Q 쿼리를 실행시키면 된다

-- SQLite
INSERT INTO instapp_feed (id, content, image, profile_image, user_id, like_cnt)
VALUES (1,"헉 성공?!","https://pbs.twimg.com/media/D4uU-sCUcAA6doH?format=jpg&name=900x900","https://t1.daumcdn.net/cafeattach/aVeZ/96bb985f315f63a2fe16120d8b0fec4b589ac4e9","suzy022",10);

우리가 작성한 쿼리가 테이블에 잘 작성된 것을 확인할 수 있다 !

MTV 를 3박자가 맞춰졌다 ! 지금까지 모델을 만들었고

지난 포스팅에서 보여지는 화면인 template/main.html 와 데이터를 처리하는 로직이 담긴 views 함수도 정의해두었다

---

MTV 구조를 적극 활용하기

우리는 지금까지 보여지는 화면에 데이터를 집어넣고 보여주는 식의 코딩을 했다

이를 계속 실행해도 값이 변하지 않는 ' 하드 코딩 ' 을 했다 !

 

서버에 따라 동적으로 데이터가 변하도록 .. 코드를 바꿔보자

우리가 만든 DB 에 데이터를 읽어와 보여준다면 현재 1 건의 피드를 생성할 것이다

앞서 배운 구조를 잘 생각해보면 view 파일을 유심히 !

from django.shortcuts import render
from rest_framework.views import APIView
from instapp.models import Feed

class Main(APIView):
    def get(self, request):
        feed_list = Feed.objects.all()
        return render(request, 'main.html',context=dict(feed_list=feed_list))

feed_list = Feed.objects.all() 는 앞서 만든 model 의 Feed 라는 모델 안에 있는 모든 데이터를 말한다

즉 feed_list 안에 Feed 모델의 모든 데이터를 넣는다고 이해하면 된다

추가된 context 를 살펴보면 사전형으로 데이터를 전달한다

render 에 우리가 이동하고 싶은 html 과 데이터를 넣으면 데이터가 이동한다고 이해하면 된다

 

하드코딩을 지우고 html 에 python 코드를 붙여 수정하자

html 에서 python 코드를 사용하기 위해서는 {% %} 를 사용하면된다

    <!-- feed -->
    <div class="main_feed">
      <div class="left_feed">
        {% for feed in feed_list %}
        <div class="feed_box">

          <div class="feed_name">
            <div class="profile_box">
              <img class="profile_img" src="{{ feed.profile_image }}">
            </div>
            <span class="feed_name_txt"> {{ feed.user_id }} </span>
          </div>

          <img class="feed_img" src="{{ feed.image }}">
          <div class="feed_icon">
            <div>
              <span class="material-icons-outlined">
                favorite_border
              </span>
              <span class="material-icons-outlined">
                mode_comment
              </span>
              <span class="material-icons-outlined">
                send
              </span>
            </div>
            <div>
              <span class="material-icons-outlined">
                turned_in_not
              </span>
            </div>
          </div>
          <div class="feed_like">
            <p class="feed_txt"> <b>좋아요 {{ feed.like_cnt }}개</b></p>
          </div>
          <div class="feed_content">
            <p class="feed_txt"> <b> {{ feed.user_id }} </b> {{ feed.content }} </p>
          </div>
          <div class="feed_reply">
            <span class="feed_txt"> <b> chew012 </b> 축하해 ~ </span>
            <span class="feed_txt"> <b> hoo486 </b> 멋찌다 ~ </span>
          </div>
        </div>
        {% endfor %}
      </div>

 

수정한 코드 일부를 보면 중괄호를 활용하여 값을 전달받는 것을 확인할 수 있다 !

기존의 데이터를 받아 생성하기 때문에 1 건의 피드만 생성되었다

DB 에 데이터를 추가하하면 더 많은 피드가 생성 될 것이다 !

---

DB 데이터만으로 피드 생성하기 !

 

오호 그럴싸 ~ 댓글은 아직 안고쳤다 ^^

 

모델을 만들고 모델에 데이터를 넣어 뷰를 통해 템플릿으로 이동시켰다 !

MTV 구조를 익숙하게 이해하고 활용하면 대부분의 조회 서비스는 만들기 어렵지 않다

 

다음 포스팅에서는 피드를 생성하는 기능을 구현하자 ! 벡엔드 뿌셔 !