[🧭️Jungle] Own project(Finished)- TIL

이전 글에서 이어집니다.

2024.01.14 - [🔨 TIL/🧭 KAIST JUNGLE] - [🧭️Jungle] Own project - TIL

[🧭️Jungle] Own project - TIL

---

⛏️Own Project

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

---

✔️ 막히는 부분

...

1. 현재는 Card Columns를 수동으로 표시했지만, DB에 있는 저장된 정보의 개수 만큼 표시하도록 수정 필요 
   1. 페이지가 로딩되자마자 → MongoDB에 있는 모든 요소를 요청 → HTML에서 JS의 .add 를 사용하여 특정 Tag를 추가해줘야 함 (DB API에 Ajax를 통해서 Key 를 요청하여 Value를 받아내면 됨. 아래 코드 참고.)

@app.route('/load', methods = ['GET'])
def load():
   return jsonify({'result':'success', 'msg':'GET 연결되었습니다!'})

function showArticles() {
          $.ajax({
            type: "GET", // POST 방식으로 요청하겠다.
            url: "/load", // /memo라는 url에 요청하겠다.
            data: {}, // 데이터를 주는 방법
            success: function (response) { // 성공하면
                if (response["result"] == "success") {
                   alert("load 통신 완료!")
                } else {
                    alert("서버 오류!")
                }
            }
          })  
        }

이후 load() 함수 내에 DB에 있는 정보를 find method로 불러와서 list화 한 후 jsonify 시키면, JS에서 success 후 이 JSON을 가져와 HTML에 add 할 수 있다.

 

💪 버튼 클릭 시 DB에 컨텐츠 저장하기 : 완료

💪  Alert, Font, 여백 등 세부 사항 수정하기 ▶ 변경 필요 사항

• margin padding 등 어색한 부분 수정하기 : bootstrap 제공 class = 'form-group'으로 요소끼리 묶어서 적당한 간격을 만들어냄
• font-style 변경, title, comment 부분 font-color 변경 : title, comment 태그에 class 지정하여 css로 특정 class의 font 색상 변경(color: blue;) 
• title 클릭 시 url 링크로 넘어가는 것 변경 필요 : a 태그의 href에 ${'url'} 방식으로 삽입 (+ DB에도 url을 저장하지 않고 있어서 app.py file에서 url 까지 DB에 POST 되도록 수정함)
• 기사 저장 완료 후 포스팅 박스 자동 닫기로 수정 : openclose() 함수(.css("display") 가 "none" or "block" 에 따라서 css dsiplay 상태를 바꿔주는 함수)를 미리 만들어 뒀기에  포스팅 완료 alert 이후 함수를 한 번 실행시켜주기만 하면 됐음

🥳완전히 성공! 🥳

---

💡 A-Ha

• Javascript에서 list의 가장 마지막 index를 가져오기 위해서는 python 처럼(var[-1]) 불가능 → var[var.length -1 - i] 로 표현 가능

Flask DB에 있는 데이터를 JSON 형태로 가져와서 HTML에 보여주는 과정

• 'app.py' file에서 server API 형식에 맞는 'methods = ['GET']' 을 server에 입력 시 'response' 변수에 결과가 반환된다. 반환된 'response'를 jsonify 함수로 JSON 형식으로 만들어서 다루기 쉽게 한다. JSON 형식으로 된 data를 'index.html' file에서 $.ajax의 'success : { }' 부분에서 다루어 브라우저에서 나타낼 수 있는 HTML 형식으로 만든다.