[2주차] 로또 번호 자동 생성 웹 서비스 구현하기 - Part1

주차별 개요를 보니 강의가 적게는 4개, 많게는 8개까지 있어서 하나씩 게시글을 작성하면 추후 흐름을 파악하기 어려울 것 같아 2주차부터는 주차별로 묶어서 작성하기로 했다. 내용이 많아지면 나누어서 올려보려 한다.

 

 

settings.py 파일 내 변경사항

# 언어 & 시간 설정
LANGUAGE_CODE = 'ko-kr'
TIME_ZONE = 'Asia/Seoul'

from pathlib import Path
import os 

# 브라우저에서 url로 특정한 static 파일에 접근하려고 할 때.
STATIC_URL = '/static/'

'''
collectstatic명령을 통해 css, js, image files등의 static파일을 
한 곳에 모으는 작업을 중간중간 해줌. (앱 폴더마다 흩어져있는 static파일을 모음) 
모으는 경로를 정해준 것임. join 폴더에 모을 것.
'''
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

 

파이썬에서 대문자 변수 : 다른 파일들에서 끌어와서 쓰려는 의도. 고유명사라고 생각.

SECRET_KEY: 추후 변경 필요함.

DEBUG = True 에러 발생시 상세하게 이유 보여줌. 웹에 올릴 때는 false로 변경해서 업로드 할 것

장고에서는 기본적인 앱들을 미리 만들어둠. installed_apps에 여러개 들어있는 것 보면 알 수 있는 사실.

ROOT_URLCONF = 'site_1.urls' : site_1 안에 있는 urls.py파일을 의미함

TEMPLATES : 유저에게 돌려줄 html파일을 의미

DATABASES : sqlite3사용 가능

 

 

---

 

 

$ python manage.py runserver

로컬 주소로 장고 접속

127.0.0.1:8000/admin으로 관리자 페이지 접속 가능

 

 

lotto app 만들고 app추가

INSTALLED_APPS = [
    'lotto', # lotto 추가
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

url.py 수정

from django.contrib import admin
from django.urls import path
from lotto import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index), # <http://127.0.0.1:8000/>
]

view.py 수정

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def index(request):
    return HttpResponse('<h1>Hello, world!</h1>')

 

실행결과 (url: 127.0.0.1:8000)

 

url.py에 새로운 url 패턴 등록

    path('hello/', views.hello, name='hello_main'),

패턴 등록 후 views.py 파일에 hello method 등록

def hello(request):
        return HttpResponse("<h1 style='color:red;'>Hello, world!</h1>")

 

실행결과 (url: 127.0.0.1:8000/hello)

 

정리

새로운 앱 만들 시

$ python manage.py startapp 파일명

settings.py 의 INSTALLED_APPS에 파일명 추가

• site_1 파일 내 urls.py 에서 url 패턴 지정

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index), # <http://127.0.0.1:8000/>
    path('hello/', views.hello, name='hello_main'),
]

• lotto(파일명)파일 내 view.py 에서 함수 지정

  from django.shortcuts import render
  from django.http import HttpResponse
  
  # Create your views here.
  # index url에 매칭되는 함수
  def index(request):
      return HttpResponse('<h1>Hello, world!</h1>')
  ''' 함수 사이 두 줄 공백
  ''' 
  # hello url에 매칭되는 함수
  def hello(request):
          return HttpResponse("<h1 style='color:red;'>Hello, world!</h1>")
  

  url마다 매칭되는 함수 지정해주는 것.

브라우저에서 url 입력하여 확인

 

---

 

관리자 계정 등록하기

$ python manage.py createsuperuser

 

db 테이블 관리자 페이지에서 확인하려면 admin.py에서 등록해줘야 함.

from django.contrib import admin
# from lotto.models import GuessNumbers
from .models import GuessNumbers

# Register your models here.
admin.site.register(GuessNumbers)

GuessNumbers 사용 위해 import 필요

 

import문은 두가지 방식 가능

