서버에 토큰을 보내서 서버는 세션 DB에서 해당 토큰과 일치하는 정보를 찾는다. 세션은 모든 세션 ID를 DB에 저장하고, 요청이 들어올 때마다 서버는 쿠키에 담긴 세션 id와 일치하는 유저를 찾아야한다. 요청이 있을 때마다 DB에서 세션 ID를 찾아야 하므로 유저가 늘어나면 DB 리소스도 증가하게 된다.

JWT

토큰 형식이고, 세션 DB가 필요없다. 따라서 서버는 DB에서 유저를 찾는 일을 하지 않아도 된다. 브라우저에서 유저 정보를 받으면 서버는 sign을 한다. 그리고 사인된 정보를 string 형태로 브라우저로 보낸다.

동작방식

브라우저에서 토큰 또는 사인된 정보를 보낸다. 서버는 토큰을 받으면 해당 사인이 유효한지 체크하고(조작된 토큰은 아닌가) 토큰이 유효하다면 성공.

세션 vs JWT

HTTP 프로토콜의 특징

• connectionless 클라이언트가 서버에 요청을 한 후 응답을 받으면 연결을 끊어버리는 특징
• stateless 통신이 끝나면 상태를 유지하지 않는 특징

HTTP 프로토콜의 특징이나 약점을 보완하기 위해서 쿠키와 세션을 사용한다.

2. 🍪쿠키(Cookie)

• 쿠키는 클라이언트(브라우저) 로컬에 저장되어 있는 키와 값이 들어있는 작은 데이터 파일이다.
• HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다.
• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
• 유효시간을 정할 수 있어, 브라우저가 종료되어도 인증이 유지된다.
• 클라이언트에 300개까지 쿠키저장이 가능하다.
• 하나의 도메인당 20개의 쿠키를 가질 수 있다.
• 하나의 쿠키값은 4KB까지 저장 가능하다.
  

쿠키 구성요소

• 이름 : 각각의 쿠키를 구별하는 데 사용
• 값 : 쿠키의 이름과 관련된 값
• 유효시간 : 쿠키 유지 시간
• 도메인 : 쿠키를 전송할 도메인. 유튜브에서 준 쿠키는 유튜브에만 보낼 수 있다.
• 경로 : 쿠키를 전송할 요청 경로
  

쿠키 동작 순서

1. 클라이언트가 페이지를 요청한다.
2. 서버에서 쿠키를 생성한다.
3. HTTP 헤더에 Set-Cookie 속성에, 쿠키를 포함 시켜 응답한다.
4. 클라이언트는 쿠키를 로컬에 보관하였다가, 같은 요청을 할 때, 서버에 쿠키와 함께 요청을 한다.
5. 서버에서 쿠키를 읽어, 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답한다.
   

3. 세션(Session)

• 세션도 쿠키를 사용한다. 쿠키는 세션 ID를 전달하기 위한 매개체이다.
• 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리, 세션은 서버 측에서 관리한다. 브라우저에는 오직 세션 ID만 저장된다.
• 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하여, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지한다.
  

세션 동작 순서

1. 클라이언트가 서버에 접속 시, 서버는 세션 ID를 부여하여 DB에 저장한다.
2. 서버는, 쿠키에 세션 ID를 포함시켜 응답한다.
3. 클라이언트는 서버에 요청할 때, 세션 ID가 포함된 쿠키를 서버에 전달하여 요청한다.
4. 서버는 세션 ID를 전달받는다. 이때 서버는 세션 ID가 있는 쿠키와 함께 요청이 들어온 것만 알지 정보를 알지는 못한다.
5. 해당 세션에 저장되어 있는 클라이언트 정보를 가져와 응답한다.
   

🍪쿠키 vs 세션

세션보다는 쿠키?

세션은 서버의 자원을 사용하기 때문에 정보가 많아지면 서버 메모리를 많이 차지하고, 속도가 느려질 수 있다.

네이티브 앱에서는 세션을 사용할 수 있지만, 쿠키는 브라우저에만 있으니 사용할 수 없다. -> Token 등장!

HTTP(HyperText Transfer Protocol)는 말 그대로 하이퍼텍스트를 전송하기 위해 사용되는 통신 규약이다. 정보를 네트워크를 통해 텍스트로 주고 받게 되는데, 네트워크에서 전송 신호를 인터셉트하는 경우 원하지 않는 데이터 유출이 발생할 수 있다. 따라서 이러한 문제를 해결하기 위해 HTTP에 S(Secure Socket)이 추가된 HTTPS가 도입되었다.

HTTPS

• 데이터를 주고 받는 과정에서 '보안' 요소가 추가
• 기본 TCP/IP 포트는 443이고, SSL 프로토콜 위에서 동작
• 일반 텍스트를 사용하는 대신, 정보를 암호화하는 TLS이나 SSL 프로토콜을 사용하여 데이터를 암호화

HTTPS 장단점

당연하게도 HTTPS는 안전하다. 서버와 브라우저 사이의 통신에 인터셉트가 일어나지 않도록, 웹사이트의 무결성을 보호해준다.

HTTPS에는 단점이 없는가?

• SSL을 사용하기 때문에, 서버와 클라이언트 모두 암복호화 처리가 필요하다. 따라서 서버에 부하를 주어 하드웨어 리소스 소비가 불가피하고, 그 때문에 HTTP보다 통신 속도가 느리다.

• 중요한 정보만을 암호화하여 리소스를 절약할 수 있다.

• HTTPS를 사용한다고 무조건 안전한 것은 아니다. 신뢰할 수 었는 CA기업을 통해 인증서를 발급할 수 있다.
• 추가 비용이 발생한다.

HTTPS 알고리즘

공개키 방식과 공개키의 느리다는 단점을 보완한 대칭키 방식을 함께 사용한다. 공개키 방식으로 대칭키를 전달하고, 서로 공유된 대칭키를 가지고 통신하게 된다.

공개키 방식

공개키와 비공개키를 이용하는데, 이걸 key pair라고도 한다. 둘이 쌍이라는 이야기임. 평문을 공개키로 암호문으로 만들고, 다시 복호화하기 위해서는 비공개키가 필요하다. 반대로 평문을 비공개키를 이용해서 암호문으로 만들면, 공개키로 복호화가 가능하다. 후자도 가능하지는 몰랐네.....

