5. Flask (CRUD)

API 동작 원리

1. Client ─ [ HTTP request ] → API ─→ Server

클라이언트의 데이터, 요청 방식에 맞는 API가 요청을 확인

이후 Server는 함수 안에 정의된 동작을 수행 후 요청에 대한 응답을 리턴

 

2. Server ─ [ HTTP response ] → API ─→ Client

이때의 서버로부터의 응답은 Page, JSON 등의 데이터가 클라이언트에게 전달될 것이다

 

 

[CRUD 주요 기능]

Create → 데이터 생성

: 저장 기능과 관련이 크다(생성된 데이터를 보관하기 위해서는 저장이 필수)

 

Read → 데이터 조회

: 읽기 기능과 관련이 크다(오로지 조회만을 위한 읽기 기능)

 

Update → 데이터 수정

Delete → 데이터 삭제

: 저장, 읽기 기능 둘 다 관련이 있다

 수정과 삭제를 하기 위해서는 먼저 저장되어 있는 데이터가 있어야 한다

 그리고 저장되어 있는 데이터를 찾은 후 수정과 삭제를 해야 하기 때문에 저장, 읽기와 관련

 

 

[역할 별 매칭]

CRUD	HTTP Method	DB 명령어
Create	POST	INSERT
Read	GET	SELECT
Update	PUT, PATCH	UPDATE
Delete	DELETE	DELETE

 

---

Board Create & Read

[App.py]

if request.method == 'POST':

데이터의 흐름은 Client가 보내는 request.method를 Server가 받았을 때 동작하는 조건문이다

해당 request.method가 POST 라면 아래의 조건을 실행한다는 의미

 

board.append([request.form['name'], request.form['context']])

 board list에 ['name', 'context']를 묶어서 0번 인덱스부터 하나씩 넣는 과정

위와 같이 append의 값으로 바로 request를 받아오는 것이 가능하다

 

return redirect(url_for('index'))

 

( ) 소괄호 안에 해당하는 주소로 다시 재요청(redirect)을 하겠다는 의미

index로 돌아가면 다시 처음 접속 시 보았던 API(Board.html을 반환하고 있는)를 보게 된다

 

 

[Board.html]

<input type = "text" name = "name" />
<br>내용<br>    
<textarea name = "context" cols="50" rows="10"></textarea>

화면에서 Client의 입력 데이터가 <form> 안에 POST method로 전달되는 부분

(이때, 해당 데이터를 전달받는 API에서는 name option으로 지정된 데이터만 인식한다)

 

{% for row in board %}
<tr>
  <td>{{ loop.index }}</td>
  <td>{{ row[0] }}</td>
  <td>{{ row[1] }}</td>
</tr>
{% endfor %}

App.py의 index( )의 리턴값으로 Board.html에 반환받은 board가 Jinja에 전달

App.py에 board list에 저장된 값들을 하나씩 for문을 통해 출력한다

loop.index는 for문이 실행될 때마다 몇 번째 인덱스에 위치하고 있는지 인덱스 번호를 반환(목차)

row [0]과 row [1]는 배열 안에 배열의 형태로 아래와 같이 값이 저장되게 된다

 [ [0, 1], [0, 1], [0, 1] ] 

 

 

전체 과정의 데이터의 흐름을 살펴보면 아래와 같이 이동하며 요청, 응답이 이루어진다

 

실행 시 아래와 같은 결과를 볼 수 있는데, index( )에서 리턴 값으로 board.html을 계속 출력하기 때문에

위와 같이 페이지의 이동이나 변화없이 계속해서 입력 데이터가 저장되어가는 것을 확인할 수 있다

Board Update & Delete

[Update]

Create와 Read를 모두 활용해야만 구현할 수 있는 기능

Create로 만들어진 데이터의 위치 정보를 Read 할 수 있어야지만 Update가 가능하다

 

return render_template('list.html', rows = board)

if request.method == 'POST':
    board.append([request.form['name'], request.form['context']])
    return redirect(url_for('index'))

위 코드는 Create에서 값을 입력받아 저장하면서 Jinja로 데이터를 넘겨주는 과정임을 확인했다

여기서 Update 기능이 추가되며,  <a> 안에 링크를 가진 "수정"이라는 String 데이터를 추가하게 된다

 

각각의 Create 데이터마다 저장 위치를 구분하기 위해서 고유한 uid 값을 가지게 작성되어있다

여기서 uid 값은 loop.index를 할당받게 되는데, 목차에 표시되는 숫자 값이 loop.index의 데이터

loop.index는 서버에 저장되는 board의 index보다 1씩 더 높은 값을 가지게 되는 차이점이 있다

일반적으로 컴퓨터 언어의 index는 0부터 시작하게 되지만, 현재 loop.index는 시작 값이 1로 시작한다

즉, 데이터가 저장된 인덱스의 위치는 uid-1에 해당하는 곳이 된다

url과 함께 수정하려는 데이터의 목차의 숫자를 확인해보면 uid의 값을 파악하기 수월할 수 있다

(철수는 board[0]에 저장되어있는 데이터지만, 화면에는 loop.index[1]의 데이터로 표시되고 있음을 확인)

 

board[uid-1] = [request.form['name'], request.form['context']]

 그렇기 때문에 board[uid-1]로 값이 저장되어있는 인덱스를 찾아 해당 인덱스의 값을 바꿔줄 수 있다

 

if request.method =='POST':
    board[uid-1] = [request.form['name'], request.form['context']]
    return redirect(url_for('index'))
else:
    return render_template('update.html',index=uid,rows=board)

<a>태그 안 "수정"을 누르기만 하는 것은 GET 요청으로 update.html의 화면을 출력할 것이고,

update.html에서 <input>으로 값을 변경하는 순간, POST 요청을 보내며 if의 조건문이 실행된다

이후 index로 redirect 수행, Update가 완료된 새로운 데이터를 가진 list.html 화면을 볼 수 있게 된다

 

 

[Delete]

Update에서 위치를 찾기 위해 사용한 uid 데이터를 그대로 활용하여 해당 인덱스의 데이터를 비워주기만 하면 된다

board.remove(board[uid-1])
return redirect(url_for('index'))

remove함수를 통해 board[uid-1] 위치의 데이터를 지워주고 index(list.html)로 redirect

이때, 지워진 데이터를 제외한 나머지 데이터들이 화면에 출력되기 위해 다시 Jinja의 반복문을 통과하게 되며

새롭게 loop.index의 값을 부여받게 되며, 목차의 숫자까지 순서대로 초기화가 이루어진다

 

 

정상적으로 모든 기능이 구현되었다면 아래와 같은 결과를 확인할 수 있다