이미지 불러오기

백엔드 기능이 완료되고 프론트작업을 조금씩 해나가기 시작했습니다. 본격적으로 들어가기 전, 먼저 백엔드에서 작업한 내용들이 프론트에서 정상적으로 노출되는지 확인하는 절차를 가졌습니다.

// articles.js
window.onload = async () => {
    const articleListDiv = document.getElementById("article_list");

    try {
        const response = await fetch('http://127.0.0.1:8000/articles/');
        const articles = await response.json();

        articles.forEach((article) => {
            const articleDiv = document.createElement("div");

            articleDiv.innerHTML = `
                <h3>${article.title}</h3>
                <img src=${article.image} alt="내사진">
                <h3>${article.updated_at}</h3>
                <h3>${article.user}</h3>
                <h3>${article.content}</h3>
            `;
            articleListDiv.appendChild(articleDiv);
        });
    } catch (error) {
        console.error('게시글을 가져오는 중 오류가 발생했습니다:', error);
    }
};

초기에 작성한 코드입니다. 백엔드는 8000번 포트를 가지고 있고 프론트는 5500번 포트를 가지고 있습니다.
그리고 article에 담긴 정보는 다음과 같습니다.

content: "<p>첫번째 줄</p>\r\n\r\n<p><img alt=\"\" src=\"/media/uploads/2023/05/11/img_19431_1.jpg\" style=\"height:533px; width:800px\" /></p>"
image: "/media/2023/05/9906804C5FB7337315.png"
pk: 1
title: "새로운 글"
updated_at: "2023-05-11T07:02:27.110574Z"
user: "test"

이렇게 전달받은 내용을 가지고 프론트에다가 띄워보니 정상적으로 불러오는 것은 확인할 수 있었습니다. 허나 문제는 이미지가 깨져서 올라오는게 문제였습니다.

여기서 상당히 많은 시간을 보냈는데 백엔드에서는 정상적으로 사진이 잘 불러와지는데 프론트에서만 파일이 깨져서 오니, url도 확인해보고 media폴더를 잘못지정한것은 아닌지, 시리얼라이저를 잘못 쓴건지 여러번 확인했습니다.

그러다가 문득 생각이 들었던 것이 현재 백엔드와 프론트엔드는 같은 프로젝트 폴더를 쓰고있지 않고 별개의 폴더에서 작업중에 있는데 image에 들어가있는 /media/2023/05/9906804C5FB7337315.png" 이 주소만으로 백엔드에 있는 폴더에서 꺼내올 수가 있는건가였습니다.

그래서 해당주소를 직접 검색도 해보고, 앞에 localhost도 붙혀보고 여러 시도를 해본결과
http://127.0.0.1:5500//media/2023/05/9906804C5FB7337315.png 에서는 이미지가 불러와지지 않는다.
http://127.0.0.1:8000//media/2023/05/9906804C5FB7337315.png 에서는 이미지가 불러와 진다.

해결

브라우저에 콘솔을 확인해보니 현재 이미지 요청 url은 http://127.0.0.1:5500//media/2023/05/9906804C5FB7337315.png으로 되어있었고, 앞에 자동으로 5500포트가 붙는 이유에 대해 알아보니 article이 가지고 있는 주소정보로는 해당 주소 앞에 뭐가 붙는지 지정해두지 않았으니 자동으로 붙혀준 것입니다.

그래서 앞에 5500번 포트대신 8000번 포트를 붙혀 가져오는 것으로 방향을 잡았고 코드를 고쳐왔습니다.

window.onload = async () => {
    const articleListDiv = document.getElementById("article_list");

    try {
        // 게시글 목록을 가져오는 API 요청
        const response = await fetch('http://127.0.0.1:8000/articles/');
        const articles = await response.json();
        const proxy = "http://127.0.0.1:8000"

        console.log(articles)

        // 가져온 게시글을 표시
        articles.forEach((article) => {
            const articleDiv = document.createElement("div");
            let image_url = proxy + article.image

            articleDiv.innerHTML = `
                <h3>${article.title}</h3>
                <img src=${image_url} alt="내사진">
                <h3>${article.updated_at}</h3>
                <h3>${article.user}</h3>
                ${article.content}
            `;
            articleListDiv.appendChild(articleDiv);
        });
    } catch (error) {
        console.error('게시글을 가져오는 중 오류가 발생했습니다:', error);
    }
};

그래서 저는 8000번의 주소를 상수로 선언해주고 이미지의 주소를 붙혀준 변수를 만들어 해결했습니다.

참고로 content는 왜 html태그가 붙지 않았는지 궁금하실 분들도 있을 것 같아 말씀드리자면, 현재 content는 ckediter라는 텍스트편집기를 이용해 저장된 데이터입니다. 저장된 데이터는 html형식으로 저장되기 때문에 별도의 html태그가 없어도 innerHTML에서 잘 작동할 수 있습니다.