2020.08.20 django_CRUD_1

장고 첫 노트!

그래서 장고에서 프로젝트를 시작하는 방법부터 기본 CRUD를 찬찬히..해보자..아마.. 우당탕탕 예상..

 

내가 사용하는 것은 vs code기 때문에 여기서 터미널을 열어주고 

 

 

이렇게 python -m venv 가상환경이름 으로 가상환경을 하나 생성한다. 하나의 가상컴퓨터라고 생각하면 될듯?

아무거나 이름을 적어서 설치를 해주고,

 

ls로 가상환경이 설치되었는지 확인! ls는 지금 이 경로에 있는 파일들을 알 수 있따

 

 

.( 한번 띄워주기 꼭하셈 ) 가상환경이름/Scripts/activate 명령어로 가상환경을 실행시켜주자. 실행시키게 되면 밑에 괄호가 뜨면서 실행되었다는 표시가 뜬다! +명령어를 칠 때 S와 a를 쳐주고 탭을 쳐주면 자동으로 쟤가 알아서 Scripts와 activate 쳐 줌. 

--맥은 Scripts 대신 bin 써주면 된다 ㅇㅇ

 

 

 

그러믄 가상환경에서 pip install django==원하는 버전(ex_3.1.7)  나는 그냥 뒤에 버전 생략하고 최신버전으로 자동으로 깔리게 해주었다.그러면 드르르르륵 스크롤이 내려가며 다운로드 끝!

 

 

이제 깔아주었으니 장고 프로젝트를 시작해보자! django-admin startproject 프로젝트이름 으로 프로젝트를 시작! 저렇게 입력하면

 

 

vs코드에서 프로젝트가 생성!

또 한번 ls를 쳐보면

 

프로젝트랑 가상환경이 있다! 우리는 이제 프로젝트 안으로 들어가서 작업을 해줘야하기 때문에

 

 

cd 경로이름/ 으로 저 경로로 들어가주면 된다! cd는 체인지 디렉토리, 말그대로 그냥 경로를 바꿔준다라고 생각하면 될듯 ㅇㅇ

 



 

들어가면 manage.py 가 나올 것이다.  여기서 우리는 계속 장고 프로젝트를 진행할 것이다!

 

 

 

그러면 이제 app을 만들어주자! app은 보통 기능당 하나씩 만든다고 생각하자. python manage.py startapp 앱이름으로 앱을 생성해주면 된다!

폴더>>프로젝트(만들 서비스? 당 한개)>> 앱 (기능별로 한개씩) 이렇게 생각을 하면 조금 ..정리가 되려나

 

 

 

쨋든 그렇게 하면

 

 

 

프로젝트 안에 앱이 또 들어가 있는 것을 볼 수 있다!

근데 우리 장고는... 바보야.. 맨날 못알아먹어... 그래서 항상 무언가를 설치하거나 적어주면 연결을 해줘야한다!!! 

그래서 앱을 우리가 설치했으니 얘가 알아먹게 앱깔았어! 라고 알려주러 가보자.

 

 

그래서  프로젝트 안으로 들어가면 settings.py라는 파일로 들어가 INSTALLED_APPS 라는 곳에 우리가 설치했던 앱이름을 따옴표안에다가 적어주면 된다! 위에 보면 폴더>프로젝트>settings.py 로 현재 경로를 다시 한번 볼 수 있다.

settings.py 옆에 하얀색 동그라미 저거는 수정 하면 뜨는거라 저장 꼭 하기! 그래야 돌아감미다..

---

자 이제 본격적으로 기본 세팅은 마쳤으니 기능을 하나하나 적어봅씨다!

 

이제 맨처음 html을 띄워주기 위해 장고에서는 templates라는 곳에 html 파일들을 넣어줘라라고 정해놓아서 우리는 앱 안에 templates라는 폴더를 만들어주고 여기다가 html파일을 넣어주겠음.

 

 

이렇게 맨 처음 띄워줄 페이지를 index라고 보통 쓰기 때문에 html 파일을 생성해주고 이걸또..장고는 못알아먹으니 이것저것에 연결시켜줘보자!

 

 

