UDR 멘토링 5주차-2

작정하고 장고 11강 - Static 설정 및 CSS 파일 분리 : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=NT_2PWj0KkY&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=11

1. CSS

CSS 파일은 디자인만 분리해놓은 파일, 그전에 스태틱에 대한 설정을 해줘야됌
스태틱: 자주 바뀌지 않는 부분

2. 스태틱 설정

settings.py에서 코드 추가

STACTIC_URL = '/static/'

STACTIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')   #스태틱 루트는 스태틱 파일을 어디로 모을지 정함, os는 라이브러리, path는 경로 관련 모듈, BASE_DIR은 해당 폴더 경로를 base로 하겠다는 의미

STACTICFILES_DIRS = [
	BASE_DIR / "static",
]

pragmatic에 static이라는 파일 생성, 이후 안에 base.css라고 생성

footer.html코드 수정

            <h6 class="pragmatic_footer_logo">Pragmatic</h6>

base.css 코드 추가

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

이후 base.css를 적용시켜야 하므로 head.html 코드 추가

{% load static %}

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

나머지도 적용 시켜주기위해 footer.html 수정

<div class="pragmatic_footer">
     <div class="pragmatic_footer_button">
         <h6 class="pragmatic_logo">Pragmatic</h6>

header.html수정

    <div class="pragmatic_header">
            <h1 class="pragmatic_logo">Pragmatic</h1>

base.css 코드 추가

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

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

.pragmatic_header {
    text-align:center;
    margin: 2rem 0;
}

이후 다시 사이트를 보면 전에 있던 모습과 똑같고 코드 분리만 적용되어서 수정하기가 용이해짐

이후 git commit
git status -> git add . -> git commit -m "django course 11 commit"

작정하고 장고 12강 - CSS 핵심 - display 속성 및 Size 단위 px, em, rem, % : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=T1I9CsvHruQ&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=12

CSS 핵심

CSS는 Casacding Style Sheet의 약자로, HTML을 꾸미기 위한 디자인 언어 묶음

DISPLAY의 4가지 속성: Block, Inline, Inline-block, None

Block: 모든 태그에는 부모가 존재하는데 그 부모가 최대한의 너비를 가져가면서 블록 모양을 유지하는 것
Inline: 글씨의 높이 만큼만 가져가는 속성, 갯수가 늘어나면 옆으로 쌓임
Inline-block: 블록인데도 인라인처럼 옆으로 쌓이는 속성
None: 코드로는 존재하지만 보이지 않는 속성

Visuality 속성 중 Hidden: none 속성과 비슷한 것 같지만 보이지만 않을뿐 존재는 있는 속성

Size 속성: px, em ,rem, % 다 폰트 크기와 관련이 있음
px: 부모가 어떻게 되는 정해진 사이즈로 나오는 속성
em: 부모가 커지면 같이 커지고 작아지면 같이 작아지는 부모와 같이 비례관련를 가지는 속성, 부모가 여러 개 있으면 각각의 부모가 커진 만큼 커지는 속성
rem: 부모의 크기를 따라가는 것이 아닌 root HTML의 크기를 따라가는 속성, 따라서 우리가 만드려는 사이트에 제일 잘 맞는 속성
1rem = 16px
%: 바로 부모위에 크기만 따라가는 속성

그래서 rem과 %를 주로 사용할 예정

작정하고 장고 13강 - CSS display 속성, rem 단위 실습 : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=D3DMvHsn9Ss&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=13

직접 HTML에 CSS속성을 사용해보면서 어떻게 되지는 볼 예정

style이 적용되는 순서: HTML내부 태그에서 적용한 스타일-> 따로 style태그로 적용한 스타일-> css파일에 써놓은 스타일

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

만약 원하는 대로 안나왔을 때, 원인은 대부분 display 설정을 다시 확인

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

여기서 최상위 태그의 폰트사이즈를 크게하면 px, %는 그대로, em과 rem은 똑같이 커짐
또한 바로 위에 있는 div에 폰트 사이즈를 크게하면 em은 커지지만, rem은 그대로임

내용을 바꿨는데 commit하기 싫으면 git rest --hard HEAD로 하면 가장 최근 commit으로 돌아감

작정하고 장고 14강 - Model, DB 연동 - makemigrations, migrate : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=fz6hYVOer2Y&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=14

Model과 DB를 연동해서 내부의 내용을 바꾸는 작업

models.py에 코드 작성

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

이후 터미널에 아래 문장 적용하면 HelloWorld라는 모델을 생성
python manage.py makemigrations: models.py쓰는 내용을 DB와 연결시킬 파을 만들어줌

자동적으로 연동되는 것이 아니기 때문에 아래 문장 입력
python manage.py migrate

DB에 대한 정보는 settings.py에서 볼 수 있음

변경사항 git commit
git status -> git add . -> git commit -m "django course 14 commit"

작정하고 장고 15강 - HTTP 프로토콜 GET, POST : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=TVBhPovyeLM&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=15

HTTP Protocol

Protocol = 규약, 그 중에 GET과 POST 존재

