2023년 2월 27일~3월 3일: og태그 넣는 법

웹개발반 팬명록 만들기 복습하다가 온도 넣는 법을 생각했는데

내가 생각한 것보다 간단한 방법이 있어서 두가지 방법 메모

 

온도넣는법

방법1

function set_temp() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
                $('#temp').empty()
                let temp_now = data['temp']                
                let temp_html = `<span id="temp">${temp_now}</span>`
                $('#temp').append(temp_html)
            });
        }

 

방법2 (간단)

function set_temp() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
                let temp_now = data['temp']
                $('#temp').text(temp_now)
            });
        }

 

사용자 입력값 받아서 백엔드에 넘기는 방법도 두가지

방법1

function save_comment() {
            let formData = new FormData();
            formData.append("name_give", $('#name').val());
            formData.append("comment_give", $('#comment').val());

            fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                //console.log(data)
                alert(data["msg"]);
            });
        }

방법2

function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()
            
            let formData = new FormData();
            formData.append("name_give", name);
            formData.append("comment_give", comment);

            fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                //console.log(data)
                alert(data["msg"]);
            });
        }

 

og태그 넣기

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />

요고를 head에 title 밑에다 갖다 넣고

웹에서 이미지주소 복사해서 태그 속 이미지URL에 넣는다.

 

웹사이트 화면 리셋 해주는 window.location.reload()는 넣는 자리가 중요하네.

리퀘스트 라이브러리 사용 시, GET 함수 자리가 아니라 POST 함수 자리에 넣어야 한다. 요로케.

function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()
            
            let formData = new FormData();
            formData.append("name_give", name);
            formData.append("comment_give", comment);

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

사용자가 값을 입력하면, 그걸 서버에 포스트요청한 뒤 웹페이지를 새로고침 한 번 한다는 개념.

그 새로고침 사이에 입력했던 정보가 줄줄이 달리게 된다. (get요청과 temp_html 달리는 것 까지 설계해놨다는 전제)