💻 Today I Learned

• 게시글 작성 페이지에서 백엔드 서버로 POST 요청 보내기

우선 게시글 작성은 로그인이 필요한 서비스로 사용자의 로그인 상태를 localstorage의 access토큰 유무로 확인하여 로그인이 되었다면 작성페이지로 이동하도록 해주었다.

// 로그인 된 사용자 정보 
const token = localStorage.getItem("access");

function ArticleCreatePage() {
    if (token) {
        window.location.replace(`article_create.html`)
    } else {
        alert('게시글 작성은 로그인 된 사용자만 가능합니다!')
    }
}

게시글을 작성할 때 입력할 값은 카테고리, 제목, 내용, 이미지(선택)이며 카테고리 목록은 html에 작성하지 않고 백엔드 서버에서 불러와 dropdown 태그 내 option 태그를 만들어 넣어주었다.

// api.js
async function get_hobby() {
    const response = await fetch(`${back_end_url}/workshops/hobby/`, {
        method: "GET",
    })
    return response
}

// article_create.js
window.onload = async function LoadCategory() {
    const response = await get_hobby()
    const data = await response.json()
    
    for (let i = 0; i < data.length; i++) {
        let num = data[i]['id']
        let category = data[i]['category']

        let category_list = document.getElementById('category')
        let hobby = document.createElement('option')
        hobby.setAttribute('value', num)
        hobby.innerText = category

        category_list.appendChild(hobby)
    }
}

작성하기 버튼을 눌렀을 때 아래 함수가 실행되며 사용자가 값을 입력하는 태그를 id 값으로 가져오고 .value로 해당 태그에 입력된 내용을 가져왔다. 이미지의 경우 file type이기 때문에 .files로 업로드한 파일을 가져올 수 있다.

이후 사용자의 입력 값이 담긴 변수를 백엔드 서버에 요청을 보내는 함수의 인자로 넣어주었다.

// article_create.js
function handleArticleCreate() {
    const category = document.getElementById('category').value
    const title = document.getElementById('title').value
    const content = document.getElementById('content').value
    const image = document.getElementById('formFile').files[0]
    
    create_article(title, content, image, category)
}

사용자의 입력 값을 인자로 받고, 이미지는 문자열이 아닌 파일 형식이기 때문에 fetch 요청을 보낼 때 form-data에 담아 보내야해서 Formdata 객체를 만든 후 인자로 받은 사용자의 입력 값을 Formdata에 append 했고, fetch 요청을 보낼 때 headers에 누가 요청을 보냈는지 특정하기 위해 토큰 기반 인증 방식인 Authorization 필드에 Bearer 인증 타입으로 localstorage에 있는 access 토큰을 가져와 사용자 인증을 해주었다.

method는 데이터를 전송하는 것이기 때문에 POST로 입력해주었고, body에는 사용자의 입력값을 담은 Formdata 객체를 넣어주었다.

이후 fetch 요청에 대한 status code에 따라 alert 창을 띄워 사용자에게 요청 결과를 메시지로 알려주었다.

async function create_article(title, content, image, category) {
    const data = new FormData()
    data.append("category", category)
    data.append("title", title)
    data.append("content", content)

    if(image){
        data.append("article_image", image)
    }

    const response = await fetch(`${back_end_url}/articles/create/`, {
        headers: {
          	// Bearer를 입력 후 공백 한 칸을 주지 않으면 사용자 인증 안됨
            Authorization: "Bearer " + localStorage.getItem("access"),
        },
        method: "POST",
        body: data,
    });

    if (response.status == 201) {
        window.location.href = 'community.html'
        alert('작성 완료!!')
    } else if (response.status == 401) {
        alert('다시 로그인을 해주세요!')
    } else {
        alert('잘못된 요청입니다!')
    }
}