Skip to content

Latest commit

Β 

History

History
438 lines (276 loc) Β· 10.8 KB

File metadata and controls

438 lines (276 loc) Β· 10.8 KB

βœ… Django μš”μ²­κ³Ό 응닡

  1. μš”μ²­κ³Ό 응닡
  2. Django μš”μ²­κ³Ό 응닡
  3. Django Template
  4. [μ‹€μŠ΅] DTL Syntax

이번 νŒŒνŠΈμ—μ„œλŠ” URL-VIEW-TEMPLATE 순으둜 μ½”λ“œλ₯Ό μž‘μ„±ν•΄λ³΄κ³  λ°μ΄ν„°μ˜ 흐름을 μ΄ν•΄ν•©λ‹ˆλ‹€.

1. μš”μ²­κ³Ό 응닡

  • μš”μ²­κ³Ό μ‘λ‹΅μ΄λž€?
    • μ›Ή μ„œλΉ„μŠ€λŠ” ν΄λΌμ΄μ–ΈνŠΈ-μ„œλ²„ 사이에 웹을 맀개둜 μ „λ‹¬λ˜λŠ” μ„œλΉ„μŠ€
    • μ΄λŸ¬ν•œ μ„œλΉ„μŠ€μ˜ νŒ¨ν„΄μ΄ **μš”μ²­(ν΄λΌμ΄μ–ΈνŠΈ)κ³Ό 응닡(μ„œλ²„)**이라고 배움
    • μ˜€ν”„λΌμΈ μ„œλΉ„μŠ€λŠ” μ£Όλ¬Έμ„œ 포맷(μš”μ²­)μ΄λ‚˜ 응닡이 μ²œμ°¨λ§Œλ³„μ΄μ§€λ§Œ, μ›ΉμœΌλ‘œ 배포된 μ„œλΉ„μŠ€λŠ” μž¬λ°Œκ²Œλ„ μš”μ²­(URL)κ³Ό 응닡(HTML)이 λ™μΌν•œ νŒ¨ν„΄
      • 예) Youtube, Facebook, NAVER λͺ¨λ‘ λ™μΌν•œ λ°©λ²•μœΌλ‘œ μ›Ή μ„œλΉ„μŠ€ 제곡
      • 예) naver.com/sise 처럼, 도메인 이름에 /sise λΆ™μ—¬μ£Όλ©΄(μš”μ²­) naver 금육 정보가 λ‹΄κΈ΄ HTML νŽ˜μ΄μ§€κ°€ 뜸(응닡)
      • 예) Google, NAVER 의 검색창 κΈ°λŠ₯은 URL μ£Όμ†Œμ°½μœΌλ‘œ μš”μ²­ λ³΄λ‚΄λŠ” ν–‰μœ„λ₯Ό 보닀 κ°„νŽΈν•˜κ²Œ λ§Œλ“€μ–΄ 쀌

2. Django μš”μ²­κ³Ό 응닡

  • Django μš”μ²­κ³Ό μ‘λ‹΅μ΄λž€?

    • μš”μ²­κ³Ό 응닡 κ³Όμ •μ—μ„œ μ„œλ²„λŠ” (1)~(3) 의 처리 과정을 κ±°μΉ¨

      (1) μ£Όλ¬Έμ„œ μ •μ˜

      (2) 둜직 κ΅¬ν˜„

      (3) HTML νŽ˜μ΄μ§€ ꡬ성

    • 이걸 파일 λ‹¨κ³„μ—μ„œλŠ” (1)~(3) 의 κ³Όμ •μœΌλ‘œ 이해할 수 있음

      (1) URL : urls.py μ‘°μž‘

      (2) VIEW : views.py μ‘°μž‘

      (3) TEMPLATE : .html 파일 생성 및 μ‘°μž‘

  • Django μš”μ²­κ³Ό 응닡 μš”μ•½

    μ„œλ²„μ˜ 응닡 μ‘°μž‘λ˜λŠ” 파일
    1 μ£Όλ¬Έμ„œ μ •μ˜ urls.py
    2 둜직 κ΅¬ν˜„ views.py
    3 HTML νŽ˜μ΄μ§€ ꡬ성 .html
  • URLs

    # urls.py
    
    from django.contrib import admin
    from django.urls import path
    from articles import views
    
    urlpatterns = [
    	path('admin/', admin.site.urls),
    	path('index/', views.index),
    ]
  • Views

    # articles/views.py
    
    def index(request):
        return render(request, 'index.html')
    • HTTP μš”μ²­μ„ μˆ˜μ‹ ν•˜κ³  HTTP 응닡을 λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜ μž‘μ„±
    • Template μ—κ²Œ HTTP 응닡 μ„œμ‹μ„ λ§‘κΉ€

