리액트를 이용해서 장고의 템플릿을 대체하기이번 포스팅에서 다룰 것은 리액트와 장고를 연결하는 것입니다. 장고의 템플릿 부분을 리액트로 대체하는 것이죠. 보통 이럴 경우 리액트 프로젝트를 eject 해서 바벨의 설정을 건드리지만 이 포스팅에서는 eject를 하지 않고 둘을 연결 시킨다음에 Oneline이라는 앱을 만들어 보려고 합니다. 우선 eject를 하지 않는 이유는 리액트의 경우 이제 eject를 하지 않아도 sass를 적용시킬 수가 있습니다.(파일의 이름을 App.module.scss와 같은 형태로 바꿔주면 css 모듈과 sass가 둘다 적용됩니다.) 그래서 더더욱 꼭 eject를 할 필요가 있나 싶은 마음에 이번 포스팅을 준비했습니다. 우리가 만들 Oneline이라는 앱은 간단하게 쓴 글을 나타내..
만든 튜토리얼을 배포해봅시다.우선 무엇을 해야할까요? 처음엔 깃허브에 올리고 난 후, 파이썬애니웨어에서 깃허브에 올린 튜토리얼을 가져올 예정입니다. 그래서 우선 깃허브에 올리는 과정을 설명해보겠습니다. 깃허브를 이용하는 방법을 아시는 분들은 파이썬애니웨어에서 클론하는 부분부터 봐주시면 됩니다.깃허브에 올리기깃허브는 코드저장소입니다. 깃허브 바로가기 가입이 되어 있지 않다면 가입부터 해주세요. 코드 저장소이니 저장소를 만들어서 코드를 저장하면 되겠죠? 왼쪽 중간에 New repository를 클릭해주세요. 버튼을 제대로 찾으셨다면 저랑 같은 화면이 나오게 됩니다. 저장소의 이름을 입력하시고, 설명도 적어주세요. 저장소는 Public(다른 사람이 나의 코드를 볼 수 있음)일 경우 무료로 사용할 수 있습니다...
css 파일을 위한 static 폴더를 만들어봅시다.사용자 마다 다른 컨텐츠를 보여주는 웹사이트를 "동적"이라고 표현합니다. 페이스북이나 인스타그램 같은 사이트를 들어가보면 알 수 있죠. 제가 추가한 친구나 제가 "좋아요"를 누른 게시글의 바탕으로 컨텐츠를 보여줍니다. 하지만 이런 동적인 컨텐츠가 아니라 거의 대부분의 유저가 공통적으로 가지는 부분이 있습니다. 바로 css나 js 부분입니다. 이런 파일들을 모아서 static 폴더에 넣습니다. static 폴더는 어디에 정의해야할까요? "앱 폴더 > static > 앱 이름의 폴더 > static file"에 위치하면 됩니다. 이번 튜토리얼의 경우는 reading 폴더 안에 static이라는 폴더를 만들고, static 폴더 안에 다시 reading이라는..
클라이언트(웹 브라우저)에서 우리에게 보여주는 화면은 무엇으로 구성되어 있나요?우리가 클라이언트를 통해서 보는 화면은 html 태그로 만들어져 있습니다. 웹브라우저는 html을 사용하기 때문이죠. 그러니 우리가 만드는 웹 어플리케이션의 응답도 이러한 html로 구성되어야 합니다. 그래서 이 응답을 받은 클라이언트가 받은 응답을 해석해서 우리에게 보여주는 것입니다. 템플릿 폴더 생성하기위의 상황처럼 응답에 사용할 html 파일을 템플릿이라고 합니다. 이러한 템플릿은 어디에 위치해야할까요? "앱폴더 > templates > 앱폴더 > 템플릿 파일" 형태로 되어야 합니다. 즉 우리 튜토리얼의 경우엔 reading 폴더 밑에 templates라는 폴더를 만들고, 다시 templates 폴더 안에 reading이..
views 파일의 역할앞 포스팅에서는 urls.py 파일을 만들었습니다. 해당 url에 설정된 뷰를 장고는 보여줍니다. 뷰는 어떤 역할을 할까요? 장고를 맨 처음 소개하며 말했듯이 뷰는 로직을 담당합니다. 데이터베이스를 변경할 것인 지 아니면 그냥 템플릿만 보여주면 될 것인 지를 정해서 사용자에게 맞는 템플릿을 보여줍니다.IndexView 만들기인덱스 뷰는 "localhost:8000/reading"에 연결됩니다. 저는 인덱스 페이지에서 제가 몇 권의 책이 있고, 몇 개의 좋은 글귀가 있는 지를 보여줄 예정입니다. 위와 같이 보여주려면 코드를 어떻게 구성해야 할까요? 우선 코드처럼 TemlpateView를 갖고오셔서 상속받으면 됩니다. 템플릿 뷰는 해당되는 템플릿만 보여주면 될 때 사용하는 클래스 뷰입니..
이제 무슨 작업을 해야할까요?모델 부분, 어드민 부분도 완료했으니 이제는 뷰와 템플릿을 부분을 완성해야합니다. 뷰는 views.py에 정의합니다. 하지만 그 전에 urls.py를 살펴봐야 합니다. 장고는 url에 맞는 뷰를 보여주기 때문입니다. 이 부분에 대해서는 코드를 보면서 좀 더 설명하도록 하겠습니다.프로젝트의 urls.py 설정하기기본적으로는 우리가 만든앱에서는 urls.py가 없고, 프로젝트를 나타내는 mysite에는 urls.py가 있습니다. 보통은 앱 폴더에도 urls.py 폴더를 만들어서 앱의 url들을 정의하고, 그 앱을 프로젝트 url에 연결시킵니다. mysite에 urls.py를 보시면 기본적으로 admin 사이트가 들어가 있습니다. 그 밑에 include를 통해서 reading 앱의..
모델 파일과 가장 연관이 깊은 어드민 파일저번 포스팅의 말미에서도 언급했지만 모델 파일의 내용을 정의하면서 가장 많이 보는 파일은 어드민 파일일 것입니다. 모델에서 정의한 것을 어드민 화면에서도 보기 위해서 입니다. 이번 포스팅에서는 하나하나씩 바꿔보면서 어드민 화면을 커스텀 해보도록 하겠습니다.우선 어드민 화면의 제목을 바꿔봅시다. localhost:8000/admin을 입력하면 어드민 페이지에 접속가능합니다. 로그인 창에는 우리가 슈퍼유저 명령어로 만들었던 유저로 접속할 수 있습니다. 접속하면 모두 똑같은 제목을 보게 됩니다. Django administration이라고 적힌 투박한 제목입니다. 우선은 이 부분을 바꿔보도록 하겠습니다. admin.py를 확인해보시면 기본적으로 admin을 불러오고 있..
우리가 만드는 파일에 대해서 생각해봅시다.저번 포스팅 까지는 reading이라는 앱의 이름만 세팅에 추가하고 어떤 앱 인지 무엇이 필요한 지는 다루지 않았습니다. 이제 모델을 정의하기 전에 미리 여러가지를 생각해보고 모델을 정의해보도록 하겠습니다. 리딩 애플리케이션은 책에 나오는 좋은 글귀를 보여주는 앱입니다. 2가지 클래스가 필요합니다. 바로 "책"과 "좋은 글귀"입니다. 책에는 어떤 정보들이 담겨야 할까요? 제가 생각하기엔 책의 이름과 작가, 간단한 책 설명이 있으면 될 것 같군요. 좋은 글귀에는 어떤 정보들이 필요한가요? 이 글귀가 나온 책이 무엇인지 또 그 글귀가 무엇인지만 알면 됩니다.모델 정의하기위에서 정의한 것들을 직접적인 형태로 바꿔보겠습니다. 우리는 2개의 테이블이 필요합니다. Book과..
프로젝트를 시작해봅시다.django-admin으로 사용할 수 있는 명령어들 중에서 startproject라는 옵션이 있습니다. 이 옵션을 통해서 프로젝트를 시작할 수 있습니다. django-admin startproject mysite . 저번 포스팅에서는 가상환경을 만들었습니다. 만든 가상환경 디렉토리 내에서 mysite라는 프로젝트를 만들기 위해서 꼭 맨 뒤에 .(점)을 붙여주세요 그럼 디렉토리 안에 mysite라는 디렉토리가 생겨나고 그 안에 _init_.py, settings.py, urls.py, wsgi.py가 생깁니다. 현재 파일은 아래와 같습니다. 가상환경 디렉토리/manage.py 장고관련 명령어들을 처리하는 파일mysite/__init__.py 디렉토리를 패키지처럼 다루라고 알려주는 파..
가상환경을 우선 다운로드 해보겠습니다.저는 pipenv를 통해서 가상환경을 만든 뒤에 가상환경 안에서 장고를 다운로드 받았습니다. 장고를 글로벌하게 다운로드 했을 시엔 다른 버전의 장고를 사용하게 되었을 때 기존의 프로젝트들이 영향을 받을 수도 있고, 파이썬 애니웨어와 같은 사이트로 옮길시에도 더 환경을 세팅하는게 편하다고 느껴져서 입니다. 가상환경을 구축하기 위해 다른 것을 사용하셔도 되지만 장고가 처음이고, 파이썬이 익숙하지 않다면 pipenv 다운로드 부터 천천히 따라해주시면 됩니다. python3 -m pip install pipenv==2018.5.18 2018.10.08 현재 pip 18.1 버전과 pipenv 2018.7.1 버전이 에러가 나는 것 같아서 이전 버전을 지정했습니다. 가상환경 ..