먼저 views.py로 들어가서 여기서는 실행할 함수들을 적어주는 공간인데 함수를 이렇게 적어준다 뜻은 주석 참고!

 

 

이제 url에서 index경로를 입력해주면 !! 

 

 

성공적으로 서버가 돌아갈텐데, 이 서버가 돌아가지는지 체크하기 위해서는 python manage.py runserver라고 터미널창에 입력해주고 

 

CTRL-BREAK가 뜨면 서버가 정상적으로 성공!

 

이제 본격적으로 CRUD(Create, Read, Update, Delete) 중에 create 기능을 만들어보겠다!

create에서는 새로운 객체를 생성해서 Data를 저장해주는 역할을 만들건데, 그러기위해선 홈화면에 글작성 버튼을 만들어보자!

 

 

이렇게 html에서 index 내용을 작성하고 런서버를 돌려보면,

이렇게 휑한..화면이 나오게 된다. 간단하게 css를 통해 보기에 좋게 조금만 ..만들어보겠다

css를 쓰기 위해선 장고에서 또 써주는 문법이 있는데,

 

 

앱안에 다가 static 폴더를 만들고 그 안에 css 폴더를 만들어준다!

그리고

index.html로 돌아가서 

 

 

장고에서 탬플릿을 불러올때쓰는 문법인 {%%}안에다가 load static이라고 적어서 css를 연결시켜준다.

맨! 위! 에 적어야 한다!

그리고 타이틀 밑에 외부파일을 불러와주는 link를 이용해서 내가 만들어준 css 파일의 경로를 장고 템플릿 문법으로 다시 한번 연결 시켜 준다!

 

 

하나 더 ! 장고에서 static 파일을 효율적으로 관리해주기 위해 경로를 위와같이 베이스디렉토리에 써져있는 형식으로 써준다.

 

 

다른 장고 버전은 베이스 디렉토리의 형식이 다르니 settings 맨 위에 있는 기존 베이스디렉토리 형식 위에 import os를 해주고 위 사진 처럼 루트 경로 입력하면 된다!

 

 

