2023 pre-print 개발일지
8/7~8/10
7개 페이지 프론트 작업
로그인에, 회원가입에, 모델 재설계, 스케줄러 적용, 파일 등록 시스템 적용 등등등..
수많은 기능들을 추가하여 머리가 아프기도 하고 기능만 추가시켜 놔서
페이지가 너무 앙상하기도 하여 가볍게 머리를 식힐 겸 프론트작업을 1차 2차로 나누어 작업하였다.
사용한 언어 css, js
- 메인 페이지
- 프린트 페이지
- 결제 페이지
- 마이페이지
- 결제 내역 페이지
- 로그인 페이지
- 회원가입 페이지
=> 이와 같이 총 7개의 페이지에 대해서 작업을 완료했다.
css가 주가 된 프런트 작업이라 사실상 특별한 깨달음이 있진 않았으나
장고 템플릿 언어를 통하여 얻은 지식이 있어서 글을 써본다.
상속되는 html 페이지
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %} | pre-print</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}?after">
{% block additional_head %}
{% endblock %}
</head>
<body>
<div class="navbar">
<div class="navbar-left">
<a href="{% url 'main' %}">메인화면</a>
</div>
<div class="navbar-center">
<a href="#">프린트소개</a>
<a href="#">이용약관</a>
<a href="#">Q&A</a>
</div>
<div class="navbar-right">
<a href="{% url 'preprint:mypage' %}">마이페이지</a>
<a href="{% url 'preprint:payment_detail' %}">주문내역</a>
</div>
</div>
<div class="content">
{% block content %}
{% endblock %}
</div>
<div class="footer">
<p>전화번호: 123-456-7890</p>
<p>preprint 사업</p>
</div>
</body>
</html>
=> 이게 preprint의 모든 페이지에서 보이는 껍데기 html파일이라고 할 수 있다.
그럼 preprint웹 사이트는 총 7개의 페이지로 구성되어 있으니 이 코드를 전부 적용시켜야 할까?
그렇지 않다. 장고 프로젝트이기에 우리는 템플릿 언어를 사용할 수 있다.
위 코드를 보면
{% block content %}
{% endblock %}
=> 이 부분을 볼 수 있다.
이게 바로 템플릿 언어이고 html에서 상속을 할 수 있는 방법이다.
-상속받은 html페이지-
{% extends 'base.html' %}
{% load static %}
{% block title %}메인페이지{% endblock %}
{% block content %}
<div class="print-main">
<h1 class="logo">pre-print</h1>
<form action="/detail/">
<button type="submit" class="print-start-button">print !</button>
</form>
<div class="authentication">
{% if request.user.is_authenticated %}
<span>로그인 상태: {{request.user.username}}</span>
<a href="{% url 'accounts:logout' %}" class="logout-link">로그아웃</a>
{% else %}
<span>비로그인 상태</span>
<a href="{% url 'accounts:login' %}">로그인</a>
<a href="{% url 'accounts:signup' %}">회원가입</a>
{% endif %}
</div>
</div>
{% endblock %}
=> 그럼 이제 상속받은 html 페이지를 보자.
위와 같이 상속받으려는 html의 이름을 가져와 {% extends 'base.html' %}을 시작으로
{% block content %}
{% endblock %}
=> 이 블록 안에 모든 요소들이 들어가 있는 것을 볼 수 있다.
이와 같이 템플릿언어를 활용하면 html의 기본 뼈대에 대한 상속이 가능하다.
7페이지에 모두 적용하여 불필요한 중복을 없앴다.
head부분의 경우
마찬가지로 head부분의 경우도 자식 html파일에서 부모 html로 코드추가가 가능하다.
-base.html-
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %} | pre-print</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}?after">
{% block additional_head %}
{% endblock %}
</head>
-상속받은 html-
{% extends 'base.html' %}
{% load static %}
{% block title %}로그인{% endblock %}
{% block additional_head %}
<link rel="stylesheet" href="{% static 'css/account.css' %}?after">
{% endblock %}
=> 다음과 같은 방식으로 head의 정보를 추가한다.