GET: 조회를 하기 위한 방식, 주소안에 추가적인 parameter를 추가함
POST: 서버내에 정보를 새로 추가하거나 수정할 때 사용하는 방식, 주소안에 BODY라는 곳에 정보를 넣어서 보냄

작정하고 장고 16강 : GET, POST 프로토콜 실습 : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=BNtv-6cCLQ8&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=16

1. POST사용하기

    <form action="/account/hello_world/" method="post">  #앞에 쓴 주소에 적용
        <input type="submit" class="btn btn-primary" value="POST">
    </form>>

다음과 같이 하면 아래 사진처럼 나옴

해당 버튼을 누르면 이상한(?) 화면이 나오는데 그 이유는 csrf token을 폼안에 명시 하지 않아서 그럼

csrf token= 장고에 있는 기본 보안 기능

따라서 코드를 고치고 하면 정상적으로 나옴

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

2. POST와 GET을 나누는 코드 만들기

views.py에 코드 추가

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!!!'})

html에 코드 추가

    <h1>
        {{ text }}
    </h1>>

POST 버튼을 누르면 아래 사진처럼 출력

변경사항 git commit
git status -> git add . -> git commit -m "django course 16 commit"

작정하고 장고 17강 - POST 통신을 이용한 DB 데이터 저장 실습 : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=F2xLNVd-b4g&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=17

1. POST 데이터 보내기

초록색 바 지우는 작업 먼저 하기

html 수정

    <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>
                    
                </div>>
        <input type="submit" class="btn btn-primary" value="POST">
    </form>>

2. POST 데이터 받기

views.py 코드 수정

  def hello_world(request):

       if request.method == "POST"
           
           temp = request.POST.get('hello_world_input')
           
           return render(request, 'accountapp/hello_world.html', context={'text': temp})
       else:
           return render(request, 'accountapp/hello_world.html', context={'text': 'GET METHOD!!!'})

test 라고 입력해서 POST버튼 아래 test라고 출력

3. DB 저장

views.py 코드 수정

from acoountapp.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})

hello_world.html 코드 수정

        {% if hello_world_output %}
        <h1>
            {{ hello_world_output.text }}
        </h1>>
        {% end if %}

변경사항 git commit
git status -> git add . -> git commit -m "django course 17 commit"

작정하고 장고 18강 - DB 정보 접근 및 장고 템플릿 내 for loop : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=kbg2Fs3ovyQ&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=18

1.저장되는 list들을 모두 display하기

views.py 코드 수정

from django.http import HttpResponse, HttpResponseRedirect
from django.urls import reverse

from acoountapp.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})

html 수정

        {% if hello_world_list %}
            {% for hello_world in hello_world_list %}
            <h4>
                {{ hello_world.text }}
            </h4>>
            {% end for %}
        {% end if %}

변경사항 git commit
git status -> git add . -> git commit -m "django course 18 commit"

작정하고 장고 19강 - Pycharm 디버깅 설정 : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=4tlLtoSB_1Y&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=19

파이참에서 서버 디버깅하기

파이참 상단run-> Edit Configuratins -> Templates-> Python-> Script path-> pragmatic/venv/Scripts -> runserver -> OK-> manage.py오른쪽클릭-> Debug manage를 하면 방금 전 설정한 runserver 실행됌

일반적으로 돌리는 것과 차이점은 중단점을 잡은곳에서 멈춰있고 아래에 현재 상태에 변수가 어떤 상태인지 알 수 있음
따라서 문제점을 찾거나 어떻게 돌아가는지 알기 위해서는 유용함

작정하고 장고 20강 - Class Based View, 장고의 CRUD : Django로 Pinterest 따라하기!

https://www.youtube.com/watch?v=6P74EFfGdJE&list=PLQFurmxCuZ2RVfilzQB5rCGWuODBf4Qjo&index=20

1. 계정을 만들기 위해 필요한것

가입(sign up), 유저정보보기(view info), 정보변경(change info), 탈퇴(quit)

2. CRUD

CRUD는 Create, Read, Update, Delete의 약자, 장고가 CRUD로 유명한데 그 이유는 CRUD를 위한 view를 따로 제공하기 때문
이것을 ClassBasedView(클래스기반)라고 함, 이것과 반대되는 것이 FunctionBasedView(함수기반)
CBV를 사용하면 생산성과 가독성이 좋아지고 복잡도와 사용되는 시간이 완화됌
또한 거의 모든 것에 적용이 가능하기 때문에 CBV쪽을 사용하면 생산성이 매우 좋아짐

---

이번 공부를 하면서 항상 머릿속으로 의문을 가졌던 것이 많이 이해가 됐다. 특히 CSS dipslay 속성에서 rem과 em의 차이에 대해 헷갈렸었는데 이번에 확실하게 숙지가 되었다.
이번 공부에서 GET과 POST방식에 대해 조금 헷갈려서 그것에 대해 찾아보았다.

과정
구글에 "HTML protocol" 검색, 이후 아래 사이트들을 통해 method에 대해서와 HTML에 대한 기본정보들 숙지함
https://shlee0882.tistory.com/107
https://hongs-coding.tistory.com/83