그렇다면 공개키 방식을 사용하는 이유는 뭘까. 공개키 방식을 사용하는 이유는 배달사고때문이다. 평문과 암호문을 나만 보면 대칭키 방식을 사용하면 된다. 하지만 특정한 상대에게 메세지를 보내야하는 경우에, key를 보내야 하는데, 이때 key가 도난당할 수 있음.

대칭키 방식

대칭키 도난은 어떻게 당하는거지

목표는 (A가 B에게 암호문과 키를 전달하여) B가 평문을 아는 것이다. 준비물은 A의 대칭키와 평문이다. 여기서 평문은 hello라고 하였다(세상 귀찮음).

1. 먼저 A는 평문을 대칭키를 이용하여 암호화한다.
2. 암호문과 대칭키를 B에게 전달한다. 3-1. B는 암호문을 대칭키를 이용하여 복호화하여 평문을 알 수 있다! 짜잔. 3-2. 하지만 네트워크로 암호문과 대칭키를 전달하는 과정에서 Cracker가 키를 훔쳐서 복화할 수 있음 주의.

공개키는 안전하지

목표는 위와 같이 B가 평문을 아는 것! 준비물은 B의 공개키와 비밀키와 평문이다.

1. 먼저 A는 평문을 B의 공개키를 이용하여 암호화한다.
2. 암호문을 B에게 전달한다. 3-1. B는 암호문을 자신의 비밀키를 이용하여 복호화하여 평문을 알 수 있다! 3-2. Cracker가 암호문을 훔쳐서 공개키로 복호화하려하지만, 실패!!ㅠ 공개키로 암호화하였기 때문에 비밀키로만 복호화가 가능하기 때문이지.

여기서 A가 공개키로 평문을 암호화하였지만, A도 비밀키가 없기 때문에 복호화가 불가능하다.

전자서명

공개키 방식은 보안에 취약하지 않기(?)때문에 전자서명에 사용된다.

전자서명의 목표는 B가 작성한 내용이 정말로 B가 작성했는가? 인증에 있음!

1. B가 평문을 B의 비밀키를 이용하여 암호화한다. 이 암호문이 전자서명이다.
2. 평문과 암호문을 공개영역에 올린다.
3. A는 B의 공개키를 이용하여 복호화한다. 복호화한 결과가 B가 작성한 평문과 일치하면 인증 성공!
4. Cracker 본인이 만든 공개키와 비밀키가 있고, 조작된 평문이 있다. Cracker의 비밀키를 이용하여 조작된 평문을 암호화하고, 이 암호문과 조작된 평문을 공개영역에 올린다.
5. 만약 A가 이 암호문을 가지고 와서 B의 공개키로 해독을 하면, 해독이 되지 않고, 평문도 다르다. -> 해당 내용은 B가 작성한 것이 아님!

정리

HTTP의 문제를 해결하기 위해서 HTTPS가 등장했고, 해당 알고리즘에는 공개키 방식과 대칭키 방식이 있다. 대칭키 방식에는 보안 문제가 있기 때문에 공개키 방식으로 보안 취약점을 개선!

1차원 배열에서 2개의 포인터를 조작하는 방식

조건

1. left, right 포인터 2개
2. 처음 포인터는 left = 0, right = 0
3. left <= right

여기서 중요한 것은 [left, right) 라는 것이다. 따라서 left = right이면 크기가 0인 배열이다.

알고리즘

부분합이 M인 경우를 찾는다고 해보자.

1. 부분합이 M보다 클 경우, left 1 증가
2. 부분합이 M보다 작을 경우, right 1 증가
3. 부분합이 M일 경우, count -> left 1 증가

left가 이동하는 경우는

• 부분합이 M보다 클 경우
• 부분합이 M일 경우
• right가 가장 마지막 index에 위치할 경우

초기상태

1. left = 0, right = 0
2. sum = 0
3. M = 21
4. count = 0

1. 초기상태는 L = 0, R = 0 이다. sum = 0 이므로 R을 오른쪽으로 이동한다.

2. sum = 3으로 M보다 작다. R을 오른쪽으로 이동한다.

3. sum = 5으로 M보다 작다. R을 오른쪽으로 이동한다.

4. sum = 10으로 M보다 작다. R을 오른쪽으로 이동한다.

5. sum = 15으로 M보다 작다. R을 오른쪽으로 이동한다.

6. sum = 21으로 M과 같다. count = 1 이다. L을 오른쪽으로 이동한다.

7. sum = 19으로 M보다 작다. R을 오른쪽으로 이동한다.

8. sum = 22으로 M보다 크다. L을 오른쪽으로 이동한다.

9. sum = 20으로 M보다 작다. R을 오른쪽으로 이동한다.

10. sum = 24으로 M보다 크다. L을 오른쪽으로 이동한다.

11. sum = 19으로 M보다 작다. R을 오른쪽으로 이동한다.

12. sum = 24으로 M보다 크다. L을 오른쪽으로 이동한다.

13. sum = 19으로 M보다 작다. R이 이미 제일 끝에 위치하므로 L을 오른쪽으로 이동한다.

14. sum = 11으로 M보다 작다. R이 이미 제일 끝에 위치하므로 L을 오른쪽으로 이동한다.

15. sum = 9으로 M보다 작다. R이 이미 제일 끝에 위치하므로 L을 오른쪽으로 이동한다.

16. sum = 5으로 M보다 작다. R이 이미 제일 끝에 위치하므로 L을 오른쪽으로 이동한다.

17. sum = 0으로 M보다 작다.

코드

n = 9 # 데이터의 개수 N
m = 21 # 찾고자 하는 부분합 M
data = [3, 2, 5, 5, 6, 4, 4, 5, 7] # 전체 수열

count = 0
interval_sum = 0
right = 0

# left를 차례대로 증가시키며 반복
for left in range(n):
    while interval_sum < m and end < n:
        interval_sum += data[right]
        right += 1
    # left가 이동하는 구간
    # 부분합이 m보다 크거나 같을 경우
    if interval_sum == m:
        count += 1
    interval_sum -= data[left] # 합에서 제외하고 -> for문에서 오른쪽으로 이동

print(count)

어려웠던 점

