coding/Project

[Django] Clone Coding - 01 - 장고 화면 뛰우기! (제로부터 시작하는 인스타그램)

양한마리 2022. 9. 28. 15:39
728x90




프로젝트 목표

  1. 클론 코딩을 통해서 전체적인 프로젝트 개념 이해하기
  2. 다양한 기능들을 이용해서 실제로 사용되는 사이트 구성 및 기능 이해하기
  3. 목표를 설정하고 목표까지 가는 과정에대해서 이해하기

프로젝트 구현 기능 리스트

  • 피드 생성
  • 피드 목록 불러오기
  • 회원가입
  • 로그인
  • 좋아요
  • 댓글
  • 북마크
  • 프로필 페이지
  • 프로필 사진 변경
  • 피드 목록 필터 조회



목차


01. 장고 화면 뛰우기

  • [ 가상환경 생성 ]
  • [ 가상환경 접속 ]
  • [ 가상 환경 적용 모습 ]
  • [ 장고 설치 ]
  • [ 깃 허브 New Repository 생성 ]
  • [ 깃허브 연결하기 ]
  • [ 깃 허브 .gitignore 설정하기 ]
  • [ 깃 허브 requirements.txt 설정하기 ]
  • [ 장고 프로젝트 생성 ]



01.  장고 화면 뛰우기


[ 장고 프레임워크 설치 ]

pip install djangorestframework 라는 명령어로 Django REST 프레임워크를 설치해준다. 

:: Terminal ::

:: Terminal ::

pip install djangorestframework

:: Terminal ::

[ 템플릿 생성 ]

  • templates 폴더를 생성한다.
  • 해당 폴더 안에 farmstagram(어플리케이션 명) 이라는 폴더를 생성한다.
  • 맥북 유저거나 파이참이 아니고 비주얼스튜디오코드를 사용한다면 아래 설정을 추가로 해줘야한다.
  • farmstagram/settings.py 를 열어준다.
  • TEMPLATES 부분에 'DIRS': [] -> 'DIRS': [BASE_DIR / 'templates'] 수정해준다.

:: farmstagram/settings.py ::

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
       #'DIRS': [],                       # 변경 전
        'DIRS': [BASE_DIR / 'templates'], # 변경 후
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

:: farmstagram/settings.py ::

[ 장고에 뛰어줄 html 생성 ]

생성한 템플릿 안에 폴더를 생성해줬으면 그안에 main.html 을 생성해준다.

:: templates/farmstagram/main.html ::

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> 제목 </title>
    </head>
    <body>
        <h1>
            제목 텍스트
        </h1>

        <p> 일반 텍스트 </p>

        <img src="https://cdn.nbntv.co.kr/news/photo/202209/993581_107276_4449.gif" />

        <div>
            <button> 버튼 </button>
        </div>
    </body>
</html>

:: templates/farmstagram/main.html ::

[ views.py 생성 ]

  1. farmstgram 폴더안에 views.py를 생성 한다.
  2. 아래 코드를 넣어준다.

:: farmstagram/views.py ::

from django.shortcuts import render
from rest_framework.views import APIView


class Sub(APIView):
    def get(self, request):
        print("get 으로 호출")
        return render(request, "farmstagram/main.html")

    def post(self, request):
        print("post 으로 호출")
        return render(request, "farmstagram/main.html")

:: farmstagram/views.py ::

[ urls.py 수정 - views.py url 연결하기 ]

  1. 상단에 from .views import Sub 추가하기
  2. urlpatterns 안에 path('main/', Sub.as_view()), 추가하기

:: farmstagram/urls.py ::

"""farmstagram URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from .views import Sub # 추가

urlpatterns = [
    path('admin/', admin.site.urls),
    path('main/', Sub.as_view()), # 추가
]

:: farmstagram/urls.py ::

[ 데이터베이스 연결하기 ]

터미널에 python3 manage.py migrate 명령어를 적어준다.

:: Terminal ::

python3 manage.py migrate # 데이터베이스 적용하기

# makemigrations # 데이터베이스 수정사항 알려주기 (체크포인트)
# migrate # 데이터베이스 첫 적용하기 or 수정사항 적용하기

:: Terminal ::

[ 장고 서버 연결하기 ]

터미널에 python3 manage.py runserver 명령어를 적어준다.

:: Terminal ::

python3 manage.py runserver # 장고 서버 실행 

# python3 manage.py runserver                    # 127.0.0.1:8000
# python3 manage.py runserver 5000               # 127.0.0.1:5000
# python3 manage.py runserver 192.168.0.10:5000  # 192.168.0.10:5000

# 실행시 성공하면 아래 내용 출력

System check identified no issues (0 silenced).
September 28, 2022 - 05:56:27
Django version 4.1.1, using settings 'farmstagram.settings'
Starting development server at http://127.0.0.1:8000/ # 해당 링크로 접속
Quit the server with CONTROL-C. # 컨트로 + C 를 누르면 서버 접속 해제

:: Terminal ::

내가 만든 main.html 이 연결되어 접속 할 수 있다.

728x90
반응형