항해 99 사전 수업 4주차

2022년 10월 9일
항해 99 사전 수업 4주차

배운 내용
1 flask
2 서버 GET, POST
3 백엔드, 프론트엔드 연결

Flask
파이썬에서 사용하는 서버 연결하는 패키지.
JavaScript에서는 express를 사용했는데 그거랑 같은 의미인 것 같다.

npm i express, ejs

설치해서 했었는데 이제 눈이 조금씩 익숙해져 가는 것 같다.

POST 연습 코드

app.py

@app.route('/')
def home():
	return render_template('index.html')
    
@app.route('/work', methods=["POST"])
def home_post():
	a_receive = request.form['a_give']
    
    doc = {
    	'a' : a_receive,
    }
    db.works.insert_one(doc) // mongoDB 데이터저장
    
    return jsonify({'msg':'POST'})

index.html

function post() {
	let a = $('#a').val() // a의 input 값
    
    $.ajax({
    	type: 'POST',
        url: '/work',
        data: {a_give: a},
        success: function (response){
        	alert(response['msg'])
            window.location.reload() // 입력 후 새로고침

예전에도 혼자 공부할 때도 스펠링 하나 틀려서 몇시간동안 헤메고 했던 기억이 난다.
이번에도 POST 부분에서 저장이 안되서 한참을 헤메다가 결국 해결했는데
항상 알고보면 모르는 것도 있지만 대부분이 허무하게 스펠링 하나 차이일 때가 많다.
조금 더 집중해서 보고 꼼꼼히 살펴야겠다.

GET 연습 코드

app.py

@app.route('/work', methods=['GET'])
def home_get():
	work_list = list(db.works.find({}, {'_id':False}))
    return jsonify({'works':work_list})

index.html

function get() {
	$.ajax({
    	type: 'GET',
        url: '/work',
        data: {},
        success: function (response) {
        	let rows = response.works // 데이터베이스 저장된 배열로 변수 rows에 저장
            for (let row of rows) {
            let a = row.a
            
            let txt = `a가 들어가야할 곳의 html 코드
            ex) <div> ${a} </div>`
            
            $('#a가 들어가야할 곳 id).append(txt)
            }
        }
    })
}

오늘은 이미 쓸 얘기가 바닥났는데 어째야 하지..
오늘 안에 5주차 다 보고 숙제하고 자고 싶은데 내일은 슬프게도 월요일이라 조금만 고민해봐야겠다.

확실히 프론트, 백 둘다 재밌는데 그래도 프론트 먼저 해야겠다.
백은 프론트부터 해놓고 천천히 조금씩 공부해야겠다.