right부분이 열린구간인 점을 간과한 점이 제일 큰 오류였다. 이 부분 때문에 다른 사람의 코드를 봐도 이해가 안된듯..!!ㅠ 이전 구간의 합을 확인한 후 -> 이동해도 됨? 판단하는 로직이었다. 순서 뒤 바뀌면 안돼~

1. 요구사항 지키기

단순히 구현하는 것보다 여러가지 요구사항을 지키는 것이 더 어려웠다. 우테코 자체가 구현은 베이스로 깔고, 클린 코드를 작성하는 것을 연습시키는 느낌이다. 한 주 과제가 끝나면, 전체 피드백을 주는데, UI로직과 비즈니스 로직을 구분하라는 것이 있었다. 그동안 얼마나 코드를 중구난방 작성했는지 현타가 왔다.

2. 기능단위로 커밋

아무생각없이 코딩하다보면 커밋을 까먹을 때도 있지만, 이번 프리코스에서는 기능 단위로 커밋을 하려고 했다. 기능 요구사항을 적고, 하나하나 확인해가며, 구현하였다.

3. 예외사항

요구사항에 있는 예외사항 이외의 내가 생각해야 하는 예외사항이 여럿 있었다. 능동적인 코딩을 하게 되었다.

이번주 토요일(2021.12.18)에 우테코 마지막 관문이 남아있다. 솔직히 다들 너무 잘하셔서 붙을지는 모르겠지만, 최선을 다해서 과제에 임할 것이다.

1. HTTP는 무엇일까

• HTTP(Hypertext Transfer Protocol)
• 클라이언트(웹에서는 브라우저)와 서버 간에 데이터를 주고 받기 위한 방식
• 응용계층에 위치
  

2. HTTP 특징

• stateless : 이전 상태를 알 수 없다.
• connectionless : 서버에 연결하고, 요청해서 응답을 받으면 연결을 끊어버린다. -> 이러한 문제를 해결하기 위해 Cookie와 Session 등장
  

3. HTTP 요청 메소드

4. HTTP 동작방식

• 서버/클라이언트 모델을 따른다. 서비스 제공자(service provider)과 서비스 요청자(service requester)로 구분되는 네트워크 모델
• TCP/IP 위에서 작동하고, 기본 포트는 80번이다. TCP : 데이터의 흐름 관리, 데이터의 정확성 확인 IP : 패킷을 목적지까지 전송하는 역할

클라이언트가 URI를 통해 요청(Request)를 보내면, 서버는 해당 요청(Reqeust)을 받아 처리하여 클라이언트에게 응답(Response)하는 형태

Request

웹 브라우저는 웹 서버에 데이터를 요청하는 클라이언트 프로그램이다. HTTP 형식으로 메소드 + URI(요청하는 자원의 위치 명시) + HTTP 프로토콜 버전을 포함하여 서버에 요청한다. 그 외에 Host, Content-Type, Cookie 등이 Request Header에 포함된다.

Response

HTTP 형식으로 응답코드, 응답메시지를 포함하여 응답한다. 그 외에 Content-Type, Set-Cookie 등이 Response Header에 포함된다.

URI(Uniform Resource Identifiers) HTTP와는 독립된 다른 체계이다. HTTP는 전송 프로토콜이고, URI는 자원의 위치를 알려주기 위한 프로토콜이다. 클라이언트(웹에서는 브라우저)는 URI에 자원의 위치를 담는다.
http://www.test.co.kr/index.html

1. http : 자원에 접근하기 위한 http 프로토콜을 사용
2. www.test.co.kr(도메인 주소) : index.html이라는 자원의 인터넷상 위치

Content-Type

HTTP 메시지(요청과 응답 모두)에 담겨 보내는 데이터의 형식을 알려주고, 헤더에 포함된다. HTTP 표준 스펙을 따르는 브라우저와 웹서버는 Content-Type 헤더를 기준으로 HTTP 메시지에 담긴 데이터를 분석하고 파싱한다. 만약 Content-Type 헤더가 없다면 데이터를 전송하는쪽(브라우저나 웹서버)에서는 특정한 형식의 데이터일지라도 데이터를 받는 입장에서는 단순히 텍스트 데이터로 받아들인다. HTTP 요청이 GET방식인 경우에는 무조건 URL 끝에 쿼리스트링으로 value=text 형식으로 보내지기 때문에 Content-Type은 필요가 없다. 하지만 POST나 PUT처럼 메시지 BODY에 데이터를 보낼 때는 Content-Type를 추가해야한다.

5. HTTP 상태 코드

2XX : 성공

3XX : 리다이렉션

4XX : 클라이언트 에러

5XX : 서버 에러

• stack 리스트에는 현재 node와 앞으로 탐색해야 할 node가 담겨있다. stack은 가장 나중에 담긴 것을 가장 먼저 탐색하므로 순서를 잘 생각하며 append한다.

• visited는 빈 리스트로 초기화한다. node에 방문했을 때 차례대로 append하면, 방문한 순서를 알 수 있다.

• DFS는 그래프가 인접 노드를 확인할 수 있는 그래프가 필요하다. 아래 두 가지 방식이 있는데,

  • 인접 행렬 방식
  • 인접 리스트 방식 이 두 가지의 장단점은 깃헙에 정리두었다. 장단점 알아가기

• 목표 : [[], [2, 3], [1, 5], [1, 4], [3, 5], [2, 4]]

  • 항상 번호와 index 사이에서 오류가 잘 나기 마련이어서 애초에 0행을 만들어주지만 사용하지 않는 것으로 방어 코딩(?)을 해보겠다.
  • input값을 받아 어떻게든 graph를 위의 형식을 출력을 한다.

    5 4
    5 2
    1 2
    3 4
    3 1

    위에 처럼 input값을 받아준다면

    for _ in range(M):
    v1, v2 = map(int, input().split()) # 한 줄에 들어오는 것을 각각 node로 받는다.
    graph[v1].append(v2) # 해당 노드의 인접 노드로 append해준다.
    graph[v2].append(v1) # 무방향이므로 다른 노드에도 append해준다.
    

  for adj in graph: adj.sort()

  처럼 graph를 만들어줄 수 있다.
  > **sort를 해주는 이유**
  > input이 정렬되어 들어오는 것이 아닐 수 있고, 코테 문제에 보면, 인접 노드가 여러 개일경우에는 번호가 작은 것 먼저 탐색 또는 큰 것 먼저 탐색하라는 조건이 있을 수 있기 때문이다. 따라서 일단 정렬을 해주는 것이 좋다. 
  DFS 기능을 생각하면 순서와 상관없이 처리해주어도 되지만, 방문 순서가 다를 수 있다.
  

