Silver Library (Archived)
[JS] 그래서 local json file 을 읽어 들이려면? 본문
Face the fear, build the future/Library of Logging
[JS] 그래서 local json file 을 읽어 들이려면?
Ayin Kim 2022. 10. 21. 19:17반응형
// data.json
{
"netflix": [
{
"id": 1,
"title": "spy family",
"category": "family"
},
{
"id": 2,
"title": "Attack on titan",
"category": "action"
}
]
}그리고
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
fetch("./data.json")
.then((results) => results.json())
.then(console.log);
</script>
</body>
</html>이렇게 하면,
아래와 같이 local json file 을 성공적으로 읽어 들이는 것을 확인할 수 있다.
이건 왜 기록하셨나요?
헤매지 말자는 의미에서 적었습니다. 이것 때문에 콜백, Promises, OOP 부터 거슬러 올라가면서 한 고생을 생각하니 적어둬야 겠다는 생각이 들더군요. 방금 전 까지만 해도 Web 상의 외부 API 를 불러오는 것과 로컬 상의 json 파일을 불러 오는 것은 '분명 이론 상으론 차이가 없겠지만, 어딘가가 다를 것이다' 라는 의심암귀에 사로 잡혀 있었습니다.
그래도 백엔드 데이터를 변조 안하고 프론트 측에서만 변조하는 법, 등 다양하게 불러오는 방법을 알게 된 점을 위안 삼아야 겠죠.
그런데 저걸 써서 뭘 하나 만들어 볼까? 뭐 하지? 하며 별의 별 생각을 다 해봤지만 딱히 떠오르는 게 없습니다.
대체 뭐 만들까요. 아무튼 로컬 상 json data 를 불러오는 것 또한 크게 다를게 없다는 걸 알았으니, 이제 마지막으로 하나 만들어 보고 준비 해 봐야겠습니다.
'Face the fear, build the future > Library of Logging' 카테고리의 다른 글
| Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag (0) | 2022.10.26 |
|---|---|
| 사이드 프로젝트 [계획서] - anime jikan api (0) | 2022.10.23 |
| 독학하며 알게된 Reverse Engineering (0) | 2022.10.23 |
| Json data 를 JS 로 전환하는 법. (0) | 2022.10.02 |
| [프로젝트 계획] localstorage 내부의 API json 과 react useState (1) | 2022.08.24 |
'Face the fear, build the future/Library of Logging' Related Articles
more