1. from lotto.models import GuessNumbers
2. from .models import GuessNumbers >> .models가 admin.py와 같은 폴더 내에 있을 때 사용 가능한 방식.

GuessNumbers 등록 후 admin페이지

 

GuessNumbers 테이블에 새로운 행 추가

 

db에 추가됨

 

model.py의 아래 코드로 인해 지정한 이름으로 db에 추가되는 것

    def __str__(self): # Admin page에서 display되는 텍스트에 대한 변경
        return "pk {} : {} - {}".format(self.pk, self.name, self.text) # pk는 자동생성됨

 

 

---

 

testcase 작성

from django.test import TestCase
from .models import GuessNumbers

# Create your tests here.
class GuessNumbersTestCase(TestCase):
    
    def test_generate(self):
        g = GuessNumbers(name='Test numbers', text='selected numbers')
        g.generate()
        print(g.update_date)
        print(g.lottos)

        self.assertTrue(len(g.lottos) > 20)

 

6개씩 5개 생성된다면 적어도 글자가 20자 이상일 것이므로

    self.assertTrue(len(g.lottos) > 20)

로 테스트 진행. 케이스는 자율적으로 작성 가능

 

$ python manage.py test

 

db임시로 생성하여 테스트 진행 후 삭제

 

6개씩 5개의 로또 번호 생성됨을 확인

tests.py파일에 여러개의 testcase등록 후 명령어 실행하여 모든 testcase를 통과하는지 확인해볼 수 있음

 

---

 

Shell 사용해보기

$ python manage.py shell

 

$ GuessNumbers.objects.all()

$ GuessNumbers.objects.get(name=’번호 세트 1번’)

$ GuessNumbers.objects.get(id=1)

 

html 파일 만들기

파일 구조 유의하여 만들어야 함. >> 추후 웹에 서비스 업로드 할 때 장고에서 templates파일을 하나로 모으기 때문. templates 밑에 앱 이름과 동일한 lotto 파일을 만들어준 뒤 default파일 만들어야 함.

lotto/templates/lotto/default.html

 

 

default.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>My Little Lotto</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <link href="//fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">

</head>

<body>
  <div class="page-header">
    <h1>Selected Lotto Numbers</h1>
  </div>
  <div class="container lotto">
    <h2>Good luck!</h2>
    <p> last update:2030/12/31</p>
    <p> 1, 10, 19, 15, 20, 35 </p>
  </div>
</body>
</html>

 

127.0.0.1:8000/lotto/

 

 

---

 

 

css 파일 만들어 스타일 입히기

lotto/static/css/lotto.css

 

 

 

px, em, %개념

px: 크기를 절대적으로 정의

em, %: 크기를 상대적으로 정의

페이지를 보는 디바이스가 모바일/pc/태블릿… 중 어떤 것일지 모름 >> 상대 크기 권장

(상황에 따라 px, em, % 유동적으로 사용하기)

장고 탬플릿 태그 이용해 css파일 불러오기

default.html

{% load static %} <!--장고 탬플릿 태그-->

<html lang="ko">
<head>
  <title>My Little Lotto</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <link href="//fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/lotto.css' %}">

</head>

<link rel="stylesheet" href="{% static 'css/lotto.css' %}">

하드코딩 경로가 아니라 실제 연동시 만들어지는 경로임

static 파일 작성 완료했다면 모아주는 명령어 수행 필요

$ python manage.py collectstatic

lotto/static/css/lotto.css 경로에 있는 css 오리지널 파일을 복제해 사용할 수 있게 만들어줌

최종적으로는 static파일만 내보내면 안정적인 서비스 제공 가능

하드코딩 경로로 설정시: 불필요한 내용 포함됨, 속도 저하 가능성. (성능문제 발생)

static 파일 경로는 settings.py 내부에 사전 지정해두었음

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

 

 

서버 구동 후 127.0.0.1:8000/lotto/ 접속

 

css스타일 적용된 모습 확인

css파일 수정시 오리지널 파일 수정해야 함. static파일 내의 css파일은 접근 X