3. Django Template

  • Django Template

    • "데이터 ν‘œν˜„μ„ μ œμ–΄ν•˜λŠ” λ„κ΅¬μ΄μž ν‘œν˜„μ— κ΄€λ ¨λœ 둜직"
    • Django Template 을 μ΄μš©ν•œ HTML 정적 λΆ€λΆ„κ³Ό 동적 컨텐츠 μ‚½μž…
    • Template System 의 κΈ°λ³Έ λͺ©ν‘œλ₯Ό μˆ™μ§€
      • Django Template System
        • 데이터 ν‘œν˜„μ„ μ œμ–΄ν•˜λŠ” λ„κ΅¬μ΄μž ν‘œν˜„μ— κ΄€λ ¨λœ λ‘œμ§μ„ λ‹΄λ‹Ή
  • Django Template Language (DTL)


4. [μ‹€μŠ΅] DTL Syntax

# urls.py

# κ΄€λ¦¬μž ν™”λ©΄λ§Œ 일단 λ§Œλ“€μ–΄μ Έ 있음
# κ·Έ μ•„λž˜μ— ν™ˆνŽ˜μ΄μ§€(index.html) path ν•¨μˆ˜ μΆ”κ°€ν•˜κΈ°
urlpatterns = [
	path('admin/', admin.site.urls),
    path([μ£Όλ¬Έμ„œμ΄λ¦„], [μ–΄λ–€ view νŒŒμΌμ—μ„œ(ν•¨μˆ˜μ—μ„œ) μ •μ˜ν•  것인지 - 둜직 κ΅¬ν˜„λ  파일]),
] 

------------------------------------

μœ„μͺ½μ—
from articles import views μž‘μ„±ν•΄μ£Όκ³ ,

urlpatterns = [
	path('admin/', admin.site.urls),
    # 주문이 λ“€μ–΄μ˜€λ©΄, views.py μ•ˆμ— index κ°€ μ •μ˜ν•˜λ„λ‘ 해라! ν•˜λŠ” λͺ…λ Ή
    path('index/', views.index),
]

-------------------------------------

# views.py 둜 이동
# μœ„μ—μ„œ μ–ΈκΈ‰ν–ˆλ“― django λŠ” μ„ μ–Έν˜• ν”„λ‘œκ·Έλž˜λ°μ΄κΈ° λ•Œλ¬Έμ— 
# μš°λ¦¬κ°€ ν•˜κ³  싢은 μž‘μ—…μ„ "ν•¨μˆ˜"둜 ν‘œν˜„λ§Œ ν•΄μ£Όλ©΄ 됨

from django.shortcuts import render

# Create your views here.

# ν•¨μˆ˜μ— 첫번째 인자 μ•„λ¬΄κ±°λ‚˜ 넣어두기(request) : μ•„λ¬΄λ ‡κ²Œλ‚˜ 써도 되긴 ν•˜λŠ”λ°, μš”μ²­ν•œ μ‚¬λžŒμ˜ 정보가 λ“€μ–΄κ°€λŠ” μžλ¦¬λΌμ„œ request 라고 μ“°λŠ” 것
def index(request):
    # ν™˜μ˜ν•˜λŠ” 메인 νŽ˜μ΄μ§€λ₯Ό 보여쀀닀.
    return render(request, 'index.html')

==> 의미: index λΌλŠ” ν•¨μˆ˜λ₯Ό λ§Œλ“€μ–΄ μ£ΌλŠ”λ°, 이 ν•¨μˆ˜μ˜ 끝은 무언가λ₯Ό λ§Œλ“€λ©΄μ„œ λλ‚œλ‹€

-----------------------------------

render(request, [ν…œν”Œλ¦Ώμ΄λ¦„], context)
render(request, 'index.html', context) 의 κ΅¬μ‘°μž„

