WIL 2. 웹개발 종합반 5주차(7월 1주차)

< WIL이란? >

Weekly I Learend의 약자로, 주간 학습한 내용을 정리 후 공유하기 위해 작성하는 글이다.

 

아래는 웹 개발 종합반 강의 5주차를 1회독하면서 정리한 내용이다.

 

---

 

< 새로운 OS, 또 다시 세팅>

5주차 강의부터는 mac으로 개발환경을 옮겼다.

mongoDB 연결 하는 과정에서 오류가 있었는데, certifi 패키지를 가상환경에 먼저 설치해주니 해결되었다.

 

from pymongo import MongoClient
import certifi
ca = certifi.where()

client = MongoClient('mongodb+srv://sparta:<password>@cluster0.wtgsmkg.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

MongoClinet 에 사용되는 url은 공유할 때 유의해야할 필요가 있겠다.

---

 

<버킷리스트 프로젝트>

‘이루고 싶은 것을 입력하세요’ 빈칸에 버킷리스트를 적고,

‘기록하기’ 버튼을 누르면 DB에 등록되고,

이것을 다시 GET해와 홈페이지에 나타나도록(list up) 하는 프로젝트다.

 

 

 

1. 데이터 저장 기능 구현 (POST 연습하기: 버킷리스트 기록)

- 서버 만들기

@app.route("/bucket", methods=["POST"])

def bucket_post():
    bucket_receive = request.form['bucket_give']
    doc = {
        'bucket': bucket_receive
    }
    db.bucket.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})

기존 sample_give에서 bucket_give로 바꿔주고,

dbprac.py 파일에서 저장 예시를 가져와 맞게 수정한다.

doc을 생성할 수 있도록 명령어를 입력한다.

(dbprac.py 파일이 없어서 다시 만든다고 30분 정도 쓴듯 하다.)

 

 

- 클라이언트 만들기

      function save_bucket() {
        let bucket = $('#bucket').val()

        let formData = new FormData();

        formData.append("bucket_give", bucket);

        fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
            alert(data["msg"]);
            window.location.reload();
          });
      }

 

프론트에서는 save_bucket() 함수를 수정해준다.

클라이언트가 ‘이루고 싶은 것을 입력하세요’ 칸에 입력한 데이터를 받는 기능을 구현한다.

이 칸과 연결된 곳의 id는 bucket 이다.

이 함수를 통해 사용자가 입력한 데이터가 백엔드로 전송되고(POST 연결), 백엔드에서는 받은 데이터를 지정해둔 doc형식으로 변환하여 MongoDB에 저장한다.

window.location.reload(); 를 통해 데이터가 전송되면 홈페이지가 자동으로 새로고침 될 수 있도록 한다.

 

---

 

 

2. 데이터 불러오기 및 전시하기 (GET 연습: 버킷리스트 보여주기)

- 서버 만들기

@app.route("/bucket", methods=["GET"])

def bucket_get():
    all_buckets = list(db.bucket.find({},{'_id':False}))
    return jsonify({'result': all_buckets})

bucket_get() 함수를 수정한다.

변수 이름은 임의로 설정 가능하다. 

db의 bucket collection으로 부터 모든 데이터를 받는 변수를 만들어주고,

결과로 변수의 값을 을 반환해주도록 한다.

 

 

- 클라이언트 만들기

      function show_bucket() {
        fetch('/bucket').then(res => res.json()).then(data => {
                console.log(data)
                alert(data["msg"]);
            })
      }

show_bucket() 함수를 수정한다.

여기서 data는 앞서 구현한 bucket_get() 함수 안의 ’result': all_buckets 와 동일하다.

따라서 코드를 다음과 같이 수정한다.

        show_bucket();
      });
      function show_bucket() {
        fetch('/bucket').then(res => res.json()).then(data => {
                let rows = data['result']
                console.log(rows)
            })
      }

rows 변수를 선언하여 data를 넣고,

 

 

콘솔을 통해 찍어본다.

data를 모두 가져와 console 에 찍어보고 정상 작동하는지 확인한다.

 

 

콘솔을 통해 확인된 이 list 는 forEach 문을 통해 하나씩 돌려주도록 한다.

      function show_bucket() {
        fetch('/bucket').then(res => res.json()).then(data => {
                let rows = data['result']
                rows.forEach((a)=>{
                  let bucket = a['bucket']
                  console.log(bucket)
                })
            })
      }

 

 

다시 console.log() 를 통해 중간 결과값을 확인해주는 것이 필요하다.

1개의 결과값씩 차례대로 출력되는지 확인

 

 

마지막으로 temp_html 으로 홈페이지에 출력되도록 코딩한다.

temp_html + append

forEach 문이 돌기 전에 empty로 기존 리스트를 삭제해준다.

      function show_bucket() {

        fetch('/bucket').then(res => res.json()).then(data => {
                let rows = data['result']
                $('#bucket-list').empty()
                rows.forEach((a)=>{
                  let bucket = a['bucket']
                  let temp_html = `<li>
                                    <h2>✅ ${bucket}</h2>
                                  </li>`
                  $('#bucket-list').append(temp_html)
                })
            })
      }

아직 temp_html 의 용법을 정확히 모르겠다.

 

 

일단은 강의를 따라 웹페이지는 완성했다.

 

 

- 학습 포인트(보완 사항 도출)

• 정확히 이해가 안되는 것들도 있지만, 비슷한 프로젝트를 통해서 점점 이해가 되는 부분이 많아지고 있다. (회차 반복시에도 모르는 부분은 정리하고 넘어가는 것이 필요하겠다.)
• 웹개발종합반 강의 수강과 정보처리기사 자격증 공부와 병행하다보니, 시간 계획을 잘 세우는 것이 필요하겠다.

 

*5주차 강의 나머지 내용 정리는 WIL 2-2를 통해 게시 예정이다