2주차

11강 Static 설정 및 CSS 파일 분리

CSS 파일- 디자인 파일만 따로 분리

html 뼈대만 남겨놓고 디자인적인 요소들은 css 파일 내부로 빼내서 따로 관리하는게 보통 개발 패턴

Static- 자주 변경되지 않는 파일(정적)

프로젝트,앱별로 따로 관리

pragmatic settings.py에서 URL밑에 STATIC_ROOT = os.path.join(BASE_DIR, ‘staticfiles’)

os -라이브러리

path - 경로 관련한 모듈

모듈 중 join하는 function

BASE_DIR - 폴더 경로를 base_dir로 하겠다

python manage.py collectstatic : 프로젝트 내에 모든 static 파일을 한군데 모아주는 명령어

, 명령어 통해 파일들이 어디로 모일 것인지 알려주는게 static_root

앱에 종속되지 않은 static 폴더를 따로 만들어 관리

STATICFILES_DIRS = [ BASE_DIR / "static", ]

static에 base.css 폴더 만듬→ foooter.html에서 style지우고 class=”이름” → base.css에서 . 이름 {속성}→ head.html에서 맨위에 {% load static %} ,

<link rel="stylesheet" type="text/css" href="{% static 'base.css' %}"> →footer.html에서 style지우고 class=”이름”→base.css에서

.이름{

속성

}

12강 CSS 간단 핵심

CSS = html을 꾸미기 위한 디자인언어 묶음

1.Display 속성(보이는 화면 구성)

•

Block : 모든 태그에는 부모가 존재, 부모의 최대한의 너비를 모두 가져가면서 블럭모양 형태 가짐 ,높이는 따로 설정하지 않는 이상 기본적으로 설정값 혹은 내용물에 맞춰서 결정됨, 수직으로 쌓임

•

Inline(줄 안에있다) : 글씨의 높이만큼만 한줄내 일정부분 가져감

•

Inline-block : block이지만 인라인처럼 안쪽에 오른쪽으로 쌓임

•

None : 시각화되는 과정에서 없음

<> Visibility: none이면 아예 없음, hidden이면 존재는하지만 보이지는 않음

2.size 지정 단위 (반응형때문에)

•

px : 부모가 어떻게 되는 영향받지 않음(부모의 크기,폰트사이즈... )

•

em : 부모가 변하는대로 따라감, 부모가 여러개일경우 부모한테 받은거 다 합해서 변함

•

rem(거의 모든 곳에 사용): root HTML(최상단)의 기본적으로 적용된 폰트 사이즈가 있음. 부모의 크기에는 영향받지 않지만 root HTML의 크기에 영향을 받음

•

% : 바로 위 부모에 영향 받음

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

css 3가지(적용순서)

1.<div=style””></div>

2.<style>

.이름{

속성

}

</style>

3.별도의 css(base.css)에서 불러오는 style

1rem=16px

ex.

hello_word_html에

</div> div는 기본설정이 block

(다른태그중) span은 기본이 inline

바꾼 것(수정사항)을 commit하기 싫어서 원래대로 하고싶다

= git reset —hard HEAD 를 치면 가장 최근 commit으로 되돌아간다.

14강 Model, DB 연동

장고에서 모델

=데이터베이스와 장고내부에서 사용이 편하도록 연동시켜주는 작업

장고에서 모델을 가지고 데이터베이스 와 통신하면서 DB의 내용을 자세히 알지 않아도 되는 환경 제공

row, column = 객체, 속성

→과정

hello_world.html은 정적인 코드

내부의 내용을 원하는대로 바꿀 수 있는 능력(동적)을 DB와 연동시켜서 저장, 수정가능하게 함

python manage.py makemigrations : models.py에 쓰는 내용을 DB와 연동시킬 파이썬 파일로 만들어줌

연동시키는 과정→ accountapp→ models.py →

class HelloWorld(models.Model):

text = models.CharField(max_length=255, null=False)

→ python manage.py makemigrations (DB와 연결시킬 파이썬 파일로 만들어줌) → python manage.py migrate (DB랑 연동됨)

*null: DB에 저장을 할 때 text가 없어도 되는지

DB: 액셀 파일

15강 HTTP 프로토콜 GET, POST

프로토콜 = 컴퓨터와 컴퓨터끼리 통신하는 과정에서 사용되는 규약

get & post

=유저(요청)와 서버(응답)가 통신할 때 서버가 무엇을 보내줘야하는지 추가적인 정보 넣어주는 방식

