만든 튜토리얼을 배포해봅시다.우선 무엇을 해야할까요? 처음엔 깃허브에 올리고 난 후, 파이썬애니웨어에서 깃허브에 올린 튜토리얼을 가져올 예정입니다. 그래서 우선 깃허브에 올리는 과정을 설명해보겠습니다. 깃허브를 이용하는 방법을 아시는 분들은 파이썬애니웨어에서 클론하는 부분부터 봐주시면 됩니다.깃허브에 올리기깃허브는 코드저장소입니다. 깃허브 바로가기 가입이 되어 있지 않다면 가입부터 해주세요. 코드 저장소이니 저장소를 만들어서 코드를 저장하면 되겠죠? 왼쪽 중간에 New repository를 클릭해주세요. 버튼을 제대로 찾으셨다면 저랑 같은 화면이 나오게 됩니다. 저장소의 이름을 입력하시고, 설명도 적어주세요. 저장소는 Public(다른 사람이 나의 코드를 볼 수 있음)일 경우 무료로 사용할 수 있습니다...
간단한 게임으로 배워보는 css의 flex와 gridcss의 flex와 grid를 배워볼 수 있는 간단한 게임을 소개하겠습니다. Flexbox Froggy 바로가기 Grid Garden 바로가기 간단한 게임들로 css flex와 grid를 배워볼수도 있고, 이미 배웠던 분들은 귀엽게(?) 복습할 수 있습니다. 플렉스 박스의 경우 코드를 작성하는 곳 밑에 setting 키를 통해서 난이도를 조절할 수 있습니다. 당근을 키우고 개구리도 도와주세요.Flexbox Froggy 코드보기이 부분부터는 미리보지 마시고, 링크를 타고 간 후 한번 해본 뒤에 보시는 것을 추천드립니다. 난이도가 어려울 수 있는 부분에 대한 해설을 포스팅했습니다. 마지막 단계의 모습입니다. 개구리와 같은 색의 연잎으로 개구리를 보내야 합니..
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과..
css의 overflow를 써야할 때컨텐츠가 블록 속성이 엘리먼트 박스를 넘을 때 overflow 속성을 어떻게 할 지 고민해야 합니다. 스크롤을 생기게 하거나 또는 엘리먼트 박스를 넘은 컨텐츠를 숨길 수 있고 상황에 맞게 필요한 것을 선택해야 합니다. 일단 너비와 높이가 길이가 정해져 있어야 overflow를 정할 일이 생기기 때문에 100px씩으로 고정했습니다. 해당 코드를 실행해보시면 아래와 같은 형태가 됩니다. 왼쪽부터 visible, scroll, hidden의 값을 준 형태입니다. visible은 상자를 넘어서 나오게되고, 스크롤은 스크롤이 생기며, 히든은 최대한 표현하고 나머지는 숨기게 됩니다. 직관적으로 이해되시나요? 높이값을 주지 않으면 컨텐츠가 생성하는 높이가 증가함에 따라 엘리먼트 박..
프로젝트를 시작해봅시다.django-admin으로 사용할 수 있는 명령어들 중에서 startproject라는 옵션이 있습니다. 이 옵션을 통해서 프로젝트를 시작할 수 있습니다. django-admin startproject mysite . 저번 포스팅에서는 가상환경을 만들었습니다. 만든 가상환경 디렉토리 내에서 mysite라는 프로젝트를 만들기 위해서 꼭 맨 뒤에 .(점)을 붙여주세요 그럼 디렉토리 안에 mysite라는 디렉토리가 생겨나고 그 안에 _init_.py, settings.py, urls.py, wsgi.py가 생깁니다. 현재 파일은 아래와 같습니다. 가상환경 디렉토리/manage.py 장고관련 명령어들을 처리하는 파일mysite/__init__.py 디렉토리를 패키지처럼 다루라고 알려주는 파..