1.학습한 내용

1)Create

개발자 도구에서 Preserve log 를 선택하면. network 에 기록이 남게된다.
그렇게 남게되는 network 의 내용의 headers 를 확인하면 method 가 get 으로 설정되어있는 것을 볼수있다.
이는 get으로 설정되어 있는 값은 입력되어있는 값을 본다는것을 알수있다.

이를 수정하기 위해서는 method 가 post로 설정이 되어야 입력이 가능하다.

또한 method 가 설정이 되어 있지않다면 기본적으로 get으로 설정되어있다.

이를 통하여서 서버에 기록이 되는 코드를 짜고자 한다면 method 가 get이 아닌 post 인 route를 만들어야한다.
이전 수업에 만든 create route에 살을 붙이게되면

@app.route('/create/')  
  content = '''
   <form action="/create_process/" method="POST">   
     <p><input type="text" name="title" placeholder="title"></p>
     <p><textarea name="body" placeholder="body"></textarea></p>
     <p><input type="submit" value="create"></p>
   </form>
  '''
  return template(content)

위의 코드의 경우에는 create를 실행을 하면
create 의 text와 textarea 에 입력한 내용이 각자 title, body로서 제출이 되는 코드가
form 을 통해서 create_process 에 method 가 post로서 수정을할수있게 된다.
이때 create_process 는

@app.route('/create_process/', methods=["POST"])
def create_process():
  global nextId
  title = request.form['title'] 
  body = request.form['body']
  newTopic = {"id":nextId, "title": title , "body" : body}
  topics.append(newTopic) .
  nextId = nextId + 1  
  return redirect(f'/read/{nextId-1}/')

/create/ 에서 /create_process/ 로 수정이 오게되어서 작동하는데.
이때, 새로운 list 를 create 하려는 코드이기 때문에

그 다음에 추가될 값으로서 nextId = 4 를 추가한다.

새로운 topic 을 모으는 리스트 newTopic 의 내용으로써
id 는 다음에 추가될 순서의 값인 nextId ,
title을 차지하는것은 create에서 text타입에 입력된 title,
body를 차지하는것은 create에서 textarea 타입에 입력된 body 가 입력이 되고.
이 입력된 title과 body값이 가장 기초가되는 template 에 입력이 되기위해서 request 함수를 사용하는데, 이는 비활성화가 되어있는 코드이기 때문에

from flask import request

를 하여 request를 활성화해서 불러온다.
끝으로 이렇게 설정한 newTopic 의 내용을 기존의 topics 에 추가하기 위해서
리스트에 정보를 추가하는 함수인 append 함수를 사용하여 topics 에 입력한 값들을 추가하게된다.

추가를 하였으니 그 다음 순서를 만들기 위해서
nextId 의 값을 1을 추가하는 nextId = nextId +1 을 추가한다.
nextId에 1을 추가하는 이 코드는 이 route 안에서만 적용되는 코드이기때문에, 이를 함수밖에서도 적용이 될수 있도록 하기 위해서
global nextId 의 코드를 추가한다.
그 후 수정이 된 화면으로 돌아가기 위해서 redirect 함수를 사용하는데,
이 또한 request와 마찬가지로 비활성화되어있는 코드이기 때문에

from flask import redirect

코드를 추가한다.
하지만 이렇게 from flask import ㅁㅁㅁ
를 하는것은 길이가 길어지기 때문에

사진과 같은 방식으로 콤마를 이용하여 한줄로 만들수있다.

이를 통해서

이 화면에서 title 에 'create', body 에 '4번째 리스트'라는 text를 입력하고 create 버튼을 눌러서 제출을 하게되면.

화면과 같이 4번째에 create 라는 리스트가 추가된것을 확인할수있다.

2)Delete

기존의 리스트에서 create 를 통하여 추가를 하였다면, 이를 없앨 필요도 있기때문에 delete 키를 만들게 된다.
이때 delete 의 경우에는 상태의 변화를 줘야하기때문에 get 이 아닌 post의 method 를 가져야하고, 이 때문에 delete는 링크인 a를 사용하는것이 아닌 form 을 사용해야한다.

     <li>
        <form action="/delete/{id}/" method="POST">
          <input type="submit" value="delete">
        </form>
      </li>

하지만 이러한 형식에서 id값을 지정하기 위하여 template 함수에 id를 설정하게 되면, id를 지정하지 않는 함수들이 작동하지 않는 오류가 발생하게되는데.
이때 내용이 없으면 작동을 하지 않는다라는 기능을 추가 하기 위하여

위와 같이 None 을 추가한다.

이러한 delete 제출버튼을 만들었다면 이를 작동시킬 route 또한 필요한데.

@app.route('/delete/<int:id>/', methods=["POST"])
def delete(id):
  for topic in topics:
    if topic['id'] == id:
      topics.remove(topic)
      break;
  return redirect('/')

