2주차

생성일

2022/01/08 11:56

태그

11강. Static 설정 및 CSS 파일 분리

settings 들어가서 STATIC_URL 밑에 추가

STATIC_ROOT = os.path.join(BASE_DIR, ‘staticfiles’) 

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

큰 pragmatic 폴더에 static이라는 폴더를 새로 만듦.

안에 base.css 파일 만들기.

footer에서 h6 부분에 스타일을 base.css에 가져온다. class="pragmatic_footer_logo"로 h6부분을 재설정 해준다.

그리고 다음과 같이 base.css 구성.

.pragmatic_footer_logo {
    font-family: 'Mea Culpa', cursive;
 }
CSS
복사

base.html에서 {% include 'head.html' %} 로 전체 설정을 잡고 있기 때문에

head.html에 {% load static %} 를 맨 위에 추가하고

<head></head> 사이에 아래 코드 추가.

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

나머지 style 들도 class 형태로 바꿔서 base.css로 이동.

git add .

git commit -m "django course 11 commit”

12강. CSS 간단 핵심

C ascading

S tyle

S heet

•

DISPLAY Attribute → Block / Inline / Inline-block / None

block : 모든 태그에는 부모가 있는데, 부모의 최대한의 너비를 가져가는 것. (세로 쌓기)

inline : 글씨가 있다면 글씨의 높이의 일부를 가져가는 것. (가로 쌓기)

inline-block : 블록인데도 인라인처럼 구성된 것.

None : 없음. 존재하긴 하지만 시각화에서는 아무것도 없음.

•

Visibility Attribute

Hidden : none과의 차이점은 보이지만 않을 뿐 존재하는 것.

•

SIZE Attribute (related with font size)

px : 부모와 상관없음. 자신만 신경씀.

em : 부모가 커지면 같이 커짐.

(단점 : 부모가 여러개라면 부모 둘다 2배가 되면 얘는 4배가 됨.)

rem : 거의 모든 곳에 사용. → root HTML 기본 사이즈에 따라 크기가 바뀜.

% : 바로 위의 부모 것만 따라감.

13강. CSS display 속성, rem 단위 실습

스타일 적용 순서 중요도 :

1순위 태그 바로 안, 2순위 style 태그 안, 3순위 .css 파일에서 불러오기

*1rem = 16px

hello_world.html 파일에서 스타일 태그 설정하고 DISPLAY Attribute 확인해보기.

<style>
        .testing {
            background-color: white;
            height: 3rem;
            width: 3rem;
            margin: 1rem;
        }
</style>
HTML
복사

<div class="testing" style="display: block;">block</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>
HTML
복사

git reset —hard HEAD 최근 수정한 변경사항 삭제 (가장 최근 커밋으로 돌아감)

(이번 실습 삭제)

14강. Model, DB 연동

*Model : django ←→ Database (연동 작업)

(저번에 개념으로 다뤘던 내용)

models.py에서 다룸.

class HelloWorld(models.Model):
    text = models.CharField(max_length=255, null=False)
Python
복사

그 후 커맨드 명령어 python manage.py makemigrations 입력.

자동적 연결x → 연결 시켜주는 명령어 입력

python manage.py migrate → DB 연동 완료.

git add .

git commit -m “django course 14 commit”

15강. HTTP 프로토콜 GET, POST

HTTP Protocol

(사용자와 서버간 request, response가 오가는데 GET/POST를 하게 된다.)

(무엇을 원하는지 그것에 대한 데이터를 넣어주는 것이 GET/POST 이다.)

GET : 정보를 얻를 때 사용

→ 주소 안에 추가적인 파라미터를 넣어준다.

(?는 시작하는 것을 의미)

POST : 서버내에 정보를 사용, 수정할 때 사용

→ 추가적으로 BODY라는 것에 데이터를 넣어서 보낸다.

16강. GET, POST 프로토콜 실습