# articles 폴더(μ•±) 내에
# 폴더 μΆ”κ°€ μ•„μ΄μ½˜ ν΄λ¦­ν•˜κ³  templates μ΄λ¦„μ˜ 폴더λ₯Ό 생성 
# (μœ„μΉ˜, 이름 틀리지 μ•Šκ²Œ 쑰심)
# templates 폴더 μ•ˆμ— index.html 파일 μΆ”κ°€!
# index.html νŒŒμΌμ— μ‚¬μš©μžμ—κ²Œ 보여쀄 ν™ˆνŽ˜μ΄μ§€ ꡬ쑰 μž‘μ„±

-----------------------------------

μœ„ URL, VIEW, TEMPLATE 의 κ΅¬μ‘°λŠ” μ•žμœΌλ‘œλ„ λ³€ν•˜μ§€ μ•ŠμŒ
urls.py, views.py 에 λͺ¨λ‘ index λΌλŠ” 이름이 ν†΅μΌλ˜μ–΄ ν™œμš©λ˜κ³  μžˆμŒμ— μ£Όμ˜ν•˜μž!

-----------------------------------

μœ„μ™€ 같이 html μž‘μ„±λœ μƒνƒœμ—μ„œ 
Git Bash 창에 
python manage.py runserver 해보면 μ΄μƒν•œ λΈŒλΌμš°μ € 창이 λœ¨λŠ”λ°

이 μ£Όμ†Œμ°½ localhost:8000 <- μš” μ˜†μ— /index/ λΆ™μ—¬μ„œ λ‹€μ‹œ μ—”ν„°ν‚€ 치면
μš°λ¦¬κ°€ λ§Œλ“  html νŽ˜μ΄μ§€κ°€ 뜸!

ν™˜μ˜ν•©λ‹ˆλ‹€ νŽ˜μ΄μ§€μ— 이미지 μΆ”κ°€ν•˜κΈ°

<img src="보이고 싢은 .jpg">

νŒŒμΌμ— μœ„ μ½”λ“œλ₯Ό μΆ”κ°€ν•˜κ³ , Git Bash μ—μ„œ
python manage.py runserver λ‹€μ‹œ μž…λ ₯ν•΄μ€˜μ•Ό
λ³€κ²½λœ λ‚΄μš©μ΄ 반영됨

(끄고 싢을 λ•ŒλŠ” Git Bash μ°½μ—μ„œ ctrl+c)

ν™˜μ˜ν•©λ‹ˆλ‹€ νŽ˜μ΄μ§€λ₯Ό

정적인데 λžœλ€ν•œ html 이 λœ¨λ„λ‘ μž‘μ„±ν• μˆ˜λ„ 있음!

# views.py 둜 λŒμ•„κ°€μ„œ ... render() κ΄„ν˜Έ μ•ˆμ— μ„Έλ²ˆμ§Έ μš”μ†Œλ‘œ context μΆ”κ°€

from django.shortcuts import render

# Create your views here.

def index(request):
    # ν™˜μ˜ν•˜λŠ” 메인 νŽ˜μ΄μ§€λ₯Ό 보여쀀닀.
    return render(request, 'index.html', context)

-----------------------------------

# index ν•¨μˆ˜ μ•ˆμ— λ”•μ…”λ„ˆλ¦¬ μΆ”κ°€

from django.shortcuts import render

# Create your views here.

def index(request):
    # ν™˜μ˜ν•˜λŠ” 메인 νŽ˜μ΄μ§€λ₯Ό 보여쀀닀.
    
    context = {
        'name': '강동주',
        'img': 'μœ„μ—μ„œ μΆ”κ°€ν–ˆλ˜ .img'
    }
    
    return render(request, 'index.html', context)

-----------------------------------

# index.html 둜 λŒμ•„κ°€μ„œ ...

<body> μ•ˆμ—
	<h1>{{ name }} λ‹˜, ν™˜μ˜ν•©λ‹ˆλ‹€<h1>
    <img src="μœ„μ—μ„œ μΆ”κ°€ν–ˆλ˜ .img">
</body>

# μ΄λ ‡κ²Œλ§Œ μ €μž₯해도, μž‘μ—…ν•˜λ˜ μ›Ή νŽ˜μ΄μ§€ λ‹€μ‹œ λ“€μ–΄κ°€μ„œ μƒˆλ‘œκ³ μΉ¨ ν•˜λ©΄
# 이름이 μΆ”κ°€λ˜μ–΄ μžˆλŠ” 것을 λ³Ό 수 있음

