- 내일배움캠프 9일차 목차
[오늘 한일]
- 연습 프로젝트 작성
- 데이터 수정기능 연습
- 깃허브 특강 수강
오늘은 연습용 프로젝트를 만들면서,
그동안 했던 기능을 복기했고 못했던 수정기능까지 만들어봤다.
깃 링크: https://github.com/barryjung/practice_project
거의 뼈대만 있는 기본형으로,
깃으로 커밋해가면서 한기능 한기능 진행했다.
앞으로 이렇게 혼자 만들어 보는 결과물도 깃허브에 올려야겠다.
[오늘 배운점]
<수정기능의 특이점들>
지난 두번의 프로젝트를 진행했지만 수정기능까지 만들어 본적은 없어서,
수정기능은 익히기를 보류하고 있었다.
지난주 발표때 수정기능을 몇몇 조에서 한걸보고 머리속으로 기능 구현을 상상해봤었다.
수정 기능은 다른 기능보다 좀 더 복잡하다.
삭제처럼 타겟 데이터를 특정하는 과정이 필요하고,
수정을 편하게 해주려면 입력된 데이터를 가져와서
사용자가 가공할수 있게 텍스트를 제공해줘야 한다.
.
추가적으로 웹페이지에서 텍스트를 제공해주는 칸이 입력칸 자체면 더 직관적이다.
그러면 입력버튼은 잠시 수정버튼으로 둔갑해야 한다.
내가 혼자 고민해보면서 작성한 코드는 이렇다.
우선 기능을 두가지 동작으로 구분했다.
@app.route("/modify_set", methods=["POST"])
def modify_set():
name = request.form['name_give']
task = db.tasks.find_one({'name': name}, {'_id': False})
return jsonify({'result': task})
@app.route("/modify_confirm", methods=["POST"])
def modify_confirm():
base_name = request.form['base_name_give']
name = request.form['name_give']
content = request.form['content_give']
doc = {'name': name, 'content': content}
db.tasks.update_one({'name': base_name}, {'$set': (doc)})
return jsonify({'result': '수정 완료!'})각각 동작의 API부분이다.
수정할 내용을 세팅하는 동작과 수정한 내용을 입력하는 동작으로 나눴다.
이번에도 간단하게 이름을 구분값으로 이용했다.
modify_set은 넘겨 받은 이름으로 해당 데이터를 찾아서 넘겨준다.
이에 대응하는 자바스크립스 함수는 이렇다.
function modify_set(name) {
let formData = new FormData()
formData.append("name_give", name)
fetch('/modify_set', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
let rows = data['result']
let name = rows['name']
let content = rows['content']
$('#name').attr('value', name)
$('#content').attr('value', content)
$('#input_area>button').text('수정')
$('#input_area>button').attr('onclick', 'modify_confirm("' + name + '")')
})
}매개변수로 입력받은 이름을 POST요청에 실어보낸다.
응답을 이용해서 텍스트를 작성해준다.
여기서 새로 배운 개념이 있다.
대상 텍스트에 해당하는 부분이 name과 content인데 둘다 입력칸,
즉, input 태그안으로 들어가야한다.
처음에는 $('#name').text(name)으로 작성했는데 input칸에 제대로 작성되지 않는다.
인터넷으로 알아보니 input태그안에 텍스트를 채우려면
태그에 'value' 속성 값으로 부여해줘야 한다는 것이다.
그래서 위 코드처럼 $('#name').attr(속성, 값)으로 작성하니 사진처럼 잘 작성된다.
입력버튼에는 text('수정')으로 텍스트만 바꿔주면 된다.
(이부분도 태그가 어떻게 작성됬냐에 따라 다를 수 있을 것이다.)
흥미로웠던 것은 attr을 이용해서 onclick함수 부분도 쉽게 대체 할수 있었다는 점이다.
대체되며 수정확인으로 동작하는 함수부분은 이렇다.
function modify_confirm(base_name) {
let name = $("#name").val()
let content = $("#content").val()
let formData = new FormData()
formData.append("base_name_give", base_name)
formData.append("name_give", name)
formData.append("content_give", content)
fetch('/modify_confirm', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
alert(data['result'])
window.location.href = '/'
})
}여기서는 base_name이라는 이름을 썼는데,
구분 값이 되는 이름과 새로 입력되는 이름을 다르게 하기 위해서이다.
그래서 구분 값(이름), 바뀌는 이름, 내용이 함께 전송된다.
api에서는 구분 값으로 수정할(업데이트할) 데이터 열을 찾고
바뀔 이름, 내용을 작성해 데이터를 수정하는 것이다.
최종적으로 '수정완료!' 메세지와 화면 새로고침까지 잘 동작되었다.
결론, 수정기능이 역시나 복잡하다.
다방면으로 이해가 된 지금이 아니였다면, 수월하게 못했을 것 같다.
다른 팀은 어떻게 했는지, 또 어떤 차이점이 있을지 궁금하다.
<True와 False의 위계>
파이썬 강의를 듣다가,
갑자기 의문점이 들어서 테스트 해본 내용이다.
True는 False보다 크다. 즉 이렇다.
print(True > False) #True
print(False < True) #True
print(False <= False) #True
print(True >= True) #True
<not과 all, any조합의 해석순서>
이것도 강의 내용중 궁금해서 테스트해본 부분이다.
all과 any에 대해 배웠는데 not을 이용해 참,거짓을 반전시키면 어떻게 동작할지 궁금했다.
테스트 내용은 이렇다.
print(all([True, True])) #True
print(any([True,False])) #True
print(not all([True,False])) #True
print(not any([False,False])) #True
print(not all([True,True])) #False
print(not any([True,False])) #False
그러니까, all과 any의 참,거짓 판정을 먼저 하고 그 결과를 뒤집는다.
해석하는 순서가 중요한것 같다.