[🧭️Jungle] Own project

🧭 KAIST JUNGLE

[🧭️Jungle] Own project - TIL

seungineer = seungwoo + engineer 2024. 1. 14. 11:27

⛏️Own Project

URL, Memo를 저장할 수 있으며, card columns 형식으로 저장했던 내용을 기본적으로 표시하는 사이트.

✔️ 막히는 부분

Card Columns를 표시: 완료(Bootstrap Document에서 가져옴(단순 Div 태그 통한 img, title, content 표시))
표시하는 내용으로는 DB에서 저장했던 정보를 가져와야 함
1. MongoDB? pymongo → Flask를 통해서 DB의 데이터 가져오기 → HTML에 표시할 때, jQuery를 써서 알맞은 순서대로 Img, Title, Memo 뿌리기 (어떻게 HTML에서 DB에 있는 데이터를 가져오는 거지?)
현재는 Card Columns를 수동으로 표시했지만, DB에 있는 저장된 정보의 개수 만큼 표시하도록 수정 필요

💪 DB 컨텐츠 HTML 통해 표시하기 성공

'기사 저장' 버튼을 눌러서 DB에 저장되게 하는 기능
1. <Button> tag에서 onlclikc 시 JS <scripts> tag의 function 실행되도록 구성 : 완료
2. function에서 $.Ajax로 url 및 memo POST : 의문사항 - POST 시 Mongo DB 로 자료 Uplad?
3. 저장완료 알림

💭 의문사항 - 해결
'app.py' file에서 pymongo를 flask와 함께 import 한다.
'index.html'의 <script> tag 내 function 에서 $.ajax를 통해 methods를 지정할 수 있으며(현재의 경우 "POST"), url을"/xxxx" (현재의 경우 "/upload")형식으로 지정할 수 있다.
'app.py' file에서 이 url과 일치하는 @app.route("/xxxx") 에 정의된 함수를 실행한다.
▶️ 즉, POST 시 app.py에서 @app.route("/xxxx") 에 정의된 함수로 MongoDB에 자료를 Upload 한다.

💪 버튼 클릭 시 DB에 컨텐츠 저장하기 성공

Alert, Font, 여백 등 세부 사항 수정하기

💪 완전히 성공

💡 A-Ha

HTML <Body> 내 <script> 태그 내 선언되어 있는 JS Code 중 한 군데에서라도 error 발생 시 Script 태그 전체가 실행되지 않은 것으로 간주되기에 오류 발생

▶ error 발생 지점 전에 선언한 function 또한 실행되지 않기에 아래와 같은 에러가 발생함.

'Uncaught Reference Error'가 발생하였으나 분명히 해당 function을 선언해주었다고 생각하여, 해결이 안 되고 있었다. 두 번째 error code인 'Uncaugt SyntaxError'를 보고 script 태그 내 다른 code 에러를 해결하였으며 앞서 언급한 error도 해결되었다.

'🧭 KAIST JUNGLE' 카테고리의 다른 글

[🧭️Jungle] Own project(Finished)- TIL (0)	2024.01.15
[🧭️Jungle] Web Scraper, Flask, Own project - TIL (1)	2024.01.13
[🧭️Jungle] jQuery, Ajax, mongoDB - TIL (0)	2024.01.11
[🧭️Jungle] Bootstrap, JS - TIL (0)	2024.01.10
[🧭️Jungle] HTML, CSS - TIL (0)	2024.01.08

현재글[🧭️Jungle] Own project - TIL

seungineer

[🧭️Jungle] Own project - TIL

⛏️Own Project

'🧭 KAIST JUNGLE' 카테고리의 다른 글

'🧭 KAIST JUNGLE'의 다른글

티스토리툴바

[🧭️Jungle] Own project - TIL

⛏️Own Project

'🧭 KAIST JUNGLE' 카테고리의 다른 글

'🧭 KAIST JUNGLE'의 다른글

관련글

티스토리툴바