Intro
무엇을 만들 것인지
핀터레스트의 레이아웃을 딴 웹을 제작해볼 것임.
반응형 디자인(데스크탑, 모바일에 따라 웹의 크기가 맞춰짐)을 만들어 볼 예정이다.
웹서비스 구조
프론트엔드(자바스크립트, HTML, CSS) , 장고를 코딩하면서 많은 부분을 손봐야 함.
백엔드(NGiNX, django, docker 등)
장고 내에서는 여러가지 웹이 동시에 생성될 것임. 웹마다 기능별로 모아둠
ex) Account, Article,Project, Comment 마다 JS, HTML, CSS이 구성
이 장고 서비스 하나가 Docker의 하나의 컨테이너가 됨, 이것을 Docker 시스템 전체에 밀어넣는다.
개발환경 셋업 : Pycharm
pycharm을 킨 후 New project 을 누르고 새로운 프로젝트를 만든다.
python은 기본으로 깔아놓아야 한다.
프로젝트를 만든 뒤 새로운 가상환경에 장고를 설치해주어야 한다.
pip list를 하면 이 가상환경에 무슨 라이브러리가 설치됬는지 확인가능
pip install django : 가상환경에 django를 설치한다.
django-admin: 이것을 이용해서 새로운 프로젝트를 시작해야함
django-admin startproject pragmatic: 프로젝트가 시작이 된다.
새로운 프로젝트에 들어가서 file → settings →Project:pragmatic →Python interpreter를 추가해주어야 한다. 그리고 pip install django로 다시 django를 설치한다(새로운 가상환경이기 때문에)
django 개발 패턴
MVC 개발 패턴(애플에서 만든 개발패턴)
-model, view , controller Template
MVT
각자의 부분에서 역할을 하면서 전체적인 프레임워크를 구축한다.
Model: 데이터베이스와 통신을 하게 해주는 편리한 도구(DB 언어를 사용하지 않고 model을 통해 통신가능)
데이터베이스: 행렬로 구성됨
View: user가 server에 요청을 함 server가 user에 요청에 응답을 하기 위한 절차를 거침
유저들이 제대로 로그인되어있는지, 그 값이 유효한 값인지, 응답을 만들어서 유저에게 되돌려주는 작업 → 이 모든 작업들을 하는게 View에서 이루어짐.
Template: HTML, CSS, JS와 밀접한 관련이 있음
user는 user interpace를 통해 보는데 이 유저 인터페이스를 어떻게 구현할 것인가를 알려주는 해결책
Django Tutorial
첫 앱 시작, 그리고 기본적인 view 만들기
우리가 새로운 앱을 만들었다는 걸 명시해주어야 한다.
settings.py에 INSTALLED_APPS 안에 ‘accountapp’,을 넣어주어야 한다.
accountapp에서 views.py에 들어가면 원하는 view를 만들 수 있음
받는 인자는 요청을 받아서 response를 되돌려주기때문에 인자로 request를 받게 된다.
def hello_world(request):
return HttpResponse(’Hello world!’)
HttpResponse에서 Alt+ Enter 를 누르면 자동으로 import를 넣을 수 있다
이 view를 보기 위해서는 특정 주소에 들어가야 함. 이 특정 주소를 만드는 과정이 필요함.
pragmatic의 urls.py에 들어감.
그다음 path(’account/’, include(’accountapp.urls’)), : accountapp 내부에 있는 url 파일을 참고해서 그 안에서 다시 분기를 한다.
include 구문: account 앱 내부에 있는 urls.py를 그 하위 디렉토리로 분기해라
accountapp에 urls.py를 만든다.
urlpatterns= [
path(’hello_world/’. hello_world, name=’hello_world’)
] path 내부에 2번째 인자인 hello_world: view의 함수, 세번쨰는 라우트에 대한 이름을 적어줌.
그리고 그 위에 app_name = “accountapp” 이것을 적는 이유: 브라우저 내에서 이것을 적어줌으로써 127.0.0.1:8000/account/hello_world 이게 실제로 들어갈 주소인데 accountapp:hello_world라고 적으면 아까 주소를 되돌려주는 기능이 있다.
Git 의 소개
버전 관리 시스템
계속적으로 개발을 하게 되면서 버전업을 하게 됨.
버전업을 했는데 에러가 뜨면 롤백을 할 수 있게 해줌
main branch가 있다고 하면 branch(개발 버전)
추가적인 기능을 개발하고 싶다.
이 기존에 있던 메인 버전에 영향을 주지 않고 개발을 하고 싶다.
그럴 떄는 추가적인 브렌치를 개발해서 실험을 하고 개발을 해서 괜찮으면 merge를 통해 main branch를 합체할 수 있다.
team work를 할 때도 필요하다
github에 올려서 개선해나가고 개발자들끼리 어디서든 코드를 공유할 수 있다.
git에는 command가 여러개 있는데 add, commit, push, branch, checkout, pull 등이 있다.
git을 먼저 설치해야 함.
Gitignore 설정, 환경변수 분리, 첫 커밋
git이라는 것은 기본적으로 활성화하면 폴더 내부의 모든 파일을 추적하게 된다.
추적하지 않아도 되는 불필요한 파일은 제외하고 싶음.
그런 추적을 방지하는 파일: gitignore
.gitignore라는 파일을 만든다.
venv는 가상환경이어서 추적할 필요가 없음
venv/ 를 쳐서 제외한다.
github에 올리면서 저희가 올리면 안되는 settings.py에 SECRET_KEY라는 것을 안전하게 지켜야 함.(따로 관리를 해야함)
environ라는 것을 불러와서 secret_key를 지킬 수 있다.
pip install django-environ
그 다음 environ에서 하라는 대로 하면 된다.
.env 파일 생성
git 활성화하는 방법
Git의 Enable version control integration이 있음 그리고 Ok를 누름
빨간색으로 되어잇는 것은 아직 추적이 안되어있는 것.
git status: 추적을 해야하는데 추가가 안된 파일
git add . : 모든 파일을 track하겠다
git commit -m “Initial commit” : 첫번쨰 커밋이 완료됨.
누렇게 되어있는 것은 추적이 안되는 것
장고 Template의 extends, include 구문과 render 함수
gitignore에 pycache 추가하기
HTMl을 사용한 장고 템플릿 사용하는 방법
template에서 자주 쓰이는 구문 : extends/ include
extends: 미리 만들어놓은 HTML 파일을 만들어놓은 것을 바탕으로 안에 있는 블럭들을 채워나간다.
include: 어떤 html 파일이 있다고 하면 어떤 조각같은 것들을 가져와서 template안에 박아넣는다.(뭔가 갖다 붙인다 라는 느낌)
extends로 바탕을 만들고 include로 채운다라고 이해하면 됨.
templates 파일을 하나 만듬
base.html(루트 html 파일)을 만든다.
base.html이 accountapp의 view에서 응답을 해줄 때 여기서 템플릿을 가져와서 안에다 내용을 박아넣음.
HttpResponse: 직접 response를 만들어서 되돌려줌. 그러나 templates를 가져와서 이제 내용을 채워넣는 형식으로 응답을 만들어볼 것이다.
return render(request, ‘base.html’)
그러나 여기까지 하면 보이지 않는다.
settings.py에 Templates의 DIRS에 ost.path.join(BASE_DIR, ‘templates’)],
이렇게 하면 base.html이 views에서 적용된다.
include / extends / block 구문을 이용한 뼈대 html 만들기
templates에 head.html을 만든다. 그리고 <head > ~ </head>를 복사하고 붙여넣는다.
그리고 base.html에 head가 있던 부분을 {% include ‘head.html’ %}로 적으면 똑같은 코드가 된다.
<body> </body> 안에는 <div> 3개를 만든다 . 알트를 누르고 커서를 누르면 다중 커서 기능 사용가능하다.
div style을 적용가능하다.
새로운 templates를 만들고 accountapp 이라는 파일을 만든뒤 hello_world라는 html을 만든다.
그리고 {% extends ‘base.html’ %}를 사용하게 되면 base.html을 가져오는데 블럭의 내용을 마음대로 바꿀 수 있다.
{% block content %}
{% endblock %} 이 안에 있는 내용을 extends를 통해 바꾸고 랜더링 가능
[base.html]
다른건 그대로 재사용된다.
views.py에 render의 html를 이제 accountapp/hello_world.html를 가져오도록 설정해준다.
style, 구글 폰트를 통해 Header, Footer 꾸미기
부트스트랩: 트위터에서 만든 스타일 라이브러리
CSS를 링크를 거는것만으로도 사용이 가능하다.
ctrl+ / : 주석 첨부할 수 있다.
margin : a b - 상하 마진 a, 좌우 마진 b
구글 폰트에서 폰트를 적용할 수 있다.