1주차

생성일

2022/01/08 11:56

태그

Intro

1강. 무엇을 만들 것인지

>pinterest 따라 만들기 - 다양한 기능과 모바일 형태 등등

2강. 웹서비스 구조

django (feat. Pinterest) 로드맵

•

Front-End (JS, HTML, CSS)

•

Back-End (MariaDB, NGiNX, django, docker)

django 구축 방법

•

Account, Article, Project, Comment ....

→ 각각의 앱들이 이렇게 엮여서 구축 (앱 마다 JS, HTML, CSS 들어 있음)

docker 시스템 구성 : Back-End 프로그램들을 엮어서 구축

→ VULTR 가상 서버에 올리기

3강. 개발환경 셋업 : Pycharm

Pycharm 실행

→ terminal에서 pip list 확인

→ django 설치 (django-admin을 치면 명령어 확인 가능)

→ cd.. → django-admin startproject pragmatic (pragmatic은 프로젝트 이름)

폴더 열기해서 방금 만든 새 프로젝트를 열기.

setting을 해주어야 하는데

settings에 들어가서 Project:(프로젝트명) 으로 되어 있는 곳에 들어가

Python Interpreter 누름.

설정 모양 눌러서 add 누르고 확인 눌러 새로운 가상환경 설치 해주기.

다시 터미널을 켜서 아까처럼 pip list 확인, django 설치

→ python manage.py runserver 해서 연 서버로 django 활성화 확인.

4강. django 개발 패턴

>MVC 개발 패턴

Model View Controller

→ Model View Template (django)

*3개 각각 모델 구축에서 중요한 역할

•

Model : (django →←Database) (매칭)

Database (Row, Columns, Item, Attributes)

ex) django Article →← Database Row

•

View : (User (Request)→← Server (Response))

•

Template : User Interface (JS, HTML, CSS)

Django Tutorial

5강. 첫 앱 시작, 그리고 기본적인 view 만들기

3강에서 구축해 놓았던 프로젝트.

→ python manage.py startapp accountapp

→ pragmatic/settings → INSTALLED_APPS에 ‘accountapp’추가.

→ accountapp/views에 코드 만들기.

from django.http import HttpResponse

def hello_world(request):
    return HttpResponse('Hello world!')
Python
복사

(*HttpResponse에 대한 import를 해주어야하는데 HttpResponse에 alt+enter만 해주면 pycharm에서 자동으로 import 구문을 만들어 줌)

→ pragmatic/urls 수정.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('account/', include('accountapp.urls')),
]
Python
복사

→accountapp에 python file을 만들어줌. ‘urls.py’

from django.urls import path

from accountapp.views import hello_world

app_name = 'accountapp'

urlpatterns = [
    path('hello_world/', hello_world, name='hello_world')
]
Python
복사

→ python manage.py runserver

→ http://127.0.0.1:8000/account/hello_world/ 들어가보면

이렇게 서버가 구동되는 모습을 알 수 있다.

6강. Git 의 소개

•

Git : Version Control (버전이 변경됨에 따라 관리해주는 중요한 핵심)

Main Branch에 영향을 끼치지 않고 기존에 있던 것은 존재하고 버전업. (Branch Merge)

Team Work하기 매우 좋음.

•

Git Command - add, commit, push, pull, branch, checkout

•

Git 설치하기

7강. Gitignore 설정, 환경변수 분리, 첫 커밋

큰 pragmatic 폴더에서 .gitignore 파일 새로 만들기. (venv 폴더에 들어감)

→ .gitignore에 https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa3gybk9tWFJBYmdXMXdLLUV3c3RMMWVfdDYyUXxBQ3Jtc0ttNzJkRWNmTEtXeFdmUkhlb3QzNmpKUzBoUi1FUmhpQVJEb3RZWXpEOEFXTGF5NzRsRDJfVGhsUWhrekVKV1hHR1YyZ1M5aV9Qbk96aU5CRzBvdWh3V252Yk1CZVgzdGhFSWdCUlkwVTdzamVFa1ljWQ&q=https%3A%2F%2Fgithub.com%2Fgithub%2Fgitignore%2Fblob%2Fmaster%2FGlobal%2FJetBrains.gitignore 링크에 있는 스크립트 내용 복사 붙여넣기.

→ 맨 밑에 venv/ 를 써주게 되면 이 폴더 안에 있는 것들은 이제 추적하지 않게 된다.

pragmatic/settings 에 시크릿키가 있는데 이 것은 배포할 때 공개되면 안되기 때문에 따로 관리를 해주어야 한다.

→ pip install django-environ으로 environ설치