hello_world.html 파일 <div> 태그 안에 작성.

<form action="/account/hello_world/" method="POST">
	{% csrf_token %}
	<input type="submit" class="btn btn-primary" value="POST">
</form>
HTML
복사

{% csrf_token %} : 장고에서 제공하는 보안 중 하나. 이 구문을 써줘야 정상 작동.

view.py에서 def hello_world 안 수정.

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

이를 hello_world.html 파일에서 받아들이기 위해

<h1>
	{{ text }}
</h1>
HTML
복사

git add .

git commit -m “django course 16 commit”

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

DB SAVE

Send POST data

Receive POST data

Save DB

hello_world.html

{% extends 'base.html' %}

{% block content %}

    <div style="border-radius: 1rem; margin: 2rem; text-align: center">
        <h1 style="font-family: 'Mea Culpa', 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_output %}
        <h1>
            {{ hello_world_output.text }}
        </h1>
        {% endif %}
        
    </div>

{% endblock %}
HTML
복사

<input type="text" name="hello_world_input"> : 텍스트 작성

view.py

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
from accountapp.models import HelloWorld

def hello_world(request):

    if request.method == "POST":

        temp = request.POST.get('hello_world_input')

        new_hello_world = HelloWorld()
        new_hello_world.text = temp
        new_hello_world.save()

        return render(request, 'accountapp/hello_world.html', context={'hello_world_output': new_hello_world})
    else:
        return render(request, 'accountapp/hello_world.html', context={'text': 'GET METHOD!!!'})
Python
복사

models.py를 이용. new_hello_world = HelloWorld()

new_hello_world.save() : DB에 데이터를 저장해준다는 점. (중요!!!!)

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

17강에서 DB에 저장시키는 데이터 리스트를 끌어와 Display 시킨다.

hello_world.html

{% if hello_world_list %}
            {% for hello_world in hello_world_list %}
            <h4>
                {{ hello_world.text }}
            </h4>
            {% endfor %}
{% endif %}
HTML
복사

view.py

	hello_world_list = HelloWorld.objects.all()

	return render(request, 'accountapp/hello_world.html', context={'hello_world_list': hello_world_list})
else:
	hello_world_list = HelloWorld.objects.all()
	return render(request, 'accountapp/hello_world.html', context={'hello_world_list': hello_world_list})
Python
복사

하지만, 이렇게 하면 웹에서 새로고침을 했을 때 이전의 입력값이 반복되는 현상 발생. views 다시 수정.

from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render

# Create your views here.
from django.urls import reverse

from accountapp.models import HelloWorld

def hello_world(request):

    if request.method == "POST":

        temp = request.POST.get('hello_world_input')

        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/hello_world.html', context={'hello_world_list': hello_world_list})
Python
복사

git add .

git commit -m “django course 18 commit”

19강. Pycharm 디버깅 설정

프로그램이 복잡해지면 디버깅을 해야 한다.

run → Edit configuration → python → script path 폴더 버튼 → 큰 pragmatic 폴더 → venv → scripts 폴더 선택하고 확인

script path 밑에 parameters 칸에 runserver 입력 후 ok.

manage.py 파일 우클릭해서 debug manage 하면 서버 실행 해줌.

20강. Django 의 CRUD, Class Based View 소개

Form (Input Text) → Function (Hello World) → Database → HTML (Output Text)

보내기

하는데 anyone 누구나 할 수 있었다.

이제 Authentication 계정(account)가 필요!!

(우리의 본분 잊지말자 만들고 있던 것은 account app 이었다.)

기능

Sign Up

<login

View info

Change info

Quit

django 핵심 CRUD로 유명한 이유.

C reate

R ead

U pdate

D elete

각각의 view를 제공해주어서 작업을 최적화 시킬 수 있는 것을 제공.

→ Class Based View (←→ Function Based View)

생산성, 가독성 향상 / 복잡도, 시간 소비성 감소