목적은 AWS S3 특정 디렉토리 아래에 저장한 png, jpg 등 이미지 파일을 내 웹사이트에 불러오는 방법입니다.
우선은 하나를 불러와서 잘 나타나는지 확인을 하고, 그 다음은 디렉토리 내부에 있는 모든 이미지 파일을 순서대로 불러올 수 있도록 해보겠습니다.
사이트는 React 로 구성을 할 것이기에, React 코드를 함께 사용하겠습니다.
바로 시작을 해보겠습니다.
우선 S3 버킷으로 이동합시다.
여기서 “폴더 만들기” 를 클릭해서 이번에 사용할 폴더를 하나 만들어줄게요.
폴더의 이름은 “year” 으로 하겠습니다.
폴더를 만들고 이제 폴더 내부로 들어올까요?
이곳에 업로드 버튼이 있습니다.
내가 원하는 파일들을 주르륵 업로들 해주겠습니다.
이렇게 총 12개의 png 파일을 올렸습니다.
png 파일을 하나 클릭해볼까요?
이런 식으로 png 파일의 정보를 볼 수 있습니다.
객체 URL을 통해서 곧바로 이 파일에 접근을 할 수도 있지요.
저는 이 파일을 React 코드를 통해서 불러오는 방법을 알아보겠습니다.
import "./style.css";
import useBeforeUnload from "./Function/useBeforeUnload";
const TuringTester = () => {
return (
<>
<div className="allen-page">
<div className="tester-tablet">
<div className="tester-box"></div>
</div>
</div>
</>
);
};
export default TuringTester;
저는 여기서 왼쪽 React 코드를 이용해서 오른쪽과 같은 화면을 구현했습니다.
저 핑크색 박스가 “tester-box” 입니다.
저는 저 div 내부에 제가 S3 에 업로드 한 png 파일들을 불러오려 합니다.
이를 위해서는 png 를 불러올 수 있는 주소를 프론트엔드에 저장을 해야합니다.
어떻게 하면 그럴 수 있을지 알아보겠습니다.
app.get("/api/s3-images", (req, res) => {
const folderName = req.query.folderName; // 프론트엔드에서 폴더 이름을 전달받음
const params = {
Bucket: process.env.S3_BUCKET_NAME,
Prefix: `${folderName}/`, // 전달받은 폴더 이름에 해당하는 경로
};
s3.listObjectsV2(params, (err, data) => {
if (err) {
console.error("S3에서 파일 목록을 가져오는 중 오류 발생:", err);
return res
.status(500)
.json({ error: "S3에서 파일 목록을 가져오는 중 오류가 발생했습니다." });
}
// PNG 파일만 필터링
const pngFiles = data.Contents.filter((item) =>
item.Key.endsWith(".png")
).map((item) => {
return `https://${process.env.S3_BUCKET_NAME}.s3.amazonaws.com/${item.Key}`;
}); // 각 파일의 S3 URL을 생성
res.json({ pngFiles }); // PNG 파일 경로 리스트 반환
});
});
백엔드 코드를 만지는 겁니다.
저는 이런 식으로 구성했습니다.
“flolderName” 을 프론트엔드로부터 전달을 받습니다.
s3.listObjectsV2(params, (err, data) => {…}) 함수를 실행하기 우해서는 params 를 통해서 내 Bucket 의 이름과, prefix 라는 key 내부에 원하는 폴더 이름을 넣어야 합니다.
성공하면 data 라는 곳에 prefix 내부에 있는 파일들의 경로가 리스트로 저장이 됩니다.
우리는 이 data 객체를 이용해서 특정한 파일 형식의 파일들의 경로들을 pngFiles 내부에 저장하는 것이죠.
그럼 이 라우터를 이용해보죠.
import React, { useEffect, useState } from "react";
import "./style.css";
import useBeforeUnload from "./Function/useBeforeUnload";
const TuringTester = () => {
// PNG 파일들을 저장한 폴더의 이름
const MyFolder = "year";
// PNG 파일들의 경로 리스트를 저장할 상태 변수
const [pngFiles, setPngFiles] = useState([]);
// 폴더 내의 PNG 파일들을 가져오는 함수
const fetchPngFiles = async () => {
try {
const response = await fetch(`/api/s3-images?folderName=${MyFolder}`);
const data = await response.json();
console.log("PNG 파일 목록:", data.pngFiles);
setPngFiles(data.pngFiles); // 받아온 파일 경로를 상태로 저장
} catch (error) {
console.error("PNG 파일 목록을 가져오는 중 오류 발생:", error);
}
};
// 컴포넌트가 마운트될 때 PNG 파일 리스트 가져오기
useEffect(() => {
fetchPngFiles();
}, []); // 컴포넌트가 처음 로드될 때 한 번 실행
return (
<>
<div className="allen-page">
<div className="tester-tablet">
<div className="tester-box">
{/* 여기에 PNG 파일 리스트 출력 또는 사용 가능 */}
</div>
</div>
</div>
</>
);
};
export default TuringTester;
우선은 라우터에 잘 접근이 되어 경로를 가져오는지 체크를 하기 위해 위와 같이 코드를 만들었습니다.
페이지가 로드되면 특정 폴더 내부에 있는 png 파일들 경로를 가져오는 겁니다.
그리고 이걸 console 창에서 print 가능합니다.
위와 같이 제가 넣어둔 12개의 png 파일들 경로가 차근차근 잘 나타나는 것을 확인했습니다.
그럼 이제 프론트엔드에서 pngFiles 리스트를 이용하여 파일을 불러올 수 있는지 체크를 해보겠습니다.
import React, { useEffect, useState } from "react";
import "./style.css";
import useBeforeUnload from "./Function/useBeforeUnload";
const TuringTester = () => {
// PNG 파일들을 저장한 폴더의 이름
const MyFolder = "year";
// PNG 파일들의 경로 리스트를 저장할 상태 변수
const [pngFiles, setPngFiles] = useState([]);
// 폴더 내의 PNG 파일들을 가져오는 함수
const fetchPngFiles = async () => {
try {
const response = await fetch(`/api/s3-images?folderName=${MyFolder}`);
const data = await response.json();
console.log("PNG 파일 목록:", data.pngFiles);
setPngFiles(data.pngFiles); // 받아온 파일 경로를 상태로 저장
} catch (error) {
console.error("PNG 파일 목록을 가져오는 중 오류 발생:", error);
}
};
// 컴포넌트가 마운트될 때 PNG 파일 리스트 가져오기
useEffect(() => {
fetchPngFiles();
}, []); // 컴포넌트가 처음 로드될 때 한 번 실행
return (
<>
<div className="allen-page">
<div className="tester-tablet">
<div className="tester-box">
{/* pngFiles 배열에 있는 PNG 파일 경로를 이용하여 이미지를 렌더링 */}
{pngFiles.map((file, index) => (
<img
key={index}
src={file}
alt={`PNG File ${index}`}
style={{ width: "100%", marginBottom: "10px" }}
/>
))}
</div>
</div>
</div>
</>
);
};
export default TuringTester;
다음과 같이 pngFiles 를 통해서 순회문을 통해 img 를 생성하는 형식으로 변경을 했습니다.
결과를 볼까요?
이런 식으로, 제가 올렸던 사진들이 차례대로 쭉 내려가네요.
여기까지만 해도 불러오는 것은 성공이라 할 수 있겠습니다.
저는 조금 더 이 파일들을 예쁘고 정갈하게 볼 수 있는 방법을 탐색했습니다.
import React, { useState } from "react";
const ImageWindow = ({ FileList }) => {
// 현재 보여지고 있는 이미지의 인덱스를 추적하는 상태
const [currentIndex, setCurrentIndex] = useState(0);
// 왼쪽 버튼을 클릭했을 때 실행될 함수
const handleLeftClick = () => {
setCurrentIndex((prevIndex) =>
prevIndex === 0 ? FileList.length - 1 : prevIndex - 1
);
};
// 오른쪽 버튼을 클릭했을 때 실행될 함수
const handleRightClick = () => {
setCurrentIndex((prevIndex) =>
prevIndex === FileList.length - 1 ? 0 : prevIndex + 1
);
};
return (
<div className="tester-slider" style={{ textAlign: "center" }}>
<button className="tester-slider-btn" onClick={handleLeftClick}>
L
</button>
<img
className="tester-img"
src={FileList[currentIndex]}
alt={`Slide ${currentIndex}`}
style={{ width: "500px", height: "auto", margin: "0 20px" }}
/>
<button className="tester-slider-btn" onClick={handleRightClick}>
R
</button>
</div>
);
};
export default ImageWindow;
.tester-slider {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.tester-slider-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
.tester-slider-btn:hover {
background-color: #45a049;
}
.tester-img {
max-width: 80%;
height: auto;
}
위와 같이 컴포넌트를 생성하였습니다.
파일 이미지의 경로가 담긴 리스트를 이용하여 왼쪽, 또는 오른쪽으로 이미지를 넘기는 슬라이더를 만든 겁니다.
오른쪽 CSS를 이용하여 디자인을 했습니다.
아주 그럴듯하죠?
화면에 PNG 파일이 나타나고, 왼쪽 오른쪽으로 내가 올렸던 파일들을 차례로 넘길 수 있습니다.
Chat GPT를 이용하여 내가 원하는 이미지 파일을 S3에서 불러오는 방법을 알아봤습니다.
조언대로 따르니 금방 괜찮은 결과물을 얻을 수 있었습니다.
해당 방법을 응용하여 보다 퀄리티 있는 페이지를 만들 수 있을 것 같습니다.