📚 TIL 4일차

오늘 주요 사항 (5/18, 목요일)

1. 복습 - AWS, GET과 POST
2. 발표 준비

오전 9시부터 밤 9시까지 총 12시간을 앉아서 공부만 하는 건 힘들지 않은데, 끝나고 보상심리(?)가 발동해서 놀다가 늦게 자는 일이 종종 발생한다. 늦은 취침 → 아침 일찍 기상 → 늦은 취침 → (반복) ... 을 하다보니 아침에 점점 피곤해지는 악순환이... 오늘은 일찍 자자고 다짐하면서 TIL 4일차 작성 시작.

발표 준비

내일이 대망의 발표 일... 따로 공용 시트를 파서 목표, 핵심 기능, 새롭게 배운 것들, 소감을 팀원들과 함께 작성했다. 작성한 서류와 작업물들을 토대로 발표 담당자 분이 발표 영상을 촬영하실 예정.

복습

오늘 자습은 웹개발 종합반 강의 5주차에 있는 AWS에 대해 복습해볼 예정. (따로 정리하지는 않았다) 추가로 GET과 POST 명령에 대한 것도 다시 학습 했는데, 골머리 아프던 fetch()문을 드디어 이해하게 되었다. 후련함 ㅎㅎ

POST 요청 사용하기

app.py와 index.html 간에 GET과 POST 요청이 어떻게 돌아가는지... 다시 한 번 공부했다. 어제 작성했던 pymongo와 flask에 대한 글도 참고용으로 첨부.

🐒 pymongo로 MongoDB 시작하기
👨‍🔬 flask 시작하기

공통사항

1⃣ 가상서버(venv)를 열고 flask, pymongo, dnspython을 설치

pip install flask pymongo dnspython

2⃣ 사용할 프레임워크를 import하고, MongoDB와도 연결

# 프레임워크 임포트
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

# db 연결
from pymongo import MongoClient
client = MongoClient('내 MongoDB URL')
db = client.dbsparta

POST 요청

📁 app.py

POST = 정보를 저장(생성)하거나 갱신할 때 사용하는 명령어이다. 'bucket_give'를 통해 들어오는 정보를 bucket_recieve 변수에 저장하는데, 이 'bucket_give'는 아래 📁index.html의 save_bucket() 메서드로부터 받아온다.

@app.route("/bucket", methods=["POST"])
def bucket_post():
    # 'bucket_give'를 통해 들어오는 정보 저장
    bucket_receive = request.form['bucket_give']
    doc = {
        'bucket' : bucket_receive
    }
    # 내 몽고DB bucket 콜렉션에 데이터 삽입
    # = pymongo(insert_one)
    db.bucket.insert_one(doc)

	# '저장 완료!' 라는 메세지(msg)를 띄움
    return jsonify({'msg': '저장 완료!'})

📁 index.html

.val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드라고 한다. id가 #bucket인 <input>으로부터 값을 가져오는 것이다.

출처: jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

FormData는 HTML 단이 아닌 자바스크립트 단에서 폼 데이터를 다루는 객체이다. append(key, value) 메소드를 통해 'bucket_give'라는 key 값과 bucket이라는 value 값을 추가한다.

출처: 🌐 FormData 사용법 & 응용 총정리 (+ fetch 전송)

function save_bucket() {
	
  	// id가 #bucket인 <input>으로부터
  	// 값을 가져와 bucket 변수에 저장
	let bucket = $('#bucket').val();

  	// key = "bucket_give"
  	// value = bucket
	let formData = new FormData();
	formData.append("bucket_give", bucket);

  	// method: "POST" = 새로운 POST 생성
  	// body: formData = formData 변수 할당
  
  	// .then()
  	// 1) 요청이 끝나면 응답을 JSON 형태로 파싱해줘.
  	// 2) 요청이 끝나면 `bucket_post()` 메서드로부터 반환된
  	//    `'msg': '저장 완료!'`라는 메세지를 페이지에 띄워줘.
	fetch('/bucket', { method: "POST", body: formData, })
      	.then((response) => response.json())
      	.then((data) => {
      
      		// 페이지에 "msg" 메세지 띄우기
			alert(data["msg"]);
      		// 새로고침
			window.location.reload();
		});
}