2. 반복

while stack:으로 stack이 빌 때까지 반복한다. while문 안의 구조는 다음과 같다.

• stack에 담긴 node중에 현재 위치를 설정한다. pop()을 사용하면 가장 마지막 노드가 할당되고, 리스트에서는 삭제된다.
• 현재 노드가 방문한 노드인가?
  • 방문 처리를 한다.
  • stack에 현재 노드에 인접한 노드를 추가한다. extend()를 사용한다.
• stack이 비었을 때 visited를 리던한다.

extend()를 사용하는 이유 extend() 메소드를 살펴보면, 리스트안에 리스트로 들어가는 것이 아니라, 값이 바로 들어간다. 따라서 2차원 리스트가 되는 것을 막을 수 있다. 주의해야 할 점은, stack에 넣는 것이므로, 인접한 노드가 여러 개일 경우, 어느 노드부터 탐색하라는 조건이 있을 때, 경우에 따라서 reversed를 사용해야 할 수도 있다.

아래와 같은 코드로 작성하였다. 이 코드가 내가 dfs를 이해할 수 있는 코드이다.

N, M, V = map(int, input().split()) # V부터 탐색하시오!
# 인접행렬 방식
adjacency = [[] for _ in range(N+1)]
for _ in range(M):
  v1, v2 = map(int, input().split())
  adjacency[v1].append(v2)
  adjacency[v2].append(v1)

for adj in adjacency:
  adj.sort()

def dfs(adjacency, start_node):
  visited = []
  stack = [start_node] # 시작
  while stack: # stack이 빌 때까지
    now = stack.pop()
    if now not in visited: # 방문하지 않으면
      visited.append(now)
      stack.extend(reversed(adjacency[now])) # 작은 노드부터 탐색해야된다.

  return visited

print(dfs(adjacency, V))

다음에는 재귀함수로 푸는 방법을 연구해봐야겠다.

a = []   # 빈 값
b = [1, 2, 3]   # 숫자
c = ['Life', 'is', 'too', 'short']   # 문자
d = [1, 2, 'Life', 'is']   # 숫자+문자
e = [1, 2, ['Life', 'is']]   # 숫자+리스트

print(b[1]) # 2
print(b[-1]) # 3 -> 뒤에서부터
print(c[1]) # is
print(d[2]) # Life
print(e[2]) # ['Life', 'is']
print(e[2][0]) # Life
print(e[2][1]) # is

리스트의 슬라이싱

a[이상:미만:간걱]

a = [1, 2, 3, 4, 5]

print(a[0:2]) # [1, 2]
print(a[:2]) # [1, 2]
print(a[2:]) # [3, 4, 5]

리스트의 더하기

a = [1, 2, 3]
b= [4, 5, 6]

print(a + b) # [1, 2, 3, 4, 5, 6]

리스트 반복하기

a = [1, 2, 3]

print(a * 3) # [1, 2, 3, 1, 2, 3, 1, 2, 3]

리스트에서 하나의 값 수정하기

a = ['한', '재', '유']
a[0] = '김'

print(a) # ['김', '재', '유']

리스트에서 연속된 범위의 값 수정하기

a = ['한', '재', '유']
a[0:2] = ['김', '현']

print(a) # ['김', '현', '유']

[] 사용하여 리스트 요소 삭제하기

a = [1, 'a', 'b', 'c', 4]
a[1:3] = []   # 빈 리스트로 교체

print(a) # [1, 'c', 4]

del 함수 사용해 리스트 요소 삭제하기

a = [1, 'a', 'b', 'c', 4]
del a[0]

print(a) # ['a', 'b', 'c', 4]

리스트에 요소 추가(append)

a = [1, 2, 3]

print(a.append(4)) # [1, 2, 3, 4]

리스트 정렬(sort)

a = [1, 4, 3, 2]

# 가나다, 알파벳, 숫자는 크기 순
print(a.sort()) # [1, 2, 3, 4]

리스트 뒤집기(reverse)

a = ['a', 'c', 'b']

print(a.reverse()) # ['b', 'c', 'a']

위치 반환(index)

a = [1, 2, 3]

print(a.index(3)) # 3번 있냐

2 # 2번째에 있음

리스트에 요소 삽입(insert)

a = [1, 2, 3]

print(a.insert(0, 4)) # 0번째 index에 4를 추가

[4, 1, 2, 3]

< insert vs append > append는 맨 뒤에 추가 insert는 특정 index에 삽입할 수 있다

리스트 요소 제거(remove)

a = [1, 2, 3, 1, 2, 3]

print(a.remove(3)) # 3이라는 값 제거

[1, 2, 1, 2, 3] # 가장 맨 앞에 있는 3만 제거

모두 없애려면 for문 이용

리스트 요소 끄집어내기(pop)

a = [1, 2, 3]

print(a.pop()) # 마지막 요소를 뽑는다
print(a) # 마지막 요소 제거

3
[1, 2]

리스트에 포함된 요소 X의 개수 세기(count)

a = [1, 5, 3, 1, 1]

print(a.count(1)) # 1의 개수를 센다

3

리스트 확장(extend)

a = [1, 2, 3]
a.extend([4, 5])

print(a) # [1, 2, 3, 4, 5]

알고리즘 연습을 위해 deque 라이브러리는 사용하지 않는다. 다만 어떻게 사용하는지는 알아두자.

1차원

1. 준비

필요한 것은 q 리스트, visited 리스트, count이다.

• q에는 현재 위치가 담겨져 있다.
• visited에는 0의 값을 가지는 리스트이고, 리스트의 크기를 설정해준다. (리스트의 크기를 잘못 설정할 시 런타임 에러가 발생할 수 있다.)
• bfs는 보통 최단거리, 최단시간을 묻는 문제이므로 시간 및 거리를 담을 수 있는 count = 0(문제에 따라 1일 경우도 있음)을 준비한다. → count를 q에 데리고 다니는 것이 포인트이다.

2. 반복

while q 로 q가 빈 queue가 될 때까지 반복한다. 반복문 내부의 구조는 다음과 같다.

