🍒

정하은_2주차

01. Django Tutorial

01. Django Tutorial

11강_Static설정 및 CSS 파일 분리

•

pragmatic\pragmatic\settings.py

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
Python
복사

•

Terminal

Microsoft Windows [Version 10.0.19042.1415]
(c) Microsoft Corporation. All rights reserved.

(pragmatic) C:\Users\jhe00\OneDrive\바탕 화면\jhe226\2022\Django\작정하고 장고!\pragmatic>python manage.py collectstatic
TypeScript
복사

•

pragmatic\static\base.css

.pragmatic_logo{
		font-family: 'Lobster', cursive;
}

.pragmatic_footer_button{
		font-size : .6rem;
}

.pragmatic_footer{
		text-align : center, margin-top : 2rem;
}
CSS
복사

•

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
복사

•

pragmatic\templates\head.html

{% load static %}

<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=Lobster&display=swap" rel="stylesheet">

		<!-- DEFAULT CSS LINK -->
		<link rel = "stylesheet" type = "text/css" href = "{% static 'base.css' %}">

</head>
HTML
복사

•

pragmatic\pragmatic\settings.py

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = [
			BASE_DIR / "static",
]
Python
복사

⇒ header.html과 settings.py의 STATIC_URL = ‘/static/’ 을

browser에서 연결

•

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
복사

•

pragmatic\static\base.css

.pragmatic_logo{
		font-family: 'Lobster', cursive;
}

.pragmatic_footer_button{
		font-size : .6rem;
}

.pragmatic_footer{
		text-align : center, margin-top : 2rem;
}

.pragmatic_header{
		text-align : center, margin : 2rem 0;
}
CSS
복사

12강_CSS 간단 핵심

•

DISPLAY Attribute

◦

Block

▪

Children이 Parent’s 100% width를 가지면서 block 형태를 띰

▪

여러 개가 모일 경우, 아래로 쌓임

◦

Inline

▪

글씨의 높이만큼만, 한 줄내의 일정 부분만 가져가는 속성

▪

자식태그가 쌓이면 가로로 쌓임

◦

Inline-block

▪

block임에도 불구하고 Inline처럼 가로로 쌓임

◦

None

▪

아예 존재 X

▪

브라우저 내에서 시각화 될 때 존재X

▪

cf. Visibility : Hidden ⇒ 보이지 않을 뿐 존재함

•

SIZE Attribute (related with Font-Size)

◦

px

▪

parent 에 상관 없이 절대적인 크기

▪

어떠한 영향을 받지 않고 독립적으로 크기 배치

◦

em

▪

parent size가 변하면 children size도 변함

▪

parent가 여러 개 존재할 때 문제가 됨

(ex. parent1 : 2x, parent2 : 2x ⇒ children : 2 X 2 = 4x)

▪

1rem = 16px

◦

rem

▪

가장 많이 사용되는 단위

▪

children이 root HTML의 size 변화를 따라감

◦

%

▪

바로 위의 parent의 size 변화만 따라감

▪

부모의 n%

13강_CSS display 속성, rem 단위 실습

•

pragmatic\accountapp\templates\accountapp\helloworld.html