fetch('서버주소') 는 웹 브라우저에게 '이 서버주소로 요청해줘' 라는 의미이다. 여기서는 MongoDB의 'bucket' 콜렉션을 의미하는게 아닌가 싶다.

새로운 포스트를 생성하기 위해서 method 옵션을 "POST"로 지정하고, body 옵션에는 formData 변수를 할당했다.

.then이 붙으면 '요청 끝나고 이 할일을 해줘!' 라는 의미이다. response.json()은 응답을 JSON 형태로 파싱하는 정보이기 때문에, '요청이 끝나면 응답을 JSON 형태로 파싱해줘.' 정도로 해석할 수 있겠다.

그런 다음 data 변수를 임의로 만들어 명령을 처리하는데, 앞의 📁app.py의 bucket_post() 메서드로부터 반환된 'msg': '저장 완료!'라는 메세지를 페이지에 띄우는 일을 한다.

출처: 🌐 Fetch API 으로 AJAX 요청하기

GET 요청 사용하기

📁 app.py

GET = 정보를 가져올 때 사용하는 명령어이다. db.[콜렉션명].find()로부터 가져온 정보를 all_buckets변수에 에 저장한다. 그리고 반환된 'result'는 아래 📁index.html의 show_bucket() 메서드로 전달되는 모양새(?)로 보인다.

@app.route("/bucket", methods=["GET"])
def bucket_get():
    # 정보 가져오기
    all_buckets = list(db.bucket.find({}, {'_id': False}))

	# all_buckets를 'result'로 반환
    return jsonify({'result': all_buckets})

📁 index.html

위의 POST에서 언급했듯 fetch('서버주소')는 웹 브라우저에게 '이 서버주소로 요청해줘' 라는 의미이다. POST와는 달리 method나 body 옵션을 따로 건드리지 않은 걸 확인할 수 있다.

fetch 내부에서는 📁app.py로부터 반환된 'result': all_buckets를 rows 변수에 저장한다. 그런 다음, forEach()문으로 rows를 탐색하면서 bucket 콜렉션에 있는 데이터를 가져와 출력한다.

function show_bucket() {

  	// '/bucket'에 GET 요청
  	// 응답을 json 형태로 파싱한 다음
  	// data를 처리한다
	fetch('/bucket')
		.then(res => res.json())
      	.then(data => {
      
      		// 앞의 `bucket_get`으로 부터 전달받은
      		// 'result'를 row 변수에 전달
			let rows = data['result'];
      		// id가 '#bucket-list'인 항목을 비운다는 뜻
      		// (= 갱신할 때마다 초기화)
			$('#bucket-list').empty();

      		// forEach() 문을 돌면서
			rows.forEach((e) => {
              
              	// bucket 콜렉션에 있는 데이터를 가져온다
				let bucket = e['bucket']

                // html 태그를 작성
                // ${bucket} = 받아온 bucket 정보를 출력하기 위한 문법
				let temp_html
					= `
						<li>
							<h2>✅ ${bucket}</h2>
						</li>
					`

                // id가 #bucket-list인 곳에 temp_html 값을 붙인다.
				$('#bucket-list').append(temp_html);
			
            }); // rows.forEach
        }) // fetch
}

$('#bucket-list').append(temp_html)는 id가 #bucket-list인 곳에 작성된 temp_html을 붙여주는 일을 한다.

잡담

어제 프로젝트 작업 분량의 대부분을 끝내서 그런지 오늘은 제법 널널했다. 팀원분들 중 한 분이 하차하셔서 정렬을 살짝 손 댄 것 말고는? 더 할만한 건 보이지 않았고, 자습과 리프레시에 시간을 더 할애할 수 있는 날이었다. 갑자기 비가 오는 바람에 애써 말려놓은 빨래가 다 젖어서 정신이 없었지만...................... 🌧️🌧️🌧️

여태 다른 팀들 결과물이 궁금했는데, 마땅히 볼 수 있는 방법이 없어서 아쉬웠다. 하지만 내일은 대망의 발표일이기 때문에... 드디어 볼 수 있는 기회가 생겼구나! 싶어서 내일이 오기를 꽤 기대하고 있다. (금요일이기도 하고!)