• q에 담긴 node들 중에 현재 위치를 설정한다.

• 현재 count를 업데이트 한다.

• 방문한 노드를 삭제한다. (현재 위치)

• 현재 노드가 방문한 노드인가?

  • 방문했으면 if문을 빠져나와 앞으로 돌아간다. 현재 노드를 업데이트 해준다.
  • 방문하지 않았으면
    • 방문 처리 한다.
    • 찾는 노드인가? -> return count! (함수가 종료된다.)
    • 아니면 q에 append한다. (문제의 조건에 따라 if문으로 처리한다. 이때 주어진 범위에 벗어나면 안된다.)

• q가 비었을 때 -1를 리턴한다. (찾지 못한 경우)

예외문제

• 가끔씩 방문처리를 하지 않아도 되는 문제가 있다. 이때 방문처리를 위한 visited 리스트를 생성하게 되면 메모리 초과가 발생한다. A → B 문제는 방문처리를 하지 않아도 된다. 변수의 범위가 심각하게 클 경우는 이 부분을 의심해보자.

2차원

a = "Hello world"

print(a) # Hello world

a = "Hello world"

print(type(a)) # <class 'str'> 문자열

큰따옴표, 작은따옴표 따로 사용 가능 중복해서 쓰면 오류발생

a ="I'm a good girl."
# 또는
a = "i\'m a good girl." # 백슬래시 이용

print(a) # I'm a good girl.

"" '' '" "' 모두 가능

줄 띄우기

\n

""" """사이에 쓸 경우는 \n 쓰지 않아도 enter를 줄 띄우기로 인식한다.

문자열 더하기

a = "Python"
b = " is fun!"

print(a+b) # python is fun!

문자열 곱하기

a = "Python"

print(a*100) # PythonPythonPythonPythonPythonPythonPython.... Python이 100번 출력된다

인덱싱(Indexing)

a = "Python is fun."

print(a[2]) # t (0부터 시작)
print(a[-2]) # n (뒤에서 두 번째)

슬라이싱(Slicing)

a[ 이상 : 미만 : 간격 ]

a = "Python is fun."

print(a[0:2]) # Py (0이상 2미만)
print(a[3:7]) # hon (뒤에서 두 번째)
print(a[:8]) # Python i (비워두면 무조건 처음부터)
print(a[8:]) # s fun! (8이상 맨 끝까지)
print(a[::1]) # Python is fun! (1칸 간격으로)
print(a[::2]) # Pto sfn (2칸 간격으로)
print(a[::-1]) # !nuf si nohtyP (1칸 간격으로 뒤에서 부터 읽음)
print(a[::-2]) # !u inhy (2칸 간격으로 뒤에서 부터 읽음)

문자열 포메팅

a = "I eat %d apples." %3

print(a) # I eat 3 apples.

number = 10
day = "three"

a="I ate %d apples, so I was sick for %s days." %(number, day)

print(a) # I ate 10 apples, so I was sick for three days.

a = "I was sick for {} days." .format("three")

print(a) # I was sick for three days.

변수 순서는 상관없다. 변수 이름 찾아서 포메팅 가능

a = "Hello. My name is {name}. I'm {age} years old." .format(name="Lucy", age=20)

print(a) # Hello. My name is Lucy. I'm 20 years old.

name = "int"
a = f "나의 이름은 {name}입니다." # format 굳이 안써도 f만 써도 된다.

print(a) # 나의 이름은 int입니다.

정렬과 공백

a = "%s. Good today." %"hi"
b = "%10s. Good today." %"hi" # 10칸 공백
c = "%-10s. Good today." %"hi" # 뒤에서부터 10칸 공백

print(a)
print(b)
print(c)

hi. Good today.
          hi. Good today. # 10칸 공백
hi          .Good today.

소수점 표현

a = "%f" %3.423451343 # 소수점 전체 출력
b = "%0.4f" %3.423451343 # 간격.소수점 남기는 자리 수f

print(a) # 3.423451
print(b) # 3.4235

문자열 개수 세기(count)

a = "hobby"

print(a.count('b')) # b의 개수는 몇 개? 2

위치 알려주기

find

a = "hobby"

print(a.find('b')) # 2 (가장 먼저 나오는 b의 index를 알려준다)
print(a.find('x')) # -1 (없으면 -1이 출력)

index

a = "Life is too short"

print(a.index('t')) # 8 (있다)
print(a.index('a')) # ValueError : substring not found (없다)

문자열 삽입(join)

a = ",".join("abcd")

print(a) # a,b,c,d

a = ",".join(["a","b","c","d"])

print(a) # a,b,c,d

소문자를 대문자로 바꾸기(upper)

a = "hi"

print(a.upper()) # HI

대문자를 소문자로 바꾸기(lower)

a = "HI"

print(a.lower()) # hi

양쪽 공백 지우기(strip)

a = "  hi  "

print(a.strip()) # hi

문자열 바꾸기(replace)

a = "Life is too short."

print(a.replace("Life", "Your leg")) # Your leg is too short.

문자열 나누기(split)

a = "Life is too short."

print(a.split()) # ['Life', 'is', 'too', 'short'] (띄어쓰기를 기준으로 리스트로 만든다)

1. 파일을 unstaged 상태로 만들기

git reset HEAD [file]

2. stage에 있는 모든 파일을 unstaged 상태로 만들기

git reset HEAD

# hello.py

a=1

print(a) # 1

a=1

print(type(a)) # <class 'int'> 정수형

a=1.24

print(type(a)) # <class 'float'> 실수형

a=3
b=4

print(a+b) # 7

a * b(곱하기) a / b(나머지) a // b(몫) a % b(나머지) a ** b(제곱)

• 파이썬은 인간다운 언어이다
• 파이썬은 무료이지만 강력하다 → 파이썬과 C언어는 찰떡궁합
• 파이썬은 간결하다
• 파이썬은 개발 속도가 빠르다
  

파이썬 실행

# hello.py

print("hello")

$ python hello.py

터미널에서 python이라고 치면 python shell이 열린다

>>>

또는 python 3.7(32-bit)에 들어갈 수도 있다.

(파이썬 대화형 인터프리터=파이썬 셸)

앱 생성 후 초기 설정하기

