[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
책 목록 웹앱 만들기 | ✅저자: 이유정(박사)
🔹 간단한 책 제목과 저자를 저장하고, 화면에 예쁘게 출력하는 웹앱
bookproject/
├── manage.py
├── bookproject/
│ └── settings.py, urls.py ...
└── books/
├── models.py
├── views.py
├── urls.py
├── templates/
│ └── books/
│ ├── base.html
│ └── book_list.html
└── static/
└── books/
└── css/
└── style.css
모델 정의 – books/models.py
from django.db import models
class Book(models.Model):
| id (자동 생성) | title | author |
|---|---|---|
| 1 | 데미안 | 헤르만 헤세 |
| 2 | 어린 왕자 | 앙투안 드 생텍쥐페리 |
| 3 | 삼국지 | 나관중 |
| 테이블 참고 |
뷰 작성 – books/views.py
from django.shortcuts import render
from .models import Book
def book_list(request):
✔️ 의사코드:
함수 book_list(요청):
- Book 모델에서 모든 책 데이터를 가져온다 → books 변수에 저장
- 'books/book_list.html' 템플릿을 사용하여 웹 페이지를 만든다
- 템플릿에 books 데이터를 함께 전달한다
- 생성된 웹 페이지를 사용자에게 응답으로 보낸다
앱 URL 설정 – books/urls.py
from django.urls import path
from . import views
app_name = "books"
urlpatterns = [
path(),
]
프로젝트 URL 연결 – bookproject/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("")),
]
템플릿 – books/templates/books/base.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>{% block title %}Book List{% endblock %}</title>
<link rel="stylesheet" href="{% static 'books/css/style.css' %}">
</head>
<body>
<div class="container">
{% block content %}
<!-- 콘텐츠가 들어갈 자리-->
{% endblock %}
</div>
</body>
</html>
템플릿 – books/templates/books/book_list.html
<h1>나의 책 목록</h1>
<ul class="book-list">
<li>책제목 - 책저자<li>
<li>책이 없습니다.</li>
</ul>
✔️ 의사코드:
1. 기본 템플릿 'books/base.html'을 상속한다.
2. 'title' 블록에 "나의 책 목록"이라는 제목을 넣는다.
3. 'content' 블록 시작:
- 제목 <h1> 나의 책 목록 을 화면에 출력한다.
- <ul> 태그로 책 목록을 나열하려고 한다.
- books 리스트 안의 각 book에 대해 반복한다:
- <li>에 책 제목(book.title)과 저자(book.author)를 출력한다.
- 만약 books 리스트가 비어 있다면:
- <li>에 "책이 없습니다."라는 메시지를 출력한다.
- </ul>로 목록을 닫는다.
4. 'content' 블록 종료.
CSS – books/static/books/css/style.css
생성형AI를 이용하여 작성된 HTML을 꾸며보세요.
설정 – settings.py STATIC 설정 확인
STATIC_URL = "static/"
최종결과 확인하기:
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
Python 코드 실행기
