5주차에서는 지난 4주차에 이어 두 개의 프로젝트 실습을 하며 반복학습 + 완성된 서비스를 클라우드를 통해 배포하는 작업까지 했다.
지난번 4주차때 실습했던 것과 마찬가지의 단계를 반복해줬다. 하도 반복을 해서 그런지 마지막 프로젝트때는 튜터님이 알려주기도 전에 자동으로 코드를 짜고 있는 나를 발견했다.
이번 실습을 하면서 나중에 두고두고 꺼내볼 수 있도록 특별히 설계 과정의 큰 틀을 정리해보았다.
□ 준비 단계
app.py를 만든다.
가상환경을 잡아준다.
라이브러리를 설치해준다. (나의 경우 flask, pymongo, dnspython)
▦ POST - 서버 만들기
DB를 사용하기 위해 pymongo 임포트 코드를 넣어준다.
doc를 저장해준다. 아래 코드를 가져와서 doc코드 아래(중괄호 밖)에 넣어준다. DB 저장 코드:db.users.insert_one(doc)
▦ POST - 프론트엔드 만지기
방금 만든 서버에 넣어줄 데이터를 입력받는 html영역 function에 val 함수를 사용한다.
☝️이게 입력 란의 함수 동작 지점. 여기에서 id를 가져온다.
☝️위에서 가져온 id를 지칭해서 val()을 넣어준다. $('bucket') 아니고 $('#bucket')임!!! 샵 필수
☝️그리고 바로 아래 append 안쪽 부분 명칭을 올바르게 바꿔준다.
☝️app.py쪽에서 alert 뜰때 나올 메시지를 수정한다. 제대로 작동한다면 테스트했을 때 아래처럼 나온다. 엥? 그런데 아래 사진을 보면 mongoDB에 들어온 bucket값이 undefined라고 나온다. 내가 입력한대로 나오지 않는 이유가 뭘까?
왜 이런가 하니, 내가 index.html의 bucket_save 함수에서 jQuery 오타를 냈었다. $('#bucket')이라고 지칭해야하는데 여기에서 #을 빼먹은 것이다. 챗GPT에게 물어보니까 #이 없다고 알려주길래 말해준대로 수정했더니 바로 해결되었다.
👇 POST요청이 잘 들어가고 나면 자동으로 웹 페이지가 새로고침 되게 하는 코드. save함수 맨 끝에 넣는다. window.location.reload();
■ GET - 서버 만들기
1. DB에 가서 모든 input값들을 내려줘야 하기 때문에(리스트업) '여러개 찾기' 코드를 사용한다. (아래 스샷 위치에)
all_users = list(db.users.find({},{'_id':False}))
+ 앞에 all_users 이게 변수명이다. 변수명은 아무렇게나 해도 되지만 자신이 보기 좋은 쪽으로 쓰면 좋다. 그래서 all_users → all_buckets 로 바꾸었다.
2. 그리고 바로 아래 return부분을 수정한다. 여기는 데이터를 어떻게 내려줄지 결정하는 부분인데 'msg': 'GET 연결 완료!' 로 내려줄 게 아니라 아래처럼 바꿔야 한다.
return jsonify({'result': all_buckets})
3. 그러면 서버 끝ㅎ
■ GET - 프론트엔드 만지기
1. 보낸 데이터 다시 받아오기! 아래를 보면 페이지를 열자마자 show_bucket 함수가 실행되도록 짜여있다.
☝️show_bucket 내용을 보면 'bucket'이라는 콜렉션에 뭔가를 날린다(fetch).
☝️그러면 app.py의 이 부분으로 들어온다. 얘가 뭘 받아오냐면 all_buckets를 받아온다는 뜻이다. 그렇다는 것은 프론트엔드에서 받아와서 보여줄 데이터도 마찬가지로 all_buckets라는 말임! show_bucket 함수의 result data는 {'result':all_buckets}라는 말임!
따라서, index.html은 아래처럼 넣어준다.
(모든 데이터를 세로로 쭉 찍어줄것이기 때문에 let rows를 사용하는 것 같다) 테스트하고 싶다면 let rows 아랫줄에 console.log(rows) 요거를 찍어준다. localhost 페이지의 콘솔을 통해 확인하면 아래처럼 나온다. 그러면 성공이라는 뜻임!
2-1. 자 여기까지 성공했으면, 이것을 콘솔에만 찍어둘 것이 아니라 temp_html을 이용해서 HTML에 append로 찍어주는 작업을 더해보자.
여러개의 데이터를 돌리고 싶을 땐? forEach 사용!
image_forEach문
이렇게 한단계 해주고 다시 console.log로 찍어서 테스트해주었다.
image_forEach문-console
제대로 작동이 된다! 자 그렇다면 이제 본격적으로 temp_html 작업을 해주자. console은 다시 지우고 그 자리에 넣어주겠다. temp_html 사용 뼈대는 아래와 같다.
image_temp_html-뼈대
저 빽틱(`) 사이에 html구간을 넣어주면 된다.
image_temp_html-완성
체크 뒤에 ${} 사이에 뭘 넣어야하는지 헷갈려서 강의를 보고 썼다 ㅠㅎ
2-2. 다음으로 temp_html 가져다 붙이기(append) 코드를 넣어줄 차례! html이 붙을 div의 클래스값을 가져와서 아래처럼 append코드 한 줄을 넣어준다.
$('#bucket-list').append(temp_html)
image_append-코드
3. 마지막으로 붙이기 전에 전부 지우는 코드를 forEach 윗줄에 추가!
$('#bucket-list').empty()
image_전부-지우는-코드
이렇게 GET 서버-프론트엔드 작업까지 마쳐주면 완전히 끝!! 최종 결과물은 아래에 ^^
<완성된 웹페이지>
이렇게, [POST 백엔드 ➔ POST 프론트엔드 ➔ 점검 ➔ GET 백엔드 ➔ GET 프론트엔드] 순서로 작업을 마쳐주면 모든 기능이 완성된 웹 페이지가 탄생한다!
완성된-웹페이지-undefined
아래처럼 내용을 입력하고 '기록하기' 버튼을 누르면 정보가 DB에 저장되고, DB에 저장된 데이터를 다시 프론트엔드로 받아와서 HTML로 착착 붙어서 목록으로 띄워진다!
+ 아까 실수해서 생긴 undefined 저거 없애고 싶은데 한번 혼자 해볼까?
♣ 첫 시도: app.py GET코드에 다음과 같은 지우기 코드를 추가해줬다. (코드스니펫에서 가져옴!)
첫-시도
결과: 안되는군 ㅠ (아니 생각해보니 POST에 추가한것도 아닌데 새 버킷리스트는 왜 넣은거야 ㅋㅋㅋ)
첫시도-결과
♣ 두번째 시도: 코드를 수정해보았다.
두번째-시도
결과: 대실패 (아예 다 사라져버렸다ㅋㅋ 심지어 empty 기능도 씹혔다;;)
두번째-시도-결과
♣ 세번째 시도:
세번째-시도
계속된 실패,,,!! GPT한테도 물어보고 난리쳤는데 근본적으로 더 쉬운 해결방법을 찾음 ㅋㅋ
쓰레기통-아이콘
몽고DB 콜렉션에서 없애고 싶은 데이터에 마우스를 올리면 우측에 쓰레기통 아이콘이 나온다. 그걸 클릭해서 일일이 삭제할수 있음ㅎㅎ
문제-해결된-페이지
아! 삭제했더니 이제 깔끔하게 나온다. 근데 없애고싶은 데이터가 엄~청 많을 경우에는 코드로 없애는게 좋을 것 같긴 한데ㅎㅎ 뭐 차차 방법을 알게 되겠지. 추후에 알게 되면 내용을 추가해보겠다.
마지막 프로젝트 실습을 마치고 웹 개발 종합 강의를 완주했다. 아, 대망의 팬명록 실습 내용도 기록해야 하는데 어쩌다보니 너무 길어져서. 다음에 이어서 올려야할 것 같다ㅎ 할 말이 많지만 나머지는 수강 후기에서 다루도록 하겠다.