로그인, 로그아웃은 home 앱에 구현해야 할까? 그렇지 않다. 하나의 웹 사이트에는 home과 같은 게시판 서비스외에도 블로그나 쇼핑몰과 같은 굵직한 단위의 앱들이 함께 있을 수 있기 때문에 공통으로 사용되는 기능인 로그인이나 로그아웃을 이 중의 하나의 앱에 종속시키는 것은 좋지 않기 때문이다. 이러한 이유로 'users' 앱을 만들어 구현할 것이다.

1. users 앱 생성하기

$ django-admin startapp users

2. 앱 등록하기

# settings.py

...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    ...
    'home',
    'users',
]
...

3. urls.py에 url 연결하기

...
urlpatterns = [
  ...
  path('users/', include('users.urls')), # users>urls.py에서 관리할거야
]

/users/으로 시작하는 URL은 모두 users>urls.py 파일을 참조할 것이다.

4. user 앱의 urls.py 생성하기

urls.py 파일을 생성하고 아래의 코드를 작성한다.

# urls.py

from django.urls import path
from .views import * # user>views에서 모든 함수를 가져온다.

app_name = "users"
urlpatterns = [
]

로그인 구현하기

1. login.html 생성하기

users 앱에 templates>users 디렉토리를 생성한 후, 그 안에 login.html 파일을 만든다.

<!-- users>login.html -->

<h1>로그인 페이지야</h1>

2. 로그인 URL 연결하기

# users>urls.py

from django.urls import path
from django.contrib.auth import views as auth_views

app_name = "users"
urlpatterns = [
  path('login/', auth_views.LoginView.as_view(), name='login'), # 수정해야하는 코드
  # django.contrib.auth앱의 LoginView 클래스를 활용했으므로 별도의 views.py 파일 수정이 필요 없음
]

django.contrib.auth 앱을 사용할 것이므로 users>views.py 파일은 수정할 필요가 없다. 여기서는 django.contrib.auth 앱의 LoginView 클래스를 사용한다. Authentication Views 관련 공식문서

3. 로그인 템플릿 만들기

user관련된 것은 users 앱에서 관리하기로 하였으므로 users/login으로 들어가면 아래와 같은 에러가 발생한다. registration/login.html이 없다는 의미인데, 아래의 공식문서를 읽어보면 어떠한 문제인지 알 수 있다. login템플릿 공식문서 LoginView는 registration이라는 템플릿 디렉토리에서 login.html 파일을 찾는다. 그런데 이 파일을 찾지 못해서 오류가 발생한 것이다. 지금 users앱에 구현할 것이므로 아래 사진과 같이 template_name='users/login.html'으로 설정하면 registration 디렉토리가 아닌 users 디렉토리에서 login.html파일을 참조하게 된다. 아래와 같이 코드를 수정해준다.

# users>urls.py

...
urlpatterns = [
  path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name='login'),
]

아래와 같이 잘 연결된다.

4. login.html 내용 구성하기

<!-- users>login.html -->

{% extends 'base.html' %}
{% block content %}

<h1>로그인</h1>
<form method="post" action="{% url 'users:login' %}">
  {% csrf_token %}
  <div>
    <label>사용자 ID</label>
    <input type="text" name="username" id="username">
  </div>
  <div>
    <label>비밀번호</label>
    <input type="text" name="password" id="password">
  </div>
  <button type="submit">로그인</button>
</form>

{% endblock %}

입력 항목 username과 password는 모두 django.contrib.auth 앱에서 요구하는 필수 항목이다.

5. form_errors.html 만들기

users>form_errors.html 파일을 만든다.

<!-- users>form_errors.html -->

{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<!-- 필드 오류를 출력한다. -->
<div>
  <strong>{{ field.label }}</strong>
  {{ error }}
</div>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<!-- 넌필드 오류를 출력한다. -->
<div>
  <strong>{{ error }}</strong>
</div>
{% endfor %}
{% endif %}

form_errors.html 파일은 로그인 실패 시 로그인이 실패한 원인을 알려 준다. 폼 오류에는 두 가지가 있는데

• 필드 오류(입력값이 누락되었거나 형식에 맞지 않음)

• 넌필드 오류(입력값과 관계없이 발생한 오류)

다 작성하면 login.html에 코드 한 줄을 추가한다.

<!-- users>login.html -->

...
<form method="post" action="{% url 'users:login' %}">
  {% csrf_token %}
  {% include 'users/form_errors.html' %} <!-- 코드 추가 -->
  <div>
    <label>사용자 ID</label>
    ...
</form>

{% endblock %}

6. 제대로 로그인해 보기

생성한 슈퍼 유저 계정으로 로그인을 해보면 아래와 같은 오류가 발생한다. 장고는 로그인을 하면 accounts/profile/ 라는 URL로 리다이렉트하는데, 지금 이 페이지가 존재하지 않아서 생긴 오류이다. 따라서 로그인 후 이동할 페이지를 등록해야 한다.

7. 로그인 성공 시 이동할 페이지 등록하기

장고는 accounts/profile/ URL로 리다이렉트하지만, 다른 URL로 이동하고 싶다. settings.py에서 마지막 줄에 코드를 추가한다.

# settings.py

# 로그인 성공 시 자동으로 이동할 URL
LOGIN_REDIRECT_URL = '/'

그러면 로그인 성공 시 / 페이지로 이동이 잘 된다.

8. 네브바에 연결하기

<!-- _navbar.html -->

<a href="{% url 'users:login' %}">로그인</a>

로그아웃 구현하기

1. 로그아웃 URL 연결하기

# users>urls.py

from django.urls import path
from django.contrib.auth import views as auth_views

app_name = "users"
urlpatterns = [
  path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name='login'),
  path('logout/', auth_views.LogoutView.as_view(), name='logout'), # 코드 추가하기
]

2. 로그아웃 성공 시 이동할 페이지 등록하기

# settings.py

# 로그아웃 성공 시 자동으로 이동할 URL
LOGOUT_REDIRECT_URL = '/'

로그아웃에 성공하면 '/' 페이지로 리다이렉트할 것이다.

3. 네브바에 연결하기

<!-- _navbar.html -->

{% if user.is_authenticated %} 
<a href="{% url 'users:logout' %}">{{ user.username }}님 로그아웃</a>
<span>||</span>
{% else %}
<a href="{% url 'users:login' %}">로그인</a>
{% endif %}