GET = 조회를 하기 위해서 요청보냄

주소 안에다가 추가적인 parameter 넣어서 서버에 보내줌 (서버측에서는 그 파라미터를 가지고 추가적인 작업을 하고 응답)

POST : 서버 내에 어떤 정보를 새로 만들거나 수정할 때 사용

추가적으로 body라는 응답 내부에 있는 몸통에 데이터를 넣어서 서버에 보냄

https: 암호화

http: 암호화x

16강 GET, POST 프로토콜 실습

get은 브라우저에서 주소창에 넣으면 자동적으로 됨

post는 따로 설정을 해줘야함

post를 쓰기 위해서는 html안에 <form> 을 만들어줘야함

<form>은 서버에 보내는 요청 명세서

글이나 파일을 첨부할때 그 모든 데이터를 post 의 body안에 넣는데 그 데이터들이 이 form 안에 들어가게 됨

{% csrf_token %}

post를 사용해서 이 주소로 요청을 보낸다

장고를 이용해서 post 을 이용해 서버에 요청을 보낼 때 csrf_token(장고에서 제공하는 보안기

능 중 하나)을 명시 → post 작동

view에서 post랑 get을 나눠서 처리해줄 알고리즘을 적용 해야함

accountapp → views.py

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

→ hello_world.html에서

<h1>

</h1>

요청을 받은 객체 안에서 method를 찾는데 post일 경우

추가적 context 데이터 꾸러미(text라는 이름을 가지고 내용물은 post method라는 문장)

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

DB SAVE

Send POST data

Receive //

Save DB

hello_world html에서

초록바 없애기 글자 가운데 정렬

폰트적용

form(데이터꾸러미) 에 서버로 보낼 내용적음 데이터구분=name

이 이름 가진 데이터를 담아서 서버로 보냄

처리→ views.py에서 post에서 그 데이터를 확인

request에서 post중에서 가져와서 temp(임시변수)에다 넣어라

context={’text’ : temp}로 변경

데이터저장→models.py에서 만든 HelloWorld 모델→ import(alt+enter)→HelloWorld 모델에서 나온 새로운 객체가 new_hello_world에 저장→ helloworld객체 저장

→객체를 내보내줌

→if문 이용해서 hello world output 존재 확인

hello world output의 text값

=dp.sqlite3라는 DB에 hello world 데이터가 저장되고있음

{% 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> <div> <input type="text" name="hello_world_input"> </div> 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_word})

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

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

db에서 저장되는 것을 모두긁어와서 디스플레이 하는 과정

veiw.py에서

hello_word_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})

html에서

{% if hello_world_list %}

{% for hello_world in hello_world_list %}

<h4> {{ hello_world.text }} </h4> {% endfor %} {% endif %}

view.py에서 (post완료후 반복되지 않

→ return HttpResponseRedirect(reverse('accountapp:hello_world')) → reverse import

19강 Pycharm 디버깅 설정

파이참 내부에서는 어떤 특정한 라인에서 브레이크 포인트(중단점)을 잡고 변수들이나 값들이 어떤

상태로 되어있는지 중간에 확인할 수 있도록 디버깅

위에 run → edit configurationsd → template → python→ script path → pragmatic → venv → scripts→ parameter → runserver → apply

→ manage.py 우클릭 → Debug ‘manage

지금 현재 상태 변수들이 어떤 값을 가지고 있는지 뭐가 변했는지 추적 가능

20강 Django의 CRUD, Class Based View 소개

hello world라는 함수를 만들어서 함수에서 요청을 받아서 response를 되돌려주는 시스템 구축

form에서 input text가 들어오고 hello world가 받아서 다시 html로 output을 내보내는 형식

추가적으로 database에 저장하고 그것을 읽어서 출력하는 것도 함

for문을 통해 여러가지 output을 동시다발적 출력도 함

form에서 hello world에 요청을 할 때 아무나 보낼 수 있다, 가상서버를 빌려서 실제 서버를 올린다

고 하면 아무나 글을 쓸 수 있다. 인증 시스템을 구축해야 한다. 계정account가 필요하다.

Account

1.sign up

2.view info

3.change info

4.quit

장고가 CRUD로 유명하다

CRUD: create, read, update, delete

crud에 대한 각각의 view(도구)를 제공해준다=Class Based View

<>Function Based View ex. Hello World

crud가 거의 모든 것에 적용됨