📚 지난 수업 질문 & Preview
🙄 회원정보 value에 있는 값을 출력하면 설정했던 value값이 그대로 나타나는데 value값을 어떻게 자신이 원하는대로 표시하면 되는지?
-
Django 같은 경우, 토큰은 "쿠키"라는 브라우저의 기능을 사용한다!
-
그러나 웹브라우저 설정에 "쿠키"를 막아놨으면 사용을 못하므로 장고의 폼은 작동안함.
-
우리가 "한국"이라는 데이터를 보냈다고 치면 DB에 "한국"이라는 글자를 넣는게 비효율적임. DB에 "한국"이라는 글자보다 "kr" 이라는 글자를 넣는 게 용량을 훨씬 적게 쓸 수 있다.
-
그러나 value로 보내면 서버는 "한국"이 아니라 "kr" 이라는 value값을 받는다.
-
views.py에서 if문을 작성해준다. 일단 넘어온 "kr" 을 DB에 넣는 코드를 삽입 -
if req.POST.get('jnational')=="kr" nation = "한국";
🙄 html안에 <a href="{% url 'main' %}">main</a> 내용을 입력하니 에러가 나온다.
-
웹페이지를 출력할 때 장고 템플릿에 의하여 render()를 통해서 토큰이 발행되는 코드로 자동 변경이 되었다.
-
장고 템플릿 언어 안에는 토큰 외에
{% load static %},{% url 'main' %}명령어도 있다. -
{% url 'main' %}: url 명령어는 자동으로 나한테 맞는 최적화된 url을 생성해주는 코드다. -
기존
a href ="링크"를 사용할 때 여러 개 사용할 때 문제가 됨 -
장고 템플릿 언어에서 url이라고 써주면 자기가 알아서 자기 host로 주소를 변환해줌
🏃♀️ 동적 SelectBox 구현하기
-
javascript로 해결해야 한다. -
form태그 안에
required이벤트를 넣어준다. -
console.log()는 개발자만 확인할 수 있는 로그 -
프로그래밍에서
this는 자기 자신을 지칭하는 생성자 -
id는 자바스크립트가 프론트엔드 내에서 식별하기 위함, 그리고 유일하게 한 태그에만 줌 -
selected는 아무 속성 안줬을 때 최상단에 있는 value만 가져옴 -
.innerHTML은 id 안에 있는 요소의 html 문서 내용을 바꿔주는 메소드이다. -
javascript에서.innerHTML로 문장들 들여쓰기하는 건 원칙적으로 되지 않으나 다음과 같이 자바스크립트 내용 안에``로 둘러싸면 된다.
javascript 실습 코드
<form class="row g-3 my-2" action="#" method="POST"> <div class="col-md-3"> <label for="inputcity" class="form-label">시, 도*</label> <label for="inputcity" class="form-label" id="ssac_label"></label> <script type="text/javascript"> function select_gu(obj) { if (obj.value == "서울특별시") { document.getElementById("inputCounty").innerHTML = ` <option value='gangname'>강남구</option> <option value='gangdong'>강동구</option> <option value='gangbuk'>강북구</option> <option value='gangname'>강서구</option> <option value='nowon'>노원구</option> <option value='dobong'>도봉구</option> `; } else if (obj.value == "경기도") { document.getElementById("inputCounty").innerHTML = ` <option value='goyang'>고양시</option> <option value='uijeongbu'>의정부시</option> <option value='yangju'>양주시</option> <option value='namyangju'>남양주시</option> <option value='guri'>구리시</option> <option value='dongducheon'>동두천시</option> `; } else { document.getElementById("inputCounty").innerHTML = ` <option value='none'>아직 안정함</option> `; } } </script> <select id="inputcity" class="form-select" name="jcity" required onchange="select_gu(this);"> <option value="서울특별시"selected>서울특별시</option> <option value="경기도">경기도</option> <option value="인천광역시">인천광역시</option> <option value="대전광역시">대전광역시</option> <option value="세종특별자치시">세종특별자치시</option> <option value="대구광역시">대구광역시</option> <option value="광주광역시">광주광역시</option> <option value="울산광역시">울산광역시</option> <option value="부산광역시">부산광역시</option> <option value="강원도">강원도</option> <option value="충청북도">충청북도</option> <option value="충청남도">충청남도</option> <option value="전라북도">전라북도</option> <option value="전라남도">전라남도</option> <option value="경상북도">경상북도</option> <option value="경상남도">경상남도</option> <option value="제주특별자치도">제주특별자치도</option> </select> </div> <div class="col-md-4"> <label for="inputCounty" class="form-label">군,구*</label> <select id="inputCounty" class="form-select" name="jcounty" required> <option value="none">선택하세요</option> </select> </div> </form>
- 위의 방식은 하드코딩 방식으로 프로그래머에게 좋은 방법은 아니다. 따라서 위의 javascript문장들을 for문으로 구문을 간결하게 할 수 있다. 이것은 나중에 배울 예정!
🔖 Static 파일 불러오기
-
동적 파일과 달리 어떤 상황에서도 변하지 않는 파일 (ex : 이미지)
-
접속 주소 = /실제 파일의 위치(파일명)
-
실제 우리가 올리게 될 정적인 코드, 이미지 등은 접속경로를 따로 설정해줘야 함
-
폴더에다가 파일 업로드, 그런 다음에 그 파일명이 곧 접속 주소
-
Django는 MTV모델을 따르므로 App별로 모델이 있는데 static 파일도 App별로 있을 것이라고 Django는 가정하고 있다. 따라서 App폴더에 static 폴더를 만들어야한다.
-
static 파일을 불러오려면
{% load static %}을 써줘야한다. -
Django 태그 언어는 html 태그 위치에 구애받지 않아도 된다.
Static 이미지를 Django로 불러오는 방법
-
App폴더 안에 templates폴더
안에 말고!!와 같은 경로에 있는 곳에stastic폴더를 새로 만든다. -
본인 로컬에 있는 이미지를
FileZila로 static폴더에 넣어주거나 VScode에 이미지를 static 폴더로 드래그해서 넣는다. -
templates폴더 안에f.html파일을 새로 작성한다.
{% load static %}
<img src="{% static 'goose.jpg' %}">-
{% load static %} 는 static을 호출하기 위해서 반드시 넣어줘야 하는 문구!!
-
Django Templates 언어를 사용해서 이미지를 넣어줘야 한다.
urls.py파일 안에 view로 연결해줄 url주소를 만들어준다.
from django.urls import path
from . import views
urlpatterns = [
path('static', views.statictest)
]views.py파일 안에 함수를 만들어준다.
from django.shortcuts import render
import random
def statictest(req):
return render(req, 'f.html')본인 IP주소/urls.py경로/views.py경로를 입력하여 이미지가 띄워졌는 지 확인한다.
- 위와 같이 나오면 성공!!
✅ 유효성 검사 : Validation Check
-
정규표현식(Regex)을 통해 표현할 수 있다.
-
Javascript 정규표현식 :
/'정규식 언어'/: 정규표현식을/로 감싸고 시작하면서 끝낸다./^[a-z]/: a부터 z까지 있는 글자 한 개가 존재하는 범위/[a-z]{2,4}/: a부터 z까지 최소 2개부터 4개는 존재해야함/^[a-z]{2,4}@[a-z]./:@: 문자 그대로 나와야 함을 의미한다.^: 문장의 시작을 의미*: 임의의 글자 0개 이상.: 임의의 글자 1개+: 임의의 글자 최소 1개 이상\: 이스케이프 문자 -> 그 바로 뒤에 나오는 문자는 문자 그대로 받아들이기로 해요\w:[a-z, A-Z, 0-9, _(언더바)]를 사용 가능한 범위( ): 복수 개의 식 중에서 하나를 묶을 수 있다는 것을 의미$: 문장의 끝을 의미
-
/^[\w]{4,}@[\w]+(\.[\w-]+){1,3}$/ : 이메일 유효성 검사 정규표현식
-
html5의 유효성 검사는 submit 버튼이 클릭되었을 때 발동된다.
-
미리 정의한
required는 규칙을 지켰는지 검사하고 지키지 못했다면 자기가 알아서 작동을 멈춘다.
-
결론 : required 속성이 완전 좋다!
🎁 parameter 값을 url에서 받아오기
-
url에 꺽쇠
< >를 입력하게 되면 안에 무언가 주소를 입력할 수 있다 -
꺽쇠를 주면 해당 자리에 무언가 들어오기로 약속이 된 것이다.
-
http://봄인 IP주소/url경로1/urls경로2/<변수 타입n:꺽쇠n>으로 표현 -
함수 인자에 Default값 부여해도 된다.
urls.py
from django.urls import path from . import views urlpatterns = [ path('cookie/<int:count>/<str:player1>/<str:player2>', views.cookie), path('cookie/<int:count>/<str:player1>', views.cookie), path('cookie/<int:count>', views.cookie), ]
- 하나의 함수에 경로를 여러 개 설정할 수 있다!
views.py
from django.shortcuts import render import random def cookie(req, count, player1, player2): # 인자에 Default 값 부여해도 됨 return render(req, 'ab.html', { 'c':count, 'p1':player1, 'p2':player2 })
ab.html
<html> {{c}}개의 쿠키가 있다. <br> {{p1}}와 {{p2}}는 반띵해서 나눠먹을 것이다. </html>
-
결과 화면
http://본인 IP주소/headbomb/4/유승완/김철수를 도메인에 입력하면 다음과 같은 화면이 나옴