{% if user.is_authenticated %}는 현재 로그인 상태를 판별한다. {{ user.username }}는 로그인한 사용자명을 표시한다.

궁금궁금 user에는 사용자에 대한 정보가 자동으로 들어가는 것인지는 잘 모르겠다. 필드로 따로 설정한 것은 없다.

사용자 관련 공식문서 새로운 로그인, 로그아웃 방법 : 공식문서

<!-- question_list.html -->

...
  <tbody>
    <tr>
      <td>
        {% if question.answer_set.count > 0%}
        {{ question.answer_set.count }}
        {% endif %}
      </td>
      ...

답변이 있는 경우를 조사하고, 있으면 표시하고 없으면 표시하지 않는다.

# views.py
...
from django.core.paginator import Paginator
...

def question_list(request):
  questions = Question.objects.order_by('-create_date') # Question 모델 데이터를 작성일시의 역순(-)으로 정렬한다.
  # Paging 기능 구현하기
  page = request.GET.get('page', '1') # GET 방식 요청 URL에서 page값을 가져올 때 사용(?page=1). page 파라미터가 없는 URL을 위해 기본값으로 1을 지정한 것
  paginator = Paginator(questions, 5) # Paginator 클래스는 questions를 페이징 객체 paginator로 변환. 페이지당 5개씩 보여주기
  page_obj = paginator.get_page(page) # page_obj 객체에는 여러 속성이 존재
  context = { 'questions_list' : page_obj } # page_obj를 question_list에 저장한다.
  return render(request, 'home/question_list.html', context)

5개씩 보이도록 설정하여서 5개만 보인다. page_obj 객체에는 다음과 같은 속성들이 있다.

페이징 적용하기

<!-- question_list.html -->

...
</table>
<ul>
  <!-- 이전 페이지가 있으면 -->
  {% if questions_list.has_previous %}
  <a href="?page={{ questions_list.previous_page_number }}">이전</a>
  {% endif %}
  <!-- 페이지 리스트 -->
  {% for page_number in questions_list.paginator.page_range %}
  <!-- 현재 페이지 번호랑 같다면 style을 다르게 줄 수 있다. -->
  {% if page_number == question_list.number %}
  <li>
    <a href="?page={{ page_number }}">{{ page_number }}</a>
  </li>
  {% else %}
  <li>
    <a href="?page={{ page_number }}">{{ page_number }}</a>
  </li>
  {% endif %}
  {% endfor%}
  <!-- 다음 페이지가 있으면 -->
  {% if questions_list.has_next %}
  <a href="?page={{ questions_list.next_page_number }}">다음</a>
  {% endif %}
</ul>
<!-- <a href="{% url 'home:question_create' %}">질문 등록하기</a> -->
<!-- 모델 폼 이용하지 않을 경우 -->
<a href="{% url 'home:question_new' %}">질문 등록하기</a>

{% endblock %}

