목적은 특정한 S3 내부에 있는 경로에 JSON 파일을 넣어두고,
그 경로를 통해서 내 사이트의 프론트엔드에서 그 JSON 데이터를 불러와서 활용하는 것입니다.
내 S3에서 파일을 불러오기 위해서는 다음과 같은 조건 설정이 필요합니다.
내 버킷으로 이동하고 다음의 “권한” 탭을 클릭하세요.
권한 탭에서 아래로 드래그 합시다.
위와 같은 섹션이 나타난다면, 편집을 눌러 버킷 권한을 설정해줄 겁니다.
편집 버튼을 눌러주세요.
위쪽에 보면 버킷 ARN이라고 해서 가려진 부분이 보이죠?
실제로는 각자의 버킷에 알맞는 주소가 있을 겁니다.
위 ARN을 복사해서 기억하고, 다음의 JSON 구문을 새 문 추가해줄 겁니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "ARN/*"
}
]
}
여기서 중요한 부분은 9번 줄에 있는 Resource 입니다.
예컨대 내 arn 주소가 arn:aws:s3:::example-bucket 이고, 이 버킷 내에 “Keroro” 라는 폴더가 있다고 생각해볼까요?
만약 이 Keroro 내부에 있는 파일들에만 접근을 허용하고 싶다면 코드를 이렇게 수정 가능합니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::example-bucket/keroro/*"
}
]
}
위와 같이 접근의 허용을 위한 공간을 따로 만들어 활용하는 것도 파일 관리를 위해 괜찮은 방법입니다.
가려진 부분에 코드 작성을 마쳤다면, 이제 아래에 있는 변경 사항 저장을 눌러주세요.
화면 상단에 버킷 정책을 편집했다는 완료 메시지가 발생한다면 성공입니다.
특정한 JSON 파일로 접근을 위해서는 내 버킷 내부에 특정 경로에서 다음의 업로드 버튼을 누르면 됩니다.
원하는 파일을 선택하고 업로드 하면 됩니다.
저는 예시로 다음과 같은 JSON 파일을 업로드했습니다.
[
{
"name" : "케로로",
"grade" : "중사",
"color" : "녹색"
},
{
"name" : "타마마",
"grade" : "이등병",
"color" : "흑색"
},
{
"name" : "기로로",
"grade" : "하사",
"color" : "적색"
},
{
"name" : "쿠루루",
"grade" : "상사",
"color" : "황색"
},
{
"name" : "도로로",
"grade" : "병장",
"color" : "청색"
}
]
특정한 JSON 파일로 접근을 위해서는 내 버킷 내부에 특정 경로에서 다음의 업로드 버튼을 누르면 됩니다.
원하는 파일을 선택하고 업로드 하면 됩니다.
저는 예시로 다음과 같은 JSON 파일을 업로드했습니다.
import React, { useEffect, useState } from "react";
const Script = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch("your file url")
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => setData(data))
.catch((error) => console.error("Error fetching JSON:", error));
}, []);
return (
<div>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading...</p>}
</div>
);
};
export default Script;
코드는 위와 같이 구성을 했습니다.
7번째 줄에 업로드한 파일의 URL을 넣어주면 됩니다.
접근에 성공하지 못하면 에러가 발생하게 했습니다.
접근에 성공한 경우 전달 받은 데이터를 data라는 변수에 저장합니다.
fetch("test.json")
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => setData(data))
.catch((error) => console.error("Error fetching JSON:", error));
먼저 위쪽 코드를 볼까요?
fetch 를 통해서 특정한 파일에 접근합니다.
.then 의 첫 번째 단계에서 response 에 성공했는지 확인합니다.
성공하면 다음 .then 차례입니다.
여기서는 전달 받은 값을 임의로 data 라고 지정합니다. 그 후, data 를 setData 를 통해 특정 변수에 넣는 거죠.
<pre>{JSON.stringify(data, null, 2)}</pre>
JSON.stringify(data, null, 2) 부분에 대해서 설명하겠습니다.
data 객체를 JSON 문자열로 변환합니다.
null은 변환 과정에서 커스터마이즈를 하지 않음을 의미합니다.
2는 들여쓰기 수준을 의미하며, JSON 문자열을 보기 좋게 2칸 들여쓰기로 포맷합니다.
그리고 그 결과를 볼 수 있도록 출력하는 거죠.
실제로 이렇게 출력이 되는 것을 볼 수 있습니다.