-----------------------------------

# λ‹€μ‹œ index.html 둜 λŒμ•„κ°€μ„œ ...

<body>
	<h1>{{ name }} λ‹˜, ν™˜μ˜ν•©λ‹ˆλ‹€<h1>
    <img src= "{{ img }}">
</body>

# μ΄λ ‡κ²Œλ§Œ μ €μž₯해도, μž‘μ—…ν•˜λ˜ μ›Ή νŽ˜μ΄μ§€ λ‹€μ‹œ λ“€μ–΄κ°€μ„œ μƒˆλ‘œκ³ μΉ¨ ν•˜λ©΄
# 이미지 잘 λ“€μ–΄κ°€μžˆμŒ

-----------------------------------

# views.py 둜 λ“€μ–΄κ°€μ„œ ...
# μ΄λ¦„μ΄λ‚˜ 인삿말을 μ—¬λŸ¬κ°€μ§€λ‘œ λ°”κΏ”λ³΄μž

from django.shortcuts import render
import random

# Create your views here.
def index(request):
    # ν™˜μ˜ν•˜λŠ” 메인 νŽ˜μ΄μ§€λ₯Ό 보여쀀닀.
    
    names = ['μ£Όμ„Έν™˜', 'μ˜€μ§„μˆ˜', 'μž„μˆ˜κ²½', '쑰병진', 'μ°¨ν™”μ˜', '졜근영', '김선ꡐ']
    
    random_name = random.choice(names)
    
    context = {
        'name': random_name,
        'img': 'μœ„μ—μ„œ μΆ”κ°€ν–ˆλ˜ .img'
    }
    
    return render(request, 'index.html', context)

μ—¬νƒœκΉŒμ§€λŠ” 이름 뢀뢄이 λžœλ€ν•˜κ²Œ 좜λ ₯λ˜λŠ” ν™˜μ˜ νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€μ—ˆλŠ”λ°

μ΄μ œλΆ€ν„°λŠ” μœ μ €μ™€ interaction ν•˜λŠ” μ£Όλ¬Έμ„œ λ§Œλ“€κΈ°!

λ¨Όμ €, localhost:8000/index/[μ˜μ–΄λ‘œλœμ΄λ¦„] 이런 κ΅¬μ„±μœΌλ‘œ μ£Όλ¬Έμ„œκ°€ λ§Œλ“€μ–΄μ Έμ•Όν•¨

# 1단계 : μ£Όλ¬Έμ„œ λ§Œλ“€κΈ°
# λ¨Όμ € urls.py 클릭
# djangoμ—μ„œ λ³€μˆ˜ν™”λœ 이름은 <> ν‘œκΈ°

urlpatterns = [
	path('admin/', admin.site.urls),
    path('index/', views.index),
    path('welcome/<name(λ³€μˆ˜ν™”λœμ΄λ¦„)>/', views.welcome),
] 

------------------------------------------

# views.py 클릭

from django.shortcuts import render
import random

# Create your views here.
def index(request):
    # ν™˜μ˜ν•˜λŠ” 메인 νŽ˜μ΄μ§€λ₯Ό 보여쀀닀.
    names = ['μ£Όμ„Έν™˜', 'μ˜€μ§„μˆ˜', 'μž„μˆ˜κ²½', '쑰병진', 'μ°¨ν™”μ˜', '졜근영', '김선ꡐ']
    random_name = random.choice(names)
    context = {
        'name': random_name,
        'img': 'μœ„μ—μ„œ μΆ”κ°€ν–ˆλ˜ .img'
    }
    return render(request, 'index.html', context)


# name λ³€μˆ˜κ°€ urls.py μ—μ„œ λ„˜μ–΄μ™€μ„œ, welcome ν•¨μˆ˜μ—μ„œ μ“Έ μ˜ˆμ •μ΄λΌκ³  λͺ…λ Ήν•΄μ£ΌκΈ° 
def welcome(request, name):
    # μ‚¬λžŒλ“€μ΄ /welcome/본인이름 을 μž…λ ₯ν•˜λ©΄, ν™˜μ˜ 인사와 이름을 λ™μ‹œμ— 보여쀀닀.
    print(name)
    
    return render(request, 'welcome.html')