템플릿에 사용된 {{ questions_list }}가 바로 views.py 파일의 page_obj이다. 다시 말해 템플릿의 {{ questions_list.previous_page_number }}는 `{{ page_obj.previous_page_number }}와 동일하다.

페이지 표시 제한 기능 구현하기

현재 문제

임의의 데이터 300개를 넣어보자.

$ python manage.py shell
>>> from home.models import Question
>>> for i in range(300):
...     Question.objects.create(subject="test data [%03d]" %i, content="test data")  
... 

하면 데이터 300개가 생긴다. 여기서 문제점은 아래 사진과 같다. 페이지 버튼이 너무 많아진다.

해결방법

<!-- question_list.html -->

...
  <!-- 페이지 리스트 -->
  {% for page_number in questions_list.paginator.page_range %}
  <!-- 코드 추가하기 : 페이지 표시 제한 기능 구현하기 -->
  {% if questions_list.number|add:5 >= page_number and page_number >= questions_list.number|add:-5 %}

...

{% if questions_list.number|add:5 >= page_number and page_number >= questions_list.number|add:-5 %} : 현재 페이지 기준으로 좌우 5개씩 보이도록 한다. questions_list.number보다 5만큼 크거나 작은 값만 표시되도록 만든 것이다. |add:-5는 5만큼 빼라는 의미이고, |add:5는 5만큼 더하라는 의미이다. 현재 페이지가 8페이지라서 페이지 번호는 3부터 13까지 보여진다.

테플릿 필터 직접 만들어 보기

템플릿 필터란 템플릿 태그에서 |문자 뒤에 사용하는 필터를 말한다. 예를 들어 None 대신 공백 문자열을 보여주기 위해 사용했던 default_if_none과 같은 것을 템플릿 필터라고 한다.

{{ form.subject.value|default_if_none:''||

현재 문제

페이지마다 게시물 번호가 항상 1부터 시작되는 문제가 있다.

해결 방법

1. 게시물 번호 공식 만들기

만약 질문 게시물이 12개라면(한 페이지에 10개씩 표시) 1페이지에는 12번째3번째 게시물이, 2페이지에는 2번째1번째 게시물이 역순으로 표시되어야 한다. 질문 게시물의 번호를 역순으로 정렬하려면 다음과 같은 공식을 적용해야 한다.

일련번호 = 전체 게시물 개수 - 시작 인덱스 - 현재 인덱스 + 1

시작 인덱스는 페이지당 시작되는 게시물의 시작 번호를 의미한다. 예를 들어 페이지당 게시물을 10건씩 보여준다면 1페이지의 시작 인덱스는 1, 2페이지의 시작 인덱스는 11이 된다. 현재 인덱스는 페이지에 보여지는 게시물 개수만큼 0부터 1씩 증가되는 번호이다. 따라서 전체 게시물의 개수가 12개이고 페이지당 10건씩 게시물을 보여 준다면 1페이지의 일련번호는 12 - 1 - (0 ~ 9 반복) + 1이 되어 123까지 표시되고 2페이지의 경우에는 `12 - 11 - (01 반복) + 1이 되어 2~1이 표시될 것이다. 템플릿에서 이 공식을 적용하려면 빼기 기능이 필요하다. 앞에서 더하기 필터(|add:5)를 사용한 것처럼 빼기 필터가 있으면 좋을 것 같지만 장고에는 빼기 필터가 없다. 그래서 우리는 빼기 필터를 만들 것이다.|add:-5`와 같이 숫자를 직접 입력하면 더하기 필터를 이용하여 원하는 값을 뺀 결과를 화면에 보여줄 수는 있다. 하지만 이 방법은 이곳에는 사용할 수 없다. 왜냐하면 더하기 필터에는 변수를 적용할 수 없기 때문이다.

2. 템플릿 필터 디렉토리 만들기

템플릿 필터 함수는 템플릿 필터 파일을 작성한 다음에 정의해야 한다. 템플릿 필터 파일은 템플릿 파일이나 스태틱 파일과 마찬가지로 home/templatetags 디렉토리를 새로 만들어 저장해야 한다. 또한 templatetags 디렉토리는 반드시 앱 디렉토리 아래에 생성해야 한다. 공식문서에 따르면 디렉토리 안에 __init__.py파일이 필요하다.

3. 템플릿 필터 작성하기

# home_filter.py

from django import template

register = template.Library()

@register.filter
def sub(value, arg):
  return value - arg

템플릿 필터 함수를 만드는 방법은, sub함수에 @register.filter라는 애너테이션을 적용하면 템플릿에서 해당 함수를 필터로 사용할 수 있게 된다. 템플릿 필터 함수 sub는 기존 값 value에서 입력으로 받은 값 arg를 빼서 반환할 것이다.

4. 템플릿 필터 사용하기

우리가 직접 만든 템플릿 필터를 사용하려면 템플릿 파일 맨 위에 {% load home_filter %}와 같이 템플릿 필터 파일을 로드해야 한다. 만약 템플릿 파일 맨 위에 extends 문이 있으면 load 문은 extends 문 다음에 위치해야 한다.

<!-- question_list.html -->

{% extends 'base.html' %}
<!-- 추가 -->
{% load home_filter %} 
{% block content %}

...
  <tbody>
    {% if questions_list %}
    {% for question in questions_list %}
    <tr>
      <!-- 추가 -->
      <td>{{ questions_list.paginator.count|sub:questions_list.start_index|sub:forloop.counter0|add:1 }}</td>
...

문제가 해결되었다.

navbar 코드 작성하기

djangoMaster > templates > shared 디렉토리에 _navbar.html 파일을 생성하고 아래의 코드를 작성한다.

<!-- djangoMaster > templates > shared > _navbar.html -->

<span>여기가 네브바야 ----> </span>
<a href="{% url 'main' %}">메인으로 가기</a>
<span>||</span>
<a href="{% url 'home:question_list' %}">질문 목록으로 가기</a>

include 적용하기

<!-- base.html -->

...
<body>
  <!-- 네브바 위치 -->
  {% include 'shared/_navbar.html' %}
  ...
</body>  

include 기능은 템플릿의 특정 영영을 중복, 반복해서 사용할 경우에 유용하다. 즉, 중복, 반복되는 템플리싕 특정 영역을 따로 템플릿 파일로 만들고, include 기능으로 그 템플릿을 포함한다. _navbar.html 파일은 base.html 파일에서 1번만 사용되지만 따로 파일로 관리해야 이후 유지, 보수하는 데 유리하므로 분리하였다.

빌드하기

1. cmd창으로 프로젝트 파일에 들어오기

나의 프로젝트 파일인 hello.spring까지 들어오고 내부를 살펴보면

이러한 파일들이 있는데,

2. gradlew 파일 실행하기

윈도우 기준으로, ./gradlew build 명령어를 치면 빌드가 실행된다.

처음에는 gradlew build만 쳐서 이러한 오류가 계속 났었다.

실행하기

1. build 폴더에 들어가기

build가 잘 되면 build 폴더가 생긴다.

cd build 를 통해 build 폴더에 들어간다.

2. libs 폴더에 들어가기

build 폴더 내부를 살펴보면, libs 폴더가 있다.

cd libs를 통해 libs 폴더에 들어간다.

3. jar파일 실행하기

libs 폴더 내부를 살펴보자. build가 잘 되었다면 18M짜리 파일인 hello.spring-0.0.1-SNAPSHOT.jar 파일이 있어야 된다. jar 파일을 실행시켜보자. java -jar hello.spring-0.0.1-SNAPSHOT.jar

서버 배포할 때는 jar파일만 복사해서 서버에 넣어주고 java - jar~~~ 코드를 실행시키면 된다. 그렇다면 서버에서 spring이 실행된다.

잘 되지 않으면 ./gradlw clean build를 해보자. ./gradlw clean이 build폴더를 완전히 삭제된다.

스프링 프로젝트 만들기

자바는 11을 사용하였다.

<!-- question_detail.html -->

{% extends 'base.html' %}
{% block content %}

<div class="container my-3">
  <h1 class="border-bottom py-2">{{ a_question.subject }}</h1>
  <div class="card my-3">
    <div class="card-body">
      <div class="card-text" style="white-space: pre-line">
        {{ a_question.content }}
      </div>
      <div class="d-flex justify-content-end">
        <div class=" badge-light py-2">
          {{ a_question.create_date }}
        </div>
      </div>
    </div>
  </div>
  <div class="border-bottom my-3 py-2">
    {{ a_question.answer_set.count }}개의 답변이 있습니다.
    {% for answer in a_question.answer_set.all %}
    <div class="card my-3">
      <div class="card-body">
        <div class="card-text" style="white-space: pre-line;">{{ answer.content }}</div>
        <div class="d-flex justify-content-end">
          <div class="badge-light p-2">
            {{ answer.create_date }}
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
    <form action="{% url 'home:answer_create' a_question.id %}" method="post" class="my-3">
      {% csrf_token %}
      <div class="form-group">
        <textarea name="content" id="content" class="form-control" rows="10"></textarea>
      </div>
      <input type="submit" value="답변등록" class="btn btn-primary">
      <!-- {{ form.as_p }}대신 forms.py 사용 -->
      <!-- 오류표시 Start -->
      {% if form.errors %}
      <div class="alert alert-danger" role="alert">
        {% for field in form %}
        {% if field.errors %}
        <strong>{{ field.label }}</strong>
        {{ field.errors }}
        {% endif %}
        {% endfor %}
      </div>
      {% endif %}
      <!-- 오류표시 End -->
    </form>
  </div>
</div>


{% endblock %}