Django로 instagram 만들어보기 (3) - DB, CREATE UI

swb·2022년 11월 27일

목록 보기

3/11

0. ORM(Object Relational Mapping)

DB와 코드는 나뉘어져 있는데 DB에 데이터를 추가할 때 코드에도 추가를 해야하는 번거로움이 있다.
ORM은 그런 번거로움을 줄여줄 수 있다.
객체를 기반으로 움직이기 때문에 즉, 예로 코드에 user라는 클래스를 만들면 ORM이 자동으로 마이그레이션을 해줘서 DB에 user db가 생긴다.
또한 query를 안 써도 된다. 이런 걸 쿼리셋으로 부른다.
터미널에
python manage.py makemigrations
python manage.py migrate
django는 기본적으로 sqlite를 db로 가진다. 이 곳에 저장되는 것이다.

1. DB

/content/models.py

class Feed(models.Model):
    content       = models.TextField() # 글 내용
    image         = models.TextField() # 피드 이미지
    profile_image = models.TextField() # 프로필 이미지
    user_id       = models.TextField() # 글쓴이
    like_count    = models.IntegerField() # 좋아요 수

다음과 같이 테이블을 만들어 준다.
Pycharm Pro에서는 Database를 바로 사용할 수 있다.
데이터베이스 탭에서 내장된 sqlite를 불러오면 된다.
이미지는 보통 용량 때문에 URL로 저장한다.

2. 화면에 DB 내용 출력하기

/content/views.py

class Main(APIView):
    def get(self, request):
        feed_list = Feed.objects.all().order_by('-id') # 피드에 있는 모든 데이터를 가져옴(쿼리셋) = select * from content_feed, 최신 글을 위한 역순 출력
        
        return render(request, 'jinstagram/main.html', context = dict(feed_list=feed_list))

DB에 있는 내용을 가져온다.

main.html

{% for feed in feed_list %}
	{{ feed.image }}
	{{ feed.like_count }}
{% endfor %}

형태로 DB를 조회하여 화면에 뿌려준다.

사진 업로드를 위한 모달 창을 CSS로 생성한다.
jquery 사용이 필요한데 다음 코드를 삽입해 준다.

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

사진 업로드 이미지를 클릭하면 모달창 생성 및 스크롤바 없애기 - jquery이용

<script>
    $('#nav_bar_add_box').click(function () {
        $('.modal_overlay').css({
            display: 'flex' // 모달창
        });
        $(document.body).css({
            overflow: 'hidden' // 스크롤바 없애기
        });
    });
</script>