책 Do it! 장고 + 부트스트랩 따라하기
과제를 해야하는데 python 과 django 를 이용해야한다.
한시가 급하지만 찬찬히 책을 따라해보며 과제에 도움이 될 만한 지식을 얻어보자!
시작👊
웹사이트의 작동 방법
일반적으로 사용자는 웹브라우저에
URL을 입력해 서버로 요청을 전달하고, 서버는 미리 정해둔 규칙에 따라URL을 해석하여 응답합니다. 요청에는 단순히 서버에 있는 정보를 가져오기 위한 것 뿐만아니라 서버에 내용을저장하거나삭제하는 것도 포함됩니다.회원가입이나댓글 삭제등이 그 예입니다.
웹 프레임워크?
웹 사이트는 불특정 다수에게 노출되는 만큼 성능과 보안 측면도 신경을 써야합니다. 이렇게 웹사이트 구현에 필요한 여러 복잡한 기능을 쉽게 마들 수 있도록 도와주는 도구가 바로
웹 프레임워크입니다.회원 가입, 탈퇴,게시글 등록, 삭제등은 대부분의 웹사이트에서 제공하는 기능입니다.웹 프레임워크는 이런 공통 요소들을 미리 개발해 놓은 상태로 제공합니다. 즉,웹 프레임워크를 사용하면 이미 개발되어 있는 기능을 가져와서 개발 중인 웹 사이트에 쉽게 추가할 수 있습니다. 게다가 이미 많은 사람들이 사용하면서 발전시켜 놓은 기능이기 때문에 성능과 보안 측면에서도 충분히 검증된 방법으로 개발할 수 있다는 장점도 있습니다.
굳이 장고를 사용하는 이유는?
각 언어마다 유명한
웹 프레임워크가 있습니다."자바"는JSP와SPRING,"자바스크립트"는Node.js
그 중에django는Python을 도와주는 웹 프레임워크입니다.(Flask도Python의 웹 프레임워크입니다)
웹 개발을 처음 배울 때 많이 겪는 어려움이 처음 접하는 개념들이 너무 많다는 것입니다. 웹 개발을 하려면 컴퓨터가 서버로 기능할 수 있도록
아파치나Nginx같은 웹 서버 소프트웨어를 설치해야합니다. 그리고 방문자 정보를 저장하고 활용하기 위해서는데이터베이스도 알아야합니다.
하지만Django를 사용하면 서버 프로그램을 설치하지 않고도 파이썬 명령어 하나로 서버를 실행할 수 있고, 데이터베이스를 따로 설치하지 않고도 데이터베이스를 충분히 다룰 수 있습니다.
전문적인 소프트웨어들은 웹 개발과 장고에 익숙해진 뒤에 적용할 수도 있습니다.
Django는 프로젝트를 생성하는 순간 관리자 페이지를 자동으로 만들어줍니다. 관리자 페이지에서는 지금 개발하고 있는 웹 사이트의 데이터베이스 구조를 쉽게 파악하게 해주고, 내용 확인, 수정, 삭제를 할 수도 있습니다.
또한 처음 웹 개발을 하게 되면 보안에 대한 개념이 부족해 취약점이 노출된 상태로 개ㅏㄹ하게 될 가능성이 높습니다.Django를 이용하면 보안 가이드에 따라 웹 개발을 진행하게 되므로 큰 보안 실수를 하지 않을 수 있습니다.
Django 와 Flask 의 차이
Flask는Django보다 더 단순하고 가볍습니다.Django가 웹사이트 개발에 활용되는 대부분의 요소를 제공하며 성능과 보안 측면에서 검증된 방식으로 손쉽게 개발을 도와주는데,Flask는 가벼운 대신 기능이 적지만, 서드파티라이브러리를 활용하거나 직접 개발해Django에서 제공하는 기능을 충분히 구현할 수 있습니다. 즉,Django에 비해 자유도가 높고 프레임워크에 덜 의존적이다 는 장점이 있습니다.
✅본격적인 개발을 위한 프로그램 설치
python 설치
✅ 내 컴퓨터에 python 이 설치되어 있는지 확인해봅시다.
명령프롬프트를 열어
python을 입력해보세요C:\User\user>python
나는 잘 설치되어 있구먼!
Anaconda
python이 없다면아나콘다를 설치하는 것을 추천합니다.
단순히 python 공식 홈페이지에서 설치할 수도 있지만,아나콘다를 이용하면 파이썬으로 할 수 있는 여러가지 패키지(pandas,numpy)를 통합한 배포판을 한 번에 설치할 수 있습니다.
Cmder 설치
윈도우 자체 명령 프롬프트도 있고 아나콘다의 프롬프트도 있지만 Cmder 을 추천하는 이유는 DOS 명령어 뿐만 아니라 Linux 명령어도 그대로 사용할 수 있기 때문입니다.
Visual Studio Code
Pycharm
VSCode 로도 코딩을 할 수 있지만, 파이썬을 사용할 경우 파이썬 개발에 특화된 IDE인
Pycharm이 편리합니다.
Git, Github
git은 버전 관리를 편하게 해주는 도구입니다.
나는 모두 깔려있다.
웹 프런트엔드 기초다지기
나는 이미 알고 있으니 넘어가고 싶었지만 기초를 다시 한 번 보는 것도 나쁘지 않다고 본다.
하지만 나는 급한 걸. 하지만 또 기초를 다진다는데 안 볼 수 없지.
HTML
읽다보니 너무 기초다. 넘어가도록하자.
Bootstrap
Bootstrap은 흥미롭다.
Class 를 이용해 화면 분할하기
Bootstrap 은 화면을 12개로 분할해놓았다.
class="col-sm" 이라고 하면 화면이 small 일 때 적용되는 기준이라는 말이다..
만약 3개의 사진이 하나의 행에 들어간다면 4칸 4칸 4칸 으로 분할했을 거다.
그런데 화면이 small 이 아닐 때는 다른 분할응하고 싶다면
예를 들어 6칸 3칸 3칸 으로 화면을 분할하고싶다면
class="col-sm col-lg-6"
class="col-sm col-lg-3"
class="col-sm col-lg-3"
이라고 각각의 컨텐츠에 넣으면 화면크기에 따라 분할을 다르게 해준다.
책처럼 이미지가 있으면좋을텐뎋ㅎ헿ㅎ
그림으로 저 구역을 나눴을 때 매우 이쁘게 들어갈 거 같다.
간격 넣기
class 에 my-3 이라고 추가하게 되면
예를 들어 class="row my-3" 이라고 하면 사방에 3만큼 마진(margin) 을 넣은 것.
my 는 사방에
mt 는 위쪽에
mb 는 아래쪽에
ml 왼쪽 mr 오른쪽
ml-auto 라고 하면 왼쪽에 마진을 최대한 확보한다는 것.
모달로 로그인 창 만들기
모달 예제 소스 코드 살펴보기
div 에 class 를 "modal fade" 라고 선언하고, id 를 "exampleModal" 이라고 선언한 뒤에 모달 창을 여는 버튼에 data-toggle="modal" 과 data-target="#exampleModal" 라고 넣어놓았네.
fontawesome 으로 아이콘 가져오기
이렇게 간단하게 html 로 웹사이트 껍데기를 만드는 걸 해봤다. 사실 내가 할 과제에 필요한 것들은 없지만. 간단하게난마 앞으로 웹 페이지를 제작하는데 있어 아주 도움이 많이 될 것같다. 나는 프로젝트에서 MUI 를 사용할 거지만 이렇게 간단한 것들을 만드는 게 기본기 아니겠나.
드디어 Django 로 웹사이트 만들기
Django 의 역할 이해하기
Django 로 만든 웹 페이지의 작동구조
- 클라이언트(웹브라우저)가 doitdjango.com 이라는 이름의 서버를 찾아갑니다.
- FE만으로 만든 웹사이트가 index.html 을 요청했던 것과 달리 장고는 우선
urls.py를 요청해 개발자가 써놓은 내용을 확인합니다.
urls.py에는 " doitdjango.com 이라는 URL 로 접속 했을 때는 index 라는 함수를 실행시키자. " 라던가 " doitdjango.com/about_me/ 로 접속했을 때는 about_me 라는 함수를 실행시키자 " 같은 내용이 기술 되어 있다고 칩시다. - urls.py 에서 언급하는 함수 또는 클래스는
views.py에서 정의 합니다. views.py 의 index 함수에는 "최근 게시글 5개를 index.html 에 채워서 보여준다" 같은 내용이 있을 것입니다. 또 delete_post 라는 함수가 있다면 "게시글을 지운다" 와 같은 내용이 기술 되어 있을 것입니다. - 게시글(post)에 관한 내용은
models.py에서 정의합니다. "게시글이 담아야할 정보는 제목, 글, 작성자, 작성일이다." 라는 식으로 정의를 합니다.Django에서는 이렇게 자료의 형태를 정의한 클래스를 모델이라고 합니다. models.py에서 정의한 모델에 맞게 DB 에서 필요한 자료를 가져옵니다. 예를 들어views.py의 index 함수가 데이터베이스에서 최근 게시글 5개를 가져오는 기능을 한다면, 데이터베이스에서 최근 게시글 5개를 불러오는 것 입니다.- 마지막으로 데이터베이스에서 가져온 자료를 템플릿(여기서는 index.html)의 빈칸에 채워서 사용자의 웹 브라우저로 보냅니다.
MTV 패턴
방금 봤듯이 Django 로 만든 웹 사이트는 model 로 자료의 형태를 정의하고, view로 어떤 자료를 어떤 동작으로 보여줄지 정의하고, template로 출력할 모습을 정의합니다.
이렇게 분리해서 웹사이트의 기능을 관리함으로써 FE 개발자들은 HTML 을 비롯한 화면 구성에 집중할 수 있게 되고, BE 개발자들은 화면 뒤 작업에 집중할 수 있게 됩니다. 혼자 개발할 때도 마찬가지 입니다. Django 의 MTV 패턴을 따라 개발한다면. FE 디자인 코드와 BE 로직 코드가 뒤죽박죽되는 것을 방지할 수 있습니다.
이론적인 내용은 끝났습니다. 다음부터 본격적으로 만들어봅시다!
끝!