------------------------------------------

# template 폴더에 λ“€μ–΄κ°€μ„œ ...
# welcome.html νŒŒμΌμ„ μƒμ„±ν•œλ‹€

<body>
	<h1>{{  }}λ‹˜, ν™˜μ˜ν•©λ‹ˆλ‹€!</h1>
</body>

------------------------------------------

# μœ„μ—μ„œ {{  }} μ±„μ›Œ 넣을 μƒκ°μœΌλ‘œ, views.py 클릭!
# μ„œλ²„ 돌릴 λ•Œ Bash μ—μ„œ 였λ₯˜ 뜨면 ctrl+c ν•˜κ³ 
# python manage.py runserver λ‹€μ‹œ 돌리자

------------------------------------------

# localhost:8000/welcome/john/ μ£Όμ†Œμ°½μ— 쳐보면 λ¬Έμ œκ°€ 또 λ°œμƒ
# views.py 둜 λ‹€μ‹œ λŒμ•„κ°€μ„œ ...

def welcome(request, name):
    # μ‚¬λžŒλ“€μ΄ /welcome/본인이름 을 μž…λ ₯ν•˜λ©΄, ν™˜μ˜ 인사와 이름을 λ™μ‹œμ— 보여쀀닀.
    # print(name)
    context = {
        'name': name,
    }
    
    return render(request, 'welcome.html', context)

------------------------------------------

# template 폴더 - welcome.html 파일둜 λŒμ•„κ°€μ„œ ...

<body>
	<h1>{{ name }}λ‹˜, ν™˜μ˜ν•©λ‹ˆλ‹€!</h1>
</body>

# μœ„μ™€ 같이 name λ³€μˆ˜ λ„£μ–΄μ£Όκ³  μ„œλ²„ λ‹€μ‹œ 돌렀보면,
# localhost:8000/welcome/[이름] μ΄λ ‡κ²Œ μ£Όμ†Œ λ„£μ—ˆμ„ λ•Œ
# 메인 화면에 [이름]λ‹˜, ν™˜μ˜ν•©λ‹ˆλ‹€! 문ꡬ가 뜸

이미지 μ—¬λŸ¬κ°œλ₯Ό λ„μš°κ³  μ‹ΆμœΌλ©΄?

# views.py ...

def welcome(request, name):
    # μ‚¬λžŒλ“€μ΄ /welcome/본인이름 을 μž…λ ₯ν•˜λ©΄, ν™˜μ˜ 인사와 이름을 λ™μ‹œμ— 보여쀀닀.
    # print(name)
    context = {
        'name': name,
        'img1': '~.jpg'
        'img2': '~.jpg'
        'img3': '~.jpg'
    }
    
    return render(request, 'welcome.html', context)

# μœ„μ™€ 같이 이미지 ν•˜λ‚˜ν•˜λ‚˜ λ„£μœΌλ©΄ λ²ˆκ±°λ‘œμš°λ‹ˆκΉŒ
# μ•„λž˜μ™€ 같이 μ•Œκ³ λ¦¬λ“œλ―Ήν•˜κ²Œ μž‘μ„±

-------------------------------------

def welcome(request, name):
    # μ‚¬λžŒλ“€μ΄ /welcome/본인이름 을 μž…λ ₯ν•˜λ©΄, ν™˜μ˜ 인사와 이름을 λ™μ‹œμ— 보여쀀닀.
    # print(name)
    context = {
        'name': name,
        'images': [
            '~.jpg',
            '~.jpg',
            '~.jpg'
        ],
        'greetings': [
            'μ•ˆλ…•ν•˜μ„Έμš”', 'Hi', 'Hello'
        ]
    }
    
    return render(request, 'welcome.html', context)

----------------------------------------

# welcome.html ...
# {%  %} 뢀뢄은 django κ°€ λ§Œλ“€μ–΄μ€€ ν…œν”Œλ¦Ώ λž­κ·€μ§€(DTL, django template language)

<body>
	<h1>{{ name }}λ‹˜, ν™˜μ˜ν•©λ‹ˆλ‹€!</h1>
    <p>{{ greetings }}</p>
    {% for greeting in greetings %}
    	<p>{{  greeting  }}</p>
    {% endfor %}
    
    <!-- for greeting in greetings -->
    <!-- print(greeting)
</body>