Django, HTML 연결
이제 백과 프론트를 연결해보자!
연결하고자 하는 html 파일은 templates/BaseballApp 폴더 아래에 생성했다.
views.py 파일 생성
사용자에게 보이는 화면을 담당할 views.py 을 생성하고 내용은 아래와 같이 채워주자.
from django.shortcuts import render
def home_req(request):
return render(request, 'BaseballApp/home.html')urls.py 수정
Django 프로젝트를 생성할 때 자동으로 다음과 같은 파일이 만들어졌을 것이다.
이 파일을 수정해줘야한다.
나는 기본 화면 출력을 바꾸고 싶었기 때문에 urlpatterns 변수에 path('', views.home_req, name='home_req'), 을 추가하였고, 만약 /join 과 같은 위치에서 출력하고자 한다면 path('/join', views.함수이름, name='함수이름'), 과 같이 자원의 위치와 views.py에서 정의한 함수의 이름을 함께 넘겨주면 된다.
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home_req, name='home_req'),
]발생 오류
다른 분들은 이렇게 하면 짠! 하고 바로 나타나던데 나는 아래와 같은 오류를 만났다.
(역시 그렇게 쉬우면 개발이 아니다...)
내가 return 해준다고 명시한 파일이 없다는 내용의 에러이다.
앞선 프로젝트들에서는 파일 위치 기준을 파악하는데 엄청 오래 걸렸어서 이번에도 그런 문제인줄 알고 html 파일을 여러 위치로 옮겨 보았지만... 어림없었다...ㅎ
그렇게 같은 오류를 오랫동안 보고 왠지 모르게 현재 프로젝트 폴더 자체가 인식이 안된것 같다는 생각이 들었다.
그래서 이 생각을 풀어줄 방법을 구글링 해보니 settings.py에서 INSTALLES_APPS 변수를 수정해줘야됐었다.
맨 아래쪽에 현재 프로젝트 폴더 이름을 추가해 주니
연결하고자 하는 html 파일이 정상적으로 출력되는 것을 확인할 수 있었다.
views.py 작성
현재 app 폴더 아래에 views.py 파일을 작성한다.
from django.shortcuts import render
def home_req(request):
return render(request, 'BaseballApp/home.html')연결할 html 파일은 간단하게 아래와 같이 작성하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>야구야</title>
</head>
<body>
<h1>연동 성공</h1>
</body>
</html>정적 파일 업로드 및 출력
이미지 파일 위치
settings.py
먼저 settings.py에 INSTALLED_APPS 에 'django.contrib.staticfiles'가 포함되어 있는지 확인한다.
만약 없다면 추가해주자!
그리고 다음 코드를 삽입해준다.
STATIC_URL = 'static/'나는 프로젝트 생성할때 자동으로 포함이 되어있는 코드였다.
HTML 파일 수정
이제 html 내용을 수정해보자.
{% load static %}
<img src = "{% static 'images/cloud.png' %}" alt = "cloud image">{% %} 이 문법은 정적 파일인 HTML의 단점을 보완하기 위해서 Django에서 제공하는 템플릿 문법이라고 한다. (검색해봄)
뭔가 저번 프로젝트에서 사용한 ejs 문법이랑 비슷한 것 같기도 하고.. (ejs는 <% %> 이지만!)
html 코드는 테스트 코드로 작성한 거라 아래와 같이 아주 간단하게 짰다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOME</title>
</head>
<body>
<h1>
<div id="title" style="background-color:skyblue">
{% load static %}
<img src = "{% static 'images/cloud.png' %}" alt = "cloud image">
</div>
</h1>
</body>
</html>다음과 같이 이미지가 잘 출력되는 것을 확인할 수 있다.
솔직히 앞선 프로젝트들에서는 html내에 있는 이미지 파일 출력이 정말 너무 어려웠었어서 (Spring은 하다가 포기, node.js 반나절 이상) 이렇게 쉽게 성공할거라고 생각하지 못해서 이거 먼저 해결하고 넘어가야지 하는 생각으로 디자인 해놓은 페이지를 다 옮기지 않고 임시로 html을 아무렇게나 작성하고 시도한 과정이었다.
하지만 진짜 20분안에 성공했다.. 내 실력이 오른 것인가 Django가 미친듯이 쉬운 것인가...
이제 디자인 해놓은 페이지 html로 옮기고 DB 연결로 넘어가면 될 것 같다!!
참고 사이트 : https://velog.io/@convin305/Django-%ED%8C%8C%EC%9D%B4%EC%B0%B8%EC%97%90%EC%84%9C-%EC%9E%A5%EA%B3%A0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1-html-%ED%8C%8C%EC%9D%BC-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0
https://liebe97.tistory.com/21
https://forum.djangoproject.com/t/modulenotfounderror-no-module-named-main/19382
https://hyonlog.tistory.com/37
https://www.inflearn.com/questions/284141/html%EC%97%90%EC%84%9C-%EC%9D%B4%EA%B1%B0%EC%97%90-%EA%B4%80%ED%95%B4-%EC%97%AC%EC%AD%99%EA%B3%A0-%EC%8B%B6%EC%96%B4%EC%9A%94
정리가 잘 된 글이네요. 도움이 됐습니다.