[패스트캠퍼스python] 장고프로젝만들기 전체 순서/흐름도(ft.쇼핑몰)

💡 핵심 요약 (TL;DR)

장고프로젝만들기 전체 순서/흐름도(ft.쇼핑몰)의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. * 가상환경은 첫 사용시 한번만 설치하면 된다. 이미 설지채놓았다면 2번 가상환경 폴더만들기부터 진행하면된다.

차근차근 순서대로 Django와 python으로 쇼핑몰을 만들어보자.

1. Django 가상환경설정

1. 가상환경 virtualenv 설치하기 : pip3 install virtualenv
   • 가상환경은 첫 사용시 한번만 설치하면 된다. 이미 설지채놓았다면 2번 가상환경 폴더만들기부터 진행하면된다.
   • virtualenv는 일반적으로 글로벌 설치가 되어야하는 유일한 패키지이다. 나머지 패키지들은 가상 환경에 설치하기때문이다.
2. 가상환경 폴더만들기 : virtualenv 새로운파일명(보통은 env)
   • 새로운 프로젝트를 시작할때마다 새로운 가상환경을 설정해주는 것이 좋다.
   • 가상환경폴더는 보통 env라고 정하고 프로젝트 디렉토리 내부에 이를 만드는 것이 일반적인 관습이다.
   • 만약 git과 같은 버전 컨트롤 시스템을 사용한다면, env 디렉토리를 커밋에 포함시키면 안된다. 반드시 .gitignore 파일에 env 디렉토리를 추가해야한다.
3. 가상환경 들어가기 :
   1. cd 가상환경을 설치한 파일경로
   2. cd Scripts
   3. activate
4. 위에서 만든 가상환경 폴더 안에서 Django설치 : pip3 install django
   • 가상환경 안에 어떤 프로그램이 설치되어있는지 궁금할때는 pip list을 입력하면 된다.

2. 새로운 프로젝트와 앱생성

5. 새로운 프로젝트 생성하기 : django-admin startproject 새로운프로젝트명
6. app생성하기 : django-admin startapp 새로운앱명
   • 쇼핑몰이므로 user, product, order, delivery등의 app을 생성하면 된다.
7. 위에서 만든 모든 app에 각각 templates 폴더 생성
8. 만든 app을 app(프로젝트명과 동일한 이름)하위의 settings.py에서 Installed_app = []에 연결.
9. 만든 각각의 app하위의 models.py에 class와 그 안에 class Meta를 생성.
   • 아래는 쇼핑몰 user 예시코드이다.
   • 쇼핑몰이니까 user앱뿐만 아니라 product, order, delivery등의 각 app 하위에도 class와 class Meta를 생성한다.

class User(models.Model):
    email = models.EmailField(verbose_name='이메일')
    password = models.CharField(max_length=64, verbose_name='비밀번호')
    register_date = models.DateTimeField(auto_now_add=True, verbose_name='가입일자')

    class Meta:
        db_table='shop_user'
        verbose_name='고객'
        verbose_name_plural='고객'

3. Database 설정

10. DB에 변경이 필요한 사항 추출하기 : python3 manage.py makemigrations
    * 예를 들어 클래스를 만들었으면, 클래스에서 모델을 불러와 테이블 생성한다.
11. DB에 변경사항 반영하기 : python3 manage.py migrate
    * 예를 들어 클래스를 만들었으면, 위에서 불러온 테이블(클래스)에 칼럼 및 속성 추가 또는 반영한다.
    * 9번과 10번을 통해서 DB에 테이블 자동 생성이된다. sqlite3 db.sqlite3 명령어등으로 sqlite3를 만질 필요가 없이 장고가 알아서 다 해준다! 이 맛에 장고를 이용한다고 한다.
12. 첫 user생성하기 : python3 manage.py createsuperuser
13. 반영사항 체크하기 : python3 manage.py runserver

4. 부트스트랩 설정

14. 각 app의 templates폴더안에 html파일을 만든다.
    * user app의 templates폴더안에 base.html, index.html
    * product app의 templates폴더안에
    * order app의 templates폴더안에
15. templates폴더안에 html파일에 부트스트랩 css와 js를 복붙한다.
    * 부트스트랩 사이트
    * base.html에 부트스트랩 css코드와 js코드를 head태그안에 복붙한다.
    * index.html은 base.html을 상속받아서 활용한다.

아래는 base.html 코드이다.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 부트스트랩 css코드와 js코드 복붙 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <title></title>
</head>
<body>
    <div class="containner">
        {% raw %}{%block contents%}{% endraw %}
        {% raw %}{%endblock%}{% endraw %}
    </div>
</body>
</html>

아래는 index.html 코드이다. “base.html”를 상속받는다.

{% raw %}{%extends "base.html"%}{% endraw %}
{% raw %}{%block contents%}{% endraw %}

하이

{% raw %}{%endblock%}{% endraw %}

16. 부트스트랩스타일적용 : 프로젝트디렉토리 하위에 static 폴더생성 (app폴더들과 동급)-> 원하는 디자인 다운로드 후 폴더안에 넣기
17. html파일을 view.py에 연결하기.
    * 만든 모든 html파일은 view.py에 연결해야한다.
    * 예시로 위에서 만든 index.html을 view.py에 연결하는 방법은 아래와 같다.

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

18. usr.py에 연결하기.

#TIL패스트캠퍼스(파이썬웹개발)