인프런 커뮤니티 질문&답변

개인 프로젝트로 블로그 만들기를 구현하는 중입니다.

모든 프로젝트에 대한 설명은 할 수 없지만, 보안으로 jwt token을 사용하고있고, multipartfile을 통해서 게시글 내에 이미지, 영상, 기타 파일 등을 함께 첨부하여 게시글을 작성할 수 있도록 기능을 구현하였습니다.

파일 업로드 단계까진 잘 되었고, 우선 로컬 저장소를 사용하여 파일은 스프링 부트 프로젝트 내 resources/static/ ~ 이하 이미지:img, 영상:video, 기타 파일:file 로 세부 디렉토리를 나눠서 접근하도록 하였습니다. 우선 사진으로만 테스트 해보는 중인데, 리액트에서 파일을 보여주는 데에 어려움을 겪고있습니다.

export const getImageApi = async (token: string | null, imageName: string) => {
    const url = `http://localhost:4000/api/images/${imageName}.jpg`;
    try {
        const response = await axios.get(url, {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        });

        const result = response.data;
        return result;
    } catch (error) {
        console.error("Error fetching board data:", error);
        return null;
    }
};

토큰을 이용해야만 파일에 접근이 가능하기에, 이런식으로 따로 api를 설정하고 접근하는 방식으로 해보려고 하는데 제 생각처럼 잘 되지 않습니다. 해당 api를 통한 요청을 포스트맨으로 조회해보니 이진화 된 파일이 응답으로 나오곤 하는데, 이를 다시 원본으로 복구한 후에 보여줘야하는 것 같은데,, 아직 많이 부족해서 어떤식으로 해야할지 잘 모르겠습니다.

리액트 - 스프링(부트)를 사용하면서 파일 업로드/다운로드(조회)를 할 때, 이런 방식을 사용하는 것이 바람직한 것인지, 단순히 사진을 업로드 하고 조회할 때에 이정도 복잡한 수준으로 구현하는 것이 일반적인 것인지 궁금하고 더 간단하거나 쉽게 할 수 있는 방법이 있다면 알려주시면 감사하겠습니다.

첫 질문이라 소스코드를 많이 올리는 것이 번잡할까 싶어 많이 올려두지 않았습니다. 혹시 도움을 주실 때 관련 소스코드를 필요로 하신다면 보내드리도록 하겠습니다. 감사합니다.