(https://django-environ.readthedocs.io/en/latest/getting-started.html)

→ settings에 코드 복사 붙여넣기.

from pathlib import Path

import environ
env = environ.Env(
    # set casting, default value
    DEBUG=(bool, Flase)
)
# reading .env file
environ.Env.read_env()
Python
복사

→ .env 파일 만들기.

DEBUG=on
SECRET_KEY=your-secret-key
DATABASE_URL=psql://urser:un-githubbedpassword@127.0.0.1:8458/database
SQLITE_URL=sqlite:///my-local-sqlite.db
CACHE_URL=memcache:///127.0.0.1:11211,127.0.0.1:11212,127.0.0.1:11213
REDIS_URL=rediscache://127.0.0.1:6379/1?client_class=django_redis.client.DefaultClient&password=ungithubbed-secret
Python
복사

→SECRET_KEY= 오른쪽 부분을 자신의 프로젝트 시크릿 키로 대체.

→settings에서 아까 건드렸던 코드 다시 수정.

from pathlib import Path

import os, environ
env = environ.Env(
    # set casting, default value
    DEBUG=(bool, Flase)
)

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# reading .env file
environ.Env.read_env(
    env_file=os.path.join(BASE_DIR, '.env')
)

SECRET_KEY = env('SECRET_KEY')
Python
복사

그리고 아까 했던 .gitignore 파일에서 시크릿 키도 추적되지 않게 .env를 추가해 준다.

깃 활성화는 맨 위 툴 창에 있는 vcs에서 enable~을 누르고 깃을 선택후 ok를 누르면 된다.

Git Bash나 하이퍼를 들어가서 편한거 사용.

→ 터미널에서 git status를 사용하면 추적해야하는 대상들이 뜨게 된다.

→ $ cd PycharmProjects/pragmatic/

→ $ git status

→ 하고 db.sqlite3, .idea/도 필요 없기에 ignore에 추가해준다.

→ git add . (아직 트랙되지 않은 모든 파일들을 트랙하겠다)

→ git commit -m “Initial commit”

→ git status 확인.

python manage.py runserver로 서버 구동 제대로 되는지 확인.

8강. 장고 Template의 extends, include 구문과 render 함수

pragmatic → accountapp → pycache와 pragmatic → pragmatic → pycahce를 없애준다.

git status로 지워진 것을 확인 후

git add . 을 해준다.

git commit -m "Delete redundant files”

git status로 확인.

마지막으로 gitignore에 __pycache__/ 를 친다.

>장고 템플릿

H yper

T ext

M arkup

L anguage

자주 쓰이는 구문 : extends / include

extends 는 미리 만든 구문을 블럭으로 나눔. (바탕을 깔아주는 느낌.)

include 만들고 있는 파일에 조각을 넣어서 가져다 붙이는 느낌.

새로운 디렉토리 생성. (new→ 디렉토리) 이름 templates

→ 그 안에 html 파일을 새로 만듦. git에 추가를 해주냐고 묻는데 추가한다.

views를 수정

def hello_world(request):
    return render(request, 'base.html')
Python
복사

경로 설정을 해주어야 한다. pragmatic/settings에 TEMPLATES 안에 DIRS 설정.

'DIRS': [os.path.join(BASE_DIR, 'templates')],
Python
복사

base.html 파일에 body 부분에 Hello world! 를 쳐주면 아까와 같다.

git status로 바뀐 것을 확인.

git commit -m "djust Django course 8 commit” 커밋하기.

9강. include / extends / block 구문을 이용한 뼈대 html 만들기

head 부분을 include 파일로 따로 만들어 준다.

templates에 head html 파일을 새로 만든다.

<head>
    <meta charset="UTF-8">
    <title>Pragmatic</title>
</head>
HTML
복사

base에 헤드 부분을 수정한 후, body 틀을 설정.

<!DOCTYPE html>
<html lang="ko">

{% include 'head.html' %}

<body>

    {% include 'header.html' %}

    {% block content %}
    {% endblock %}

    {% include 'footer.html' %}

</body>
</html>
HTML
복사

header html 파일

<div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

</div>
HTML
복사

footer html 파일

<div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">

</div>
HTML
복사

accountapp에 templates 디렉토리를 만들고, accountapp 디렉토리를 안에 또 만들어 준다. (파일을 끌어올 때 가독성을 높이기 위한 장치)

그후 안에 hello_world html 파일을 만들어 준다.

{% extends 'base.html' %}

{% block content %}

    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">
        <h1>
            testing
        </h1>
    </div>

{% endblock %}
HTML
복사

views 수정

def hello_world(request):
    return render(request, 'accountapp/hello_world.html')
Python
복사

git 추가. git add . 해주고 git commit -m “django courser 9 commit”

10강. style, 구글 폰트를 통해 Header, Footer 꾸미기

header 파일 수정.

<div style="text-align:center; margin: 2rem 0;">
        <div>
            <h1 style="font-family: 'Mea Culpa', cursive;">Pragmatic</h1>
        </div>
        <div>
            <span>nav1</span>
            <span>nav2</span>
            <span>nav3</span>
            <span>nav4</span>
        </div>
    </div>
HTML
복사

footer 파일 수정.

<div style="text-align:center; margin-top: 2rem;">

        <div style="font-size: .6rem;">
            <span>공지사항</span> |
            <span>제휴문의</span> |
            <span>서비스 소개</span>
        </div>
        <div style="margin-top: 1rem;">
            <h6 style="margin-top: 1rem; font-family: 'Mea Culpa', cursive;">Pragmatic</h6>
        </div>

    </div>
HTML
복사

base 파일 수정.

<!DOCTYPE html>
<html lang="ko">

{% include 'head.html' %}

<body>

    {% include 'header.html' %}

    <hr>

    {% block content %}
    {% endblock %}

    <hr>

    {% include 'footer.html' %}

</body>
</html>
HTML
복사

head 파일 수정.

*bootstrap에서 css 링크를 복사해서 넣어준다.

<head>

    <meta charset="UTF-8">
    <title>Pragmatic</title>

    <!-- BOOTSTRAP LINK -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- GOOGLE FONTS LINK -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap" rel="stylesheet">

</head>
HTML
복사

*폰트 적용 : 구글 폰트에 들어가서 마음에 드는 폰트를 클린한다음. + select ~ 라고 적힌 부분을 클릭후 링크를 가져온다.

CSS rules to specify families 구문을 가져와서 스타일을 적용시켜 준다.

*<hr> : 구분해주기 / margin 설정. / text 위치 설정. / 폰트 설정해줄 부분 따로따로 해주기.