{% 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 : inline;">inline</div>

				<span style = "height : 3rem; width : 3rem;">
						message
				</span>


				<div class = "testing" style = "display : None;">None</div>
				<div class = "testing" style = "display : inline-block;">default</div>
				<div class = "testing""></div>
	</div>

{% endblock %}
HTML
복사

CSS 적용 우선순위 : ①직접 태그 ②style 태그 ③ css 파일

원하는 size가 나오지 않을 경우, background default 설정 확인해보기

•

pragmatic\accountapp\templates\accountapp\helloworld.html

{% 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 : inline-block; width : 48px; height : 48px;">inline-block</div>
				<div class = "testing" style = "display : inline-block; width : 3em; height : 3em;">inline-block</div>
				<div class = "testing" style = "display : inline-block; width : 3rem; height : 3rem;">inline-block</div>
				<div class = "testing" style = "display : inline-block; width : 30%; height : 30%;">inline-block</div>

	</div>

{% endblock %}
HTML
복사

14강_Model, DB 연동

•

pragmatic\accountapp\models.py

class HelloWorld(models.Model):
		# models에서 Model을 상속받기
		text = models.CharField(max_length = 255, null = False)
Python
복사

•

Terminal

Microsoft Windows [Version 10.0.19042.1415]
(c) Microsoft Corporation. All rights reserved.

(pragmatic) C:\Users\jhe00\OneDrive\바탕 화면\jhe226\2022\Django\작정하고 장고!\pragmatic>python manage.py makemigrations
TypeScript
복사

⇒ DB와 Django 연동, but 자동으로 연동되는 것은 아님

•

Terminal

Microsoft Windows [Version 10.0.19042.1415]
(c) Microsoft Corporation. All rights reserved.

(pragmatic) C:\Users\jhe00\OneDrive\바탕 화면\jhe226\2022\Django\작정하고 장고!\pragmatic>python manage.py migrate
TypeScript
복사

⇒ 자동 연동

•

pragmatic\accountapp\templates\accountapp\helloworld.html

{% extends 'base.html' %}

{% block content %}


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

{% endblock %}
HTML
복사

15강_HTTP 프로토콜 GET, POST

•

HTTP Protocol : 일종의 규약

◦

User → Server : Request ⇒ Get / Post (Additional DATA 전송)

◦

Server → User : Response

•

GET : 기존 DATA 조회 목적 (inquiry)

•

POST : server 내 새로운 DATA를 만들거나

DATA를 수정할 때 (create, update)

•

ex. https://onion.haus/

→ GET : https://onion.haus/?param1=value1

? : parameter의 시작

param1=value1 : param1에 value1을 넣어 server에 전송

해당 server에서 이 parameter를 이용하여 작업 후

Response

→ POST : POST + BODY

(링크 끝에 붙여서 주기엔 용량이 부족함)

16강_GET, POST 프로토콜 실습

•

pragmatic\accountapp\templates\accountapp\helloworld.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
복사

<form></form> : POST 할 때 BODY에 들어가는 모든 파일 담을 수 있게 하는 태그

DATA 꾸러미 같은 것

btn btn-primary : 적용 시 CSS를 적용하지 않아도 그럴싸한 button이 만들어진다

•

pragmatic\accountapp\templates\views.py

from django.shortcuts import render

def hello_world(request):
	if request.method == "POST":
		 return render(request, 'accountapp\helloworld.html', context = {'text' : 'POST METHOD!!!'})
	else :
			 return render(request, 'accountapp\helloworld.html', context = {'text' : 'GET METHOD!!!'})
Python
복사

17강_POST 통신을 이용한 DB 데이터 저장 실습

•

DB SAVE

① Send POST data

② Receive POST data

③ Save DB

•

pragmatic\accountapp\templates\accountapp\helloworld.html

{% extends 'base.html' %}

{% block content %}


	<div style = "border-radius : 1rem; margin : 2rem; text-align : center;">
				<h1 style = "font-family : 'lobster', cursive;">
						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>
				<h1>
						{{  text  }}
				<\h1>
	</div>

{% endblock %}
HTML
복사

•

pragmatic\accountapp\templates\views.py

from django.shortcuts import render
from accountapp.models import HelloWorld

def hello_world(request):
	if request.method == "POST":
		 # temp : 받은 data를 그대로 보내는 작업
		 temp = resquest.POST.get('hello_world_input')
		 
	   # DB에 data 저장
		 new_hello_world = HelloWorld()
	   new_hello_world.text = temp
	   new_hello_world.save()
		 
		 return render(request, 'accountapp\helloworld.html', context = {'hello_world_output' : temp})
	else :
			 return render(request, 'accountapp\helloworld.html', context = {'text' : 'GET METHOD!!!'})

Python
복사

•

pragmatic\accountapp\templates\accountapp\helloworld.html

{% extends 'base.html' %}

{% block content %}


	<div style = "border-radius : 1rem; margin : 2rem; text-align : center;">
				<h1 style = "font-family : 'lobster', cursive;">
						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_ouput %}
				<h1>
						{{  hello_world_ouput.text  }}
				<\h1>
	{% endif %}
	</div>

{% endblock %}
HTML
복사

18강_DB 정보 접근 및 장고 템플릿 내 for loop

•

pragmatic\accountapp\templates\views.py

from django.shortcuts import render
from accountapp.models import HelloWorld

def hello_world(request):
	if request.method == "POST":
		 # temp : 받은 data를 그대로 보내는 작업
		 temp = resquest.POST.get('hello_world_input')
		 
	   # DB에 data 저장
		 new_hello_world = HelloWorld()
	   new_hello_world.text = temp
	   new_hello_world.save()

		 hello_world_list = HelloWorld.objects.all()
		 
		 return render(request, 'accountapp\helloworld.html', context = {'hello_world_list' : hello_world_output})
	
	else :
		 hello_world_list = HelloWorld.objects.all()
		 return render(request, 'accountapp\helloworld.html', context = {'hello_world_list' : hello_world_output})

Python
복사

•

pragmatic\accountapp\templates\accountapp\helloworld.html

{% extends 'base.html' %}

{% block content %}


	<div style = "border-radius : 1rem; margin : 2rem; text-align : center;">
				<h1 style = "font-family : 'lobster', cursive;">
						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_list %}
				{% for hello_world in hello_world_list %}
				<h1>
						{{  hello_world.text  }}
				<\h1>
				{% endfor %}
	{% endif %}
	</div>

{% endblock %}
HTML
복사

•

pragmatic\accountapp\templates\views.py

from django.shortcuts import render
from django.urls import reverse
from accountapp.models import HelloWorld

def hello_world(request):
	if request.method == "POST":
		 # temp : 받은 data를 그대로 보내는 작업
		 temp = resquest.POST.get('hello_world_input')
		 
	   # DB에 data 저장
		 new_hello_world = HelloWorld()
	   new_hello_world.text = temp
	   new_hello_world.save()

		 return HttpResponseRedirect(reverse('accountapp:hello_world'))
	
	else :
		 hello_world_list = HelloWorld.objects.all()
		 return render(request, 'accountapp\helloworld.html', context = {'hello_world_list' : hello_world_output})

Python
복사

19강_Pycharm 디버깅 설정

•

Run  Edit Configuration  Template  Python  Script Path  pragmatic\venv\Scripts

Parameter runserver

•

manage.py  우클릭  Debug ‘manage’

20강_Django의 CRUD, Class Based View 소개

•

Account 관련 Function ⇒ ① Sign Up 

② View Info

③ Change Info

④ Quit

•

Create Read Update Delete

•

Django → CRUD에 대한 view를 따로 제공

•

Class Based View     Function Based View

•

Productivity & Readability 

Complexity & Time Spending