이제 css 작성을 할텐데, 위와 같이 써주면 간단한 네모창이 뜨게 되면서 (클래스는 . 을 이용해서 쓰면 된당, id 값은 # !)

 

 

 

이런 느낌으로다가..네모만 간단하게 보더를 이용해서 감싸주었는데 먼가..그래도...가운데 정렬은..하고 해야할듯해서

다시 호로록 작성작성

 

여기서 중요한 display 속성인 flex만 간단히 짚고 넘어가자면,

 

flex

는 float나 inline-block들과 다르게 이 클래스 안에 있는 (지금 여기서는 p태그나 버튼클래스) 자식요소들을 컨트롤 할 때 쓰는 속성으로 좀 더 다른 속성보다 간편하고 확실하게 수평구조의 레이아웃을 작성해줄 수 있는 요소라고 생각하면 될 것 같다. 물론 간단하게 수직구성도 가능하다.

 

그래서 우리는 create_write클래스에 플렉스를 주고 그 안에 있는 버튼클래스와 p태그에 다가 플렉스를 주게 되면, 얘네가 공간을 1대1로 나눠갖는다. 근데 그렇게 되면 세로(왼오)로 공간을 가지게 되기 때문에, flex-direction : colum을 통해 가로로 비율을 가지도록 하면 저런식의 형태가 완성이 된다! 

 

후..어렵지만 다음에 제대로 공부해봐야지 추가로 그냥 font-size는 그냥 +표시가 넘 작아서 사이즈 키워준것이다!

머 그러면 간단하게 .. 정말 간단하게 이렇게 된다. 일단.. 그나마 보기좋아진 것에 만족..

자 이제 여기 인덱스 페이지에서 +버튼을 누르면 글 작성 페이지로 넘어가는 것을 해보자!

 

 

index.html 페이지에서 버튼을 누르면 크리에이트 폼으로 들어가기 위해서 링크를 또 달아줄건데, 이거 역시 장고 템플릿 문법으로 create url로 이동시켜주기위해 미리 써주고,

create.html을 templates 폴더에 생성시켜준다!

 

여기서 다른점은 우리는 create로 들어갔을때 함수를 실행시켜줘야하기 때문에 ''에다가 create라는 경로를 추가시켰다!

 

그렇게 해서 일단 위의 방법처럼 views.py , url.py에 똑같이 연결을 시켜주고 html을 띄워주면!!

 

먼가 이상한 줄이 밑에 생성되었지만, 쨋든 이 +버튼을 누르면 

 

이렇게 create.html로 들어가게 된다!

저 +밑에 밑줄이 신경쓰이니 css 하나만 추가하자.

 

 

 

이렇게 연결된 a태그의 꾸밈 효과를 없애면,

밑줄이 사라졌다..어후 이제 css는 여기서 더 안건드릴테다.

---

이제 create.html에 글 작성폼만 넣어주면 되는데, 이것도 은근 복잡하기 때문에 차근차근 해보겠다!

 

 

먼저 우리는 글작성 폼을 담아줄 forms.py라는 파일을 하나만들고 models.py에서 들고와줄 것들을 적어줄 것이다! model은 조금 어려운 개념인데 나도 아직 잘모르지만.. 데이터 베이스라는 곳에 우리의 데이터들을 담아주는데, 모델은 그 틀이라고 생각하면 될 것 같다. 

 

모델로 그럼 ㄱㄱ

 

이렇게 나는 Write라는 모델을 하나 생성해주었다. 지금 받아와준 CharField와 TextField,DateTimeField의 간략한 설명 괄호 안의 속성들값 잠시 설명!

 

CharField

짧은 문자들을 입력할때 쓰는 필드로 max_length라는 속성을 반드시 가져야한다.

TextField

많은 문자들을 입력할 때 쓰는 필드. max_length 속성 굳이 가질 필요 없음.

DateTimeField

날짜와 시간을 입력하는 필드. auto_now=True 속성을 주게 되면 현재 날짜와 시간 자동으로 생성! 

 

 

이렇게 모델들을 생성해줬으면, 우리는 터미널창으로 간다!

 

python manage.py makemigrations

python manage.py migrate

 

 이 두 명령어는 장고에서 데이터베이스를 사용할 때 보다 편리하게 쓰기 위해서 만들어진 기능이다.

우리는 데이터베이스를 사용하고자 할 때, 파이썬이 아닌 SQL문으로 작성을 해줘야한다. 

장고에서는 언어를 하나 더 배워야하는 불필요함 대신 위 두 명령어를 통해 자동으로 데이터베이스를 읽어주는 역할을 한다!

 

결론 >> 모델을 새로 생성해주거나 수정해줄때마다 위 두 명령어를 통해 장고가 데이터베이스에 대한 내용을 인식하게 한다!

 

으어 이제 다시 forms.py로 ㄱㄱ

이렇게 forms 작성을 마치고 이제 이 폼을 템플릿에다가 띄워주기만 하면 된다.

 

 

html에서 폼을 불러와주는 방식인 {{}}을 통해 폼을 불러와준다. 근데 먼가 아까 써줬던 WriteForm과 모양이 다르지 않은가? 그 이유는 뷰로 간다!

 

 

요로코롬 내가 변수에다가 넣어줬기 때문이지 ~! 쨋든 이렇게 함수를 또 실행을 시켜주게 되면 

 

후.. 드디어 내가 원하는 타이틀과 콘텐트 받아오기 성공 근데... 또 형태가 .. 보기 안좋단 말이지...^^

 

 

 

 

 

그러면 이런 방식을 통해 p태그의 형태로 불러와줄수가 또 있지

 

허.. 드디어 완성 하지만........마지막 하나가 더 남았다!!!!!!!! 조금 더 힘내라..흑흑

이렇게 작성해준걸 제출을 해서 딱! 인덱스 홈페이지에다가 딱 !!!! 띄워줘야한다. 그 과정이 쉽지는..않지만.. 또 해보자

 

 

자..여기서 또 하나의 모르는 것이 나왔다.. 그것은....POST 이다.

 

 

또 잠깐 정리time

 

 

예전 정리노트를..노션에서 끄적끄적 가져와보았다. 말그대로 요청방식의 차이인데 POST요청 방식은 url에 표기가 되지 않아 일단 데이터를 url 상에서 안보여주고 싶을 때 쓰는 요청방식이라고 생각하면 될 것 같다. 

 

자 이제 다시 뷰로 가서 데이터를 어떻게 처리해줄 것인지를 적어주자!

 

 

복잡하다..복잡해.. 간단히 말하면 우리가 POST 요청으로 들어와서 POST 방식으로 적힌 데이터들의 유효성(이 폼의 형식에 맞게 잘 작성되었는가등등)을 검사해주는 기능이라고 생각하면 된다. 

 

 

여기서 또 정리..

render

란 단순히 html의 파일을 띄워주는 것이고,

 

redirect

란 해당 url로 다시 요청을 보내주는 것이다.

위 import 에서 render 옆에 redirect 임포트 해주기!

 

 

 

이 함수로 인해 내용들을 적어주고 제출 버튼을 누르면,

 

 

 

인덱스로 짠하게 돌아온다! 함수 정상적으로 실행이 된 것이다! 근데 왜 이상한 것 같지?

 

 

바로 우리가 적어준 글은 넘어는 갔는데 우리 눈에 안 띄워줬기 때문이다.. index로 가자.

 

 

 

 

자 또 어려워졌다...for문이 나왔네.. 내 알고리즘 단골... for문으로 지금 all_write에 있는 것들을 하나하나 분리해서 적어주었다. 아이디값(글 몇번째로 썼는지), 제목, 내용, 시간까지 하나하나 분리해서 써줬다.

 

근데 all_write가 뜬금없이 어디서 나왔느냐.

뷰로 가자.

 

 

 

자 여기서 all_write를 써주었다. 주석의 설명처럼 모델에 저장되어 있는 데이터 오브젝트들을 다 가져오라는 뜻이다.

물론 모델에서 Write를 불러와줘야 하는 것은 위해서 모델폼을 불러왔던 것과 동일!

 

 

 

 

그럼 이런 형식으로 내가 써줬던 것들이 분리가 되어 나오는데... 왜 이렇게 나오는것이지..? css 가 없기 때문이지 껄껄 

아까 분명히 css 안할려고했는데 또 역시..적어주자^^!

 

 

 

 

형태가 똑같으니 그냥 옆에다가 all_write만 추가해주면 되겠지!

 

 

 

ㅎ..담기긴했는데 역시..안이쁘군.. 좀 더 옵션을 주자..

 

 

이거를 주면 위아래로 떨어지겠지 떨어져라

 

떨어졌다!!!!!드디어 끝이..보인다.. 

 

 

 

 

 

어림도 없지 이번에는 한줄에 하나씩 나오네........

그럼 이거는 클래스를 따로 줘서 all_write 만 인라인속성(한줄에 여러개 놓을 수 있음.) 주고 올게

 

 

 

플렉스안에 있는 거니까 인라인 플렉스를 주면!!!!!

 

짠!!!! 이쁘게 담긴당. 허허허허 아직 하나가 더남았다 허허허허 바로 시간... 시간을 보라 지금 나는 저시간이 아니다.

저것은 다른 나라의 시간이다 한국으로 바꾸러 가자.

 

 

세팅스에서 타임존을 Asia/Seoul로 바꿔주면

그렇다 지금은 새벽 5시 20분 나는 곧 잘 수 있겠지...... 마지막..찐찐으로 하나만 더하자 시간이 너무 안이쁘다.

 

 

마지막 updated_at에 중괄호 옆에 있는 | 이걸 쓰고 옆에 데이트라는 속성을 저렇게 주면,

드디어.. 내가 원하는 모양이 나왔다!!!!!!!!!!!! 이렇게 조금은 깔끔하게 완성이 된다.

 

오늘은 장고의 세팅부터 create까지 만들어보았다... 20일에 시작해 21일 새벽 5시 22분에 끝났군... 뒤로 갈수록 정신을 놓아서 정리가 안되어 있을 수도 있지만, 몇번을 해봐도 아무것도 모르는 코린이인 나에게 CRUD도 항상 어려운 것 같다. 그래서 그때 그때 몰랐던 용어들을 정리하고 또 찾아보면서 자세히 보려고 하다보니 글이 너무 길어졌다. 으어 어쨋든 

나는 이제 일단 자야겠다 오늘의 노트 끝!