1. 첫 앱 시작, 그리고 기본적인 view 만들기
학습 목표 : django의 첫 앱을 시작해 보고, 기본적인 View를 만든 이후 브라우저에서 정상적으로 원하는 출력이 나오는지 확인해 본다.
1) python manage.py startapp accountapp
2) pragmatic/settings.py
INSTALLED_APPS = [
...
'accountapp', # 추가
]
Python
복사
3) accoutapp/views.py
from django.http import HttpResponse
from django.shortcuts import render
# 함수 작성 (import 할 때, alt + enter 사용)
def hello_world(request):
return HttpResponse('Hello world!')
Python
복사
4) pragmatic/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
...
path('account/', include('accountapp.urls')), # 추가
]
Python
복사
5) accountapp/urls.py (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
복사
2. Git의 소개
학습 목표 : 본격적인 코딩에 앞서 Git이라는 버전 관리 시스템에 대해서 간단히 알아본다.
Git : 버전 관리 시스템 (Version Control)
•
Roll back에 편리하다.
•
여러 Branch(버전)들을 관리하는 것에 있어서 용이하다.
•
기존 버전의 기능에 영향을 주지 않으면서 추가적인 기능을 개발할 수 있으며, master branch와 추가적인 branch들을 합칠 수도 있다.
•
Team Work에 용이하다. (다양한 도구들을 제공)
3. Gitignore 설정, 환경변수 분리, 첫 커밋
학습 목표 : Git을 통한 버전 관리를 활성화 하고, 기본적인 Gitignore 파일 설정, 커밋 이전에 민감한 환경변수들을 분리하는 과정과 첫 커밋까지의 내용을 다룬다.
※ git 활성화 : VCS > Enable Version Control Integration > Git
먼저, 추적을 방지하기 위해 .gitignore 파일을 생성한다. (gitignore/Global/JetBrains.gitignore)
이후, 웹 서비스를 배포 전, SECRET_KEY를 분리해 따로 관리한다.
•
python -m pip install django-environ
•
settings.py에 다음 코드를 삽입한다.
import environ
import os
env = environ.Env(
# set casting, default value
DEBUG=(bool, False)
)
# Set the project base directory
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Take environment variables from .env file
environ.Env.read_env(os.path.join(BASE_DIR, '.env'))
# False if not in os.environ because of casting above
DEBUG = env('DEBUG')
Python
복사
•
.env 파일을 생성하고 다음 코드를 삽입하고, 분리한 SECRET_KEY값을 넣는다.
•
settings.py 파일 안에 SECRET_KEY를 지우고 SECRET_KEY = env('SECRET_KEY')로 대체한다.
그 다음, gitignore 파일 안에 추적을 방지할 파일들을 기재한다.
끝으로, git bash를 켜서 커밋을 완료한다.
4. 장고 Template의 extends, include 구문과 render 함수
학습 목표 : 장고에서 사용되는 Template의 include, extends 구문의 차이점을 간단히 알아보고, render 함수와 템플릿을 사용해 response를 반환해 본다.
extends : HTML 파일의 구조를 채워 나갈 수 있게 하는 역할
include : HTML 파일에 추가적인 내용을 넣을 수 있게 하는 역할
extends로 바탕을 만들고 include로 내용을 채운 후, 이를 통해 response view를 만든다.5. include / extends / block 구문을 이용한 뼈대 html 만들기
학습 목표 : include, extends, block 구문을 통해 재사용 가능한 HTML 뼈대 파일을 만든다.
1) base.html
<!DOCTYPE html>
<html lang="ko">
{ % include 'head.html' %}
<body>
{% include 'header.html' %}
{% block content %}
{% endblcok %}
<div style="height: 20rem; backgroud-color: #38df81; border-radius: 1rem; margin: 2rem;">
</div>
{% include 'footer.html' %}
</body>
</html>
HTML
복사
2) head.html
<head>
<meta charset="UTF-8">
<title>Pragmatic</title>
</head>
HTML
복사
3) header.html
<div style="height: 10rem; backgroud-color: #38df81; border-radius: 1rem; margin: 2rem;">
</div>
HTML
복사
4) footer.html
<div style="height: 10rem; backgroud-color: #38df81; border-radius: 1rem; margin: 2rem;">
</div>
HTML
복사
5) hello_world.html
{% extends 'base.html' %}
{% block content %}
<div style="height: 20rem; backgroud-color: #38df81; border-radius: 1rem; margin: 2rem;">
<h1>
testing
</h1>
</div>
{% endblock %}
HTML
복사
6. style, 구글 폰트를 통해 Header, Footer 꾸미기
학습 목표 : style 속성과 구글 폰트를 이용해 본인 서비스 내 모든 페이지에 공통적으로 나타날 Header와 Footer 부분을 꾸며본다.
header.html
<div style="text-align:center; margin: 2ren 0;">
<div>
<h1 style="font-family: 'Lobster', cursive;">Pragmatic</h1>
</div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
<div>
</div>
</div>
HTML
복사
7. Static 설정 및 CSS 파일 분리
학습 목표 : Static한 파일들을 관리하기 위한 세팅 작업, 그리고 CSS 파일을 분리해내는 작업을 배워본다.
1) pragmatic_2/pragmatic/settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
# 특정 앱에 종속되지 않는 static 폴더를 따로 만들어야 한다. (Django 문서 참고)
STATICFILES_DIR = [
BASE_DIR / "static",
]
# 이후 pragmatic 파일 내부에 static 파일(디렉토리)를 새로 만든다. (스태틱 파일들을 관리)
Python
복사
2) pragmatic_2/pragmatic/templates/head.html
<!-- static 파일을 불러오기 위해 맨 위에 작성한다. -->
{% load static %}
<head>
<!-- DEFAULT CSS LINK 작성 -->
<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
</head>
HTML
복사
3) pragmatic_2/pragmatic/static/base.css
.pragmatic_logo{
font-family: 'Black Han Sans', sans-serif;
}
.pragmatic_footer_button{
font-size: .6rem;
}
.pragmatic_footer{
text-align: center; margin-top: 2rem;
}
.pragmatic_header{
text-align: center; margin: 2rem 0;
}
CSS
복사
4) pragmatic_2/pragmatic/templates/header.html
<div class="pragmatic_header">
<div>
<h1 class="pragmatic_logo">Pragmatic</h1>
</div>
<div>
<span>nav1</span>
<span>nav2</span>
<span>nav3</span>
<span>nav4</span>
</div>
</div>
HTML
복사
5) pragmatic_2/pragmatic/templates/footer.html
<div class="pragmatic_footer">
<div class="pragmatic_footer_button">
<span>공지사항</span> |
<span>제휴문의</span> |
<span>서비스 소개</span>
</div>
<div style="margin-top: 1rem;">
<h6 class="pragmatic_logo">Pragmatic</h6>
</div>
</div>
HTML
복사
8. CSS 간단 핵심
학습 목표 : CSS에서 핵심을 짚고 넘어간다. 특히 디자인 레이아웃에 있어서 핵심적인 display 속성 block, inline, inline-block, none 및 size 단위 px, em, rem, %의 차이를 알아본다.
1) Display
•
Block
◦
부모의 최대 너비를 자식의 너비로 가져가면서, 블록 모양의 형태를 가진다.
◦
높이는 디폴트 값으로 설정된다.
◦
여러 개의 Block은 아래로 쌓인다.
•
Inline
◦
작성된 글씨의 높이만큼 설정된다.
◦
여러 개의 Inline은 옆으로 쌓인다.
•
Inline-block
◦
블록이지만, Inline과 마찬가지로 오른쪽으로 쌓이는 블록이다.
•
None
◦
HTML 태그 상에 존재는 하지만, 브라우저 상에는 존재하지 않는다.
◦
Visibility의 Hidden 속성과 다르다. (브라우저 상에 존재는 하지만, 보이지 않을 뿐)
2) Size
•
px
◦
부모의 크기와 변경에 상관 없이, 자식은 고정되어 있다.
•
em
◦
부모가 커지면 자식의 폰트도 비례하여 커진다. (작아지는 것도 동일)
◦
다만, 부모가 여러 개일 때 제곱 하여 커지는 문제가 발생한다.
•
rem ★
◦
가장 많이 사용된다.
◦
root HTML에 기본적으로 적용된 폰트 사이즈에 anchoring 되어 있다.
◦
부모와 상관 없이, root HTML에 비례하여 영향을 받는다.
•
% ★
◦
바로 위의 부모에만 영향을 받는다.
9. CSS display 속성, rem 단위 실습
학습 목표 : display 속성, html 크기 단위들에 대한 실습을 진행한다.
1) Display Attributes
{% extends "base.html" %}
{% block content %}
<style>
.testing {
background-color: white;
height: 3rem;
width: 3rem;
margin: 1rem;
}
</style>
<div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">
<h1>
testing
</h1>
<div class="testing" style="display : block">block</div>
<div class="testing" style="display : block">block</div>
<div class="testing" style="display : inline">inline</div>
<div class="testing" style="display : inline">inline</div>
<div class="testing" style="display : inline">inline</div>
<div class="testing" style="display : None">None</div>
<div class="testing" style="display : inline-block">inline-block</div>
<div class="testing">default</div>
</div>
{% endblock %}
HTML
복사
2) Size Attributes
{% extends "base.html" %}
{% block content %}
<style>
.testing {
background-color: white;
height: 3rem;
width: 3rem;
margin: 1rem;
}
</style>
<div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; font-size: 3rem;">
<h1>
testing
</h1>
<div class="testing" style="display : inline-block; width: 48px; height: 48px;">block</div>
<div class="testing" style="display : inline-block; width: 3em; height: 3em;">block</div>
<div class="testing" style="display : inline-block; width: 3rem; height: 3rem;">block</div>
<div class="testing" style="display : inline-block; width: 30%; height: 30%;">block</div>
</div>
{% endblock %}
HTML
복사
10. Model, DB 연동
학습 목표 : 장고와 DB를 연동 시키는 작업을 makemigrations, migrate 명령어를 통해 실행해 본다.
1) pragmatic_2/pragmatic/accountApp/models.py
from django.db import models
# Create your models here.
class HelloWorld(models.Model):
text = models.CharField(max_length=255, null=False)
Python
복사
2) pragmatic_2/pragmatic/accountApp/migrations/0001_initial.py 파일이 생성됨
•
DB와 django를 연결 시켜주는 연결 고리 역할
•
생성 이후, 0001_initial.py를 연동 시키기 위한 명령어 $ python manage.py migrate 입력한다.
11. HTTP 프로토콜 GET, POST
학습 목표 : 서버와 통신하는 HTTP 프로토콜 메서드 중에서도 GET, POST의 내용을 간단하게 이해하고 넘어간다.
Protocol (프로토콜) : user와 server 간 통신 과정에서 사용되는 ‘규약’과 같은 것
•
GET
◦
inquiry
◦
https://주소/?param1=value1
•
POST
◦
create, update
◦
https://주소/post + BODY (body에 post의 데이터를 넣은 후 숨겨서 보냄)
GET과 POST는 (서버가 원하는) 추가적인 데이터를 포함하는 방식이 다르다.12. GET, POST 프로토콜 실습
학습 목표 : HTTP 프로토콜 메서드 GET, POST를 장고 내에서 사용하는 방법을 실습한다.
1) pragmatic_2/pragmatic/accountApp/templates/accountAtpp/hello_world.html
{% extends "base.html" %}
{% block content %}
<div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem;">
<h1>
testing
</h1>
<form action="/account/hello_world/" method="post">
{% csrf_token %}
<input type="submit" class="btn btn-primary" value="POST">
</form>
<h1>
{{ text }}
</h1>
</div>
{% endblock %}
HTML
복사
2) pragmatic_2/pragmatic/accountApp/views.py
from django.http import HttpResponse
from django.shortcuts import render
# Create your views here.
def hello_world(request):
if request.method == "POST":
return render(request, 'accountApp/hello_world.html', context={'text': 'POST METHOD!!'})
else:
return render(request, 'accountApp/hello_world.html', context={'text': 'GET METHOD!!'})
Python
복사
13. POST 통신을 이용한 DB 데이터 저장 실습
학습 목표 : HTTP 프로토콜 메서드 POST를 통해 서버에 데이터를 보내고, 그 데이터를 DB에 저장하는 방법을 실습한다.
1) pragmatic_2/pragmatic/accountApp/templates/accountAtpp/hello_world.html
{% extends "base.html" %}
{% block content %}
<div style="border-radius: 1rem; margin: 2rem; text-align: center">
<h1 style="font-family: 'Black Han Sans', sans-serif;">
Hello World LIST~!
</h1>
<form action="/account/hello_world/" method="post">
{% csrf_token %}
<div>
<input type="text" name="hello_world_input">
</div>
<div>
<input type="submit" class="btn btn-primary" value="POST">
</div>
</form>
{% if hello_world_output %}
<h1>
{{ hello_world_output.text }}
</h1>
{% endif %}
</div>
{% endblock %}
HTML
복사
2) pragmatic_2/pragmatic/accountApp/views.py
# HttpResponseRedirect를 import 한다.
from django.http import HttpResponseRedirect
def hello_world(request):
if request.method == "POST":
# if와 else의 render 부분을 아래와 같이 변경한다.
hello_world_list = HelloWorld.objects.all()
return HttpResponseRedirect(reverse('accountApp:hello_world'))
else:
hello_world_list = HelloWorld.objects.all()
return render(request, 'accountApp/hello_world.html', context={'hello_world_list': hello_world_list})
Python
복사
14. DB 정보 접근 및 장고 템플릿 내 for loop
학습 목표 : DB에 저장된 정보들을 접근하고, 해당 정보들을 장고 템플릿 내에서 for문을 통해 출력하는 방법을 배운다.
1) pragmatic_2/pragmatic/accountApp/templates/accountAtpp/hello_world.html
</form>
<!-- form 태그 하단 부분을 아래와 같이 변경한다. -->
{% if hello_world_list %}
{% for hello_world in hello_world_list %}
<h4>
{{ hello_world.text }}
</h4>
{% endfor %}
{% endif %}
</div>
{% endblock %}
HTML
복사
2) pragmatic_2/pragmatic/accountApp/views.py
# HttpResponseRedirect를 import 한다.
from django.http import HttpResponseRedirect
def hello_world(request):
if request.method == "POST":
# if와 else의 render 부분을 아래와 같이 변경한다.
hello_world_list = HelloWorld.objects.all()
return HttpResponseRedirect(reverse('accountApp:hello_world'))
else:
hello_world_list = HelloWorld.objects.all()
return render(request, 'accountApp/hello_world.html', context={'hello_world_list': hello_world_list})
Python
복사
15. Pycharm 디버깅 설정
학습 목표 : Pycharm Community edition 내에서 장고 디버깅을 위한 환경 설정을 진행한다.
step 1.
상단의 RUN > Edit Configurations 클릭 한다.
step 2.
templates > Python > Script path에는 프로젝트명/venv/Script 선택 하고 > Parameters에는 runserver 기입 한다. > Apply > OK
step 3.
manage.py 우 클릭 한 후 > Debug manage 클릭 한다.
16. Django의 CRUD, Class Based View 소개
학습 목표 : CRUD를 짚어본다. CRUD를 구현할 때, 왜 Class Based View를 써야 하는지, 장고가 제공하는 Class Based View에 대해서 알아본다.
django는 CRUD로 유명하다!
•
CRUD : Create / Read / Update / Delete → Views
•
네 가지 작업을 쉽게 할 수 있는 클래스를 제공한다.
•
이를 Class Based View라고 한다. ( Function Based View)
Function Based View)•
생산성, 가독성 증가하고 복잡성, 시간 소비는 감소한다.
Account App 적용
•
Sign up → Create view
•
view info → Read view
•
change info → Update view
•
quit → Delete view