위와 같이 코드를 짜게 되면 id번째의 리스트에서 delete 버튼을 누르게 되면
topic 의 id 가 delete 버튼을 누른 리스트의 id와 같을때.
리스트에서 정보를 없애는 함수인 remove 함수를 사용하여
topic에 포함이 되어있는 topics 를 지우고
redirect 를 통하여 지워진 화면으로 이동을 하게 된다.

이를 통해서

2번째 리스트인 css 에서 delete 를 제출하게되면

기존의 2번째 리스트였던 css 가 사라지고 js가 2번째의 리스트자리로 옮겨진것을 확인할수있다.

3)데이터베이스

위와 같은 내용들은 preserve log 를 사용하여 network 에 기록이 남기는 하지만, 내용을 수정할때마다 새로 저장이 되면서 그전에 설정하였던 내용들은 사라지게 된다.
그렇기 때문에, 영구적으로 저장을 하기 위해서는 DB(database) 를 사용하게 되는데. 이때
DB의 경우 가장 사용이 많이 되는것들은 relational , 관계형 데이터베이스가 가장 많이 사용이 된다.
이는 심화형 엑셀과 비슷한다.

table 이라는 표가 있을때.
여러가지의 table들을 연관지어서 모아놓은것을 database, 데이터베이스라고 한다.

1)SQLite3

SQLiteStudio 라는 프로그램을 사용하면 간단하게 데이터베이스를 만들어 낼수 있다.

이를 실행 시키면

이러한 화면이 나오는데 여기서 왼쪽에서 오른쪽 클릭을 하여 데이터베이스 - add a database 를 하게 되면

위와 같은 화면이 나오면서 데이터베이스 파일을 추가할수 있게 된다.

그 후 만들어진 데이터베이스 하위에 있는 tables 에 오른쪽을 클릭하여 create table을 하게되면

새로운 테이블이 추가되게 된다.

이후 화면에서 위에 부분을 더블클릭을 하게 되면 이제
이렇게 테이블의 내용을 추가할수 있게 된다.
column name 은 column 의 이름.
datatype 은 현재는 INTERGER 와 TEXT 밖에 배우지 않았지만. INTERGER는 숫자, TEXT는 문자를 입력할수 있게된다.

이때 Constraints 에서
Primary key : 고유한 값을 가지게 한다. 똑같은 이름을 가질수없게한다.
Not NULL : 내용이 없으면 안된다.

라는 내용이 적용될수있다.

이렇게 추가를 하고나면

이러한 표가 나오고 이를 저장하면 나오는 표에서는 data를 입력할수 있게 된다.
앞의 Structure 와 data가 있지만. 이를 DDL 에서 보면

위와 같은 내용으로 코드가 실행이 되었다는것을 알수있다.

이 표에서 +를 눌러서 리스트의 내용을 추가할수도 있지만.

이 표를 마우스를 눌러서 추가하는것이 아닌
code를 통해서도 추가를 할수있는데
open SQL editor 라는 버튼을 누른후.

예를들어서 title에는 practice , body에는 practice is difficult 를 추가하고 싶다면.

화면과 같이 코드를 적은후 위에 파란색 화살표로 실행을 시키면.
테이블의 안에있는 practice 의 data 상에

입력한 내용이 추가되어있는것을 확인할수 있다.

2)Glitch 에서 sqlite3

이전에 이용해보았던 Glitch 에서는 sqlite3 를 만드는 도구가 저장되어 있어서 이를 이용할수 있다.

이는 터미널을 이용하면 가능하다.
터미널에서 sqlite3 코드를 를 실행을 하면 sqlite3가 작동한다.
우선 데이터베이스인 practice를 만든다면.

이를 통하여서 practice 라는 데이터 베이스를 만들고.
이것은 .exit 를 누른후 ls코드를 입력하는것으로

practice.sqlite3 파일이 만들어진것을 확인할수있다.
위에서 테이블을 작성할때 확인했던 DDL을 보았을때

이러한 코드를 그대로 복사해서 터미널에서

이를 실행하는것으로 같은 테이블을 만들수있는것이다.

2.학습내용 중 어려웠던 점

이전의 수업에서는 순차적으로 진행을 하여서 순차적으로 봤던 것에 비하여
이번의 delete 버튼을 만드는 과정에서 기존의 함수인template 의 구성을 바꾸고, 그 과정에서 오류가 생기는 것을 확인하여 보는 코드의 위치가 위아래로 왔다갔다를 자주하는것이 머리속에 혼란을 주었다.

3.해결방법

오류가 났을때마다 log를 확인하고 위에서부터 차례대로 순서대로 다시 확인을 하였을때 오류가 나는 원인을 찾아내어서 수정을 하는것으로 해결을 할수있었다.

4.학습소감

점점 배우는것이 복잡해져가는것이 힘들지만 더 많은 기능을 사용할수있다는 점은 즐거웠다.
아직 익숙치 않은탓에 수업진행을 머리가 따라가기 힘들지만, 수업이 끝난후에 배운 내용을 복습을 하는 과정에서 이해가 부족했던 내용을 이해되는 점들이 보람차다.