내일 배움 캠프 최종 프로젝트

오늘 배운거: Js API 연결

 

 

API란 ?

API(Application Programming Interface)의 약자로 응용 프로그램 인터페이스라는 의미로 응용 프로그램에서 사용 할 수 있도록,운영 체제나 프로그래밍 언어가 제공할 수 있도록, 운영 체제나 프로그래밍 언어가 제공 할 수 있게 만든 인터페이스를 뜻 한다. 주로파일제어, 창 제어,화상 처리,문자 제어 등을 위한 인터페이스를 제공한다.(위키백과)

 

 

const logined_token = localStorage.getItem("access");


$(document).ready(function () {
    getCounsels()
})
// 게시글 목록 가져오기
async function getCounsels() {
    $('#list-section').empty()


    $.ajax({
        url: `${BACKEND_BASE_URL}/counsel/`,
        type: "GET",
        dataType: "json",
        success: function (response) {
            const rows = response;
            for (let i = 0; i < rows.length; i++) {
                let counsel_id = rows[i]['id']
                let counsel_title = rows[i]['title']
                let counsel_author = rows[i]['user']
                let counsel_created_at = rows[i]['created_at']
                let likes_count = rows[i]['like'].length

                let temp_html = `
                <a onclick="go_counselDetail(${counsel_id})">
                    <div class="list-box">
                        <div id="counsel-title">${counsel_title}</div>
                        <div id="counsel-author">${counsel_author}</div>
                        <div id="counsel-created-at">${counsel_created_at}</div>
                        <div id="counsel-likes">${likes_count}</div>
                    </div>
                </a>
                <hr>
                `
                $('#list-section').append(temp_html)
            }
        },
        error: function () {
            alert(response.status);
        }

    })
}

 

 

백엔드가 중요해서 프런트 엔드만 이야기 하겠습니다.

getCounsels() 변수 : getCounsels()함수 서버에서 게시글 목록을 가져와 화면에 표시합니다.

$.ajax() 메소드를 사용하여 GET요청을 보냅니다.

 

temp_html 변수 : getCounsel()함수에서 게시글 목록을 구성하기 위해 HTML 코드를 저장하게 됩니다.

게시글의 정보를 이용하여 생성한 코드를 temp_html에 추가합니다.

 

$('#list-section').append(temp_html): temp_html에 저장된 코드를 게시글 목록이 섹션에 추가합니다.

$('#list_section)은 해당 섹션을 선택하는 쿼리 선택자입니다.

 

go_counselDeatail() 함수 : 게시글을 클릭했을 때 호출되는 함수입니다. 

 

BACKEND_BASE_URL  변수: 게시글 데이터를 가져오고 각 게시글을 HTML로 생성하여 화면에 표시하는 역할을 합니다.

 

 

const logined_token = localStorage.getItem("access")

async function CreateCounsel() {
    let title = document.querySelector('#title');
    let content = document.querySelector('#content');

    const formdata = new FormData();
    formdata.append("title", title.value);
    formdata.append("content", content.value);

    const response = await fetch(`${BACKEND_BASE_URL}/counsel/`, {
        headers: {
            Authorization: "Bearer " + logined_token,
        },
        method: "POST",
        body: formdata,
    });

    const response_json = await response.json();

    if (response.status == 200) {
        alert("고민 상담이 등록되었습니다.");
        window.location.replace(`${FRONTEND_BASE_URL}/counsel_list.html`);
    } else if (response.status == 400) {
        for (let key in response_json) {
            alert(`${response_json[key]}`);
            break
        }
    }
}

 

const logined_token = localStorage.getItem("access"): localStorage에서 "access" 키를 사용하여 로그인된 사용자의 액세스 토큰을 가져옵니다.

async function CreateCounsel(): 고민 상담을 생성하는 함수입니다.

formdata: FormData 객체를 생성하여 고민 상담의 제목과 내용을 담습니다.

fetch(): 서버에 POST 요청을 보냅니다. 헤더에 액세스 토큰을 포함하여 요청을 보냅니다. 요청 메소드는 "POST"이고, 데이터는 formdata에 담겨 있습니다.

response: 서버로부터의 응답을 나타내는 객체입니다.

response_json: 응답을 JSON 형식으로 파싱한 결과를 저장합니다.

response.status: 응답의 상태 코드를 확인합니다.

alert(): 경고 메시지를 표시합니다.

window.location.replace(): 페이지를 다른 URL로 리디렉션합니다.

for...in 루프: 응답 JSON 데이터에서 각 키와 값을 순회합니다.