사전캠프 2주차

2주 차

지난 주보다 백엔드 실습이 훨씬 많았던 2주 차! 

MongoDB와 파이썬을 연동해보고, Flask로 웹서버를 구현해보았다. 거기에 AWS로 배포까지.. 👏

이번 주를 보내며 겪었던 우여곡절을 정리해본다. 글이 길어질 것 같아 몇몇 부분은 따로 작성해야겠다 싶기도..

 

 

팬명록

MongoDB

NoSQL인 MongoDB를 처음 사용해보았다. 가입부터 프로젝트, 클러스터 생성까지.. 👀
그런데 막상 DB에 데이터를 넣으려 하니 에러 발생... 

 

🚫 m1 맥북에서 mongoDB 연결 안 되는 현상

SSL CERTIFICATE_VERIFY_FAILED 오류인데, pymongo는 TLS/SSL을 이용해서 서버와 연결하는데 특정 환경에서 지원을 안 하는 경우가 있다고 한다. 그래서 certifi라는 패키지를 추가로 설치해주었다.

from pymongo import MongoClient
import certifi
ca = certifi.where() // 추가한 부분

client = MongoClient('[DB URL]', tlsCAFile=ca) // 추가된 매개변수
db = client.[DB이름]

 

관련 문서

TLS/SSL and PyMongo — PyMongo 4.3.2 documentation

 

 

숙제 완성

여차저차 해서 완성된 4주 차 숙제..
지난주에 완성했던 정적인 페이지를 좀 더 동적으로 만드는 과정이었다.

파이썬 웹 프레임워크 중 하나인 Flask로 서버를 만들어서

작성하면 mongoDB로 데이터가 넘어가고, 새로고침 되면서 리스트에 추가된다.

이미지 크기 문제로 갑자기 아이브로 변경😇

이후 AWS EC2 인스턴스에 배포하는 과정을 거쳐서 아래 도메인에서 확인해볼 수 있게 되었는데,

AWS의 요금 폭탄을 방지하기 위해 아마 조만간 인스턴스를 종료하지 않을까 싶다 👀...

 

http://yujleee.shop/

IVE FAN MESSAGES

 

AWS는 처음 접할 때는 너무나도 어려웠지만 경험이 몇 번 쌓여서 그런가 이젠 좀 괜찮은듯..😇

 

 

 

 

 

투두 리스트

추가로 혼자 연습해볼 겸 투두 리스트를 만들었다.

서버 쪽은 강의를 기반으로 파이썬으로 CRUD 하는 API들을 추가해서 만들어주었다.

각 기능에 맞게 HTTP 메서드를 GET, POST, PUT, DELETE로 구성했다.

 

강의와 다르게 클라이언트 쪽 동작을 바닐라 JS로 짜느라 JSON 데이터를 받아오는 과정에서 약간의 삽질이 있었다..
Flask에서는 request.is_json으로 request 데이터가 JSON 데이터인지 간단하게 확인이 가능했다.

    print(request.is_json)

 

그리고 get_json() 메서드로 JSON 데이터를 가져와서 꺼내올 수 있다.

@app.route("/todo/done", methods=["PUT"])
def todo_done():
    params = request.get_json()
    num_receive = params['num_give']
    db.todo.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})

    return jsonify({'msg': '투두 완료!'})

 

그리고 AWS에 인스턴스를 하나 더 만들어서 배포했는데, 실습 후 인스턴스를 바로 종료해서 현재는 저 URL로 접속 불가능 ㅎㅎ..

 

구현

추가 버튼이나 엔터를 누르면 추가된다.
DB와 연동이 되어있기 때문에 새로고침해도 리스트는 그대로다.

 

 

투두 내용 부분을 누르면 프롬프트 창을 띄워서 수정이 가능하다.

<ul> 태그인 todoList에게 이벤트를 위임해서, 이벤트가 발생한 요소에서 수정이 일어나도록 했다. 

  todoList.addEventListener('click',  (e) => {
        const list = e.target.closest('h2');
        if(!list) return;

        const li = list.parentNode;
        if(li.classList.contains('done')) return;

        const text = list.innerText.slice(2).trim();
        const num = li.dataset.num;

        updateTodo(text,num);
    });

 

완료 버튼을 누르면 완료 처리되며 리스트 하단으로 이동하고, 삭제 버튼을 누르면 DB에서도 삭제된다.
입력과 완료에는 모두 insertAdjacentHTML() 메서드를 이용해서 리스트를 렌더링 했다.

 

 

 

이제 곧 본 캠프 시작.. 🥹

열심히 달려보자! 👏 👏 👏