[Vue.js] json 파일 읽어오기

 

기본값이나 전영역의 컴포넌트, 페이지에서 공통적으로 사용하는 값일 경우 json 파일에서 불러왔다.

예를 들어 상품의 상세페이지 구현 시, 상품유형코드(ex. 'N', 'O')에 따라 단어(ex. '니트', '아우터')만 달리 출력하는 것이다.

 

당시 lodash도, Vue.js도, ES6 문법도 처음 사용했던 나는 json 파일과 _.filter()를 사용하여 알아서 착착 뿌려지는 값들을 보며 '정말..! 편리하다..! vue...! 정말 개발 친화적이다......!'하고 놀라고 즐거워했던 기억이 난다.

 

이 방식의 개인적인 장점은 공통파일에 한번에 모아놓으니 한번에 파악하기도 쉽고, 값을 변경할 때도 따로 API를 건드는 일 없이 json만 수정하면 됐기때문에 유지보수하기도 편하다는 것이다.

 

 

---

 

 

json 파일 설정과 import

// assets/category.json
[
    {
		"name": "푸드",
		"image_url": "https://image-server.kr/def/cate-1.jpg",
		"code": "CATE_01"
	},
    {
		"name": "음료",
		"image_url": "https://image-server.kr/def/cate-2.jpg",
		"code": "CATE_02"
	},
    {
		"name": "상품",
		"image_url": "https://image-server.kr/def/cate-3.jpg",
		"code": "CATE_03"
	},
    {
		"name": "고객센터",
		"image_url": "https://image-server.kr/def/cate-4.jpg",
		"code": "CATE_04"
	}
]

// component.vue
// script 영역에서 import 해준다.
// 경로에 있는 '@'의 경우 jsconfig.json에 ./src/* 경로의 경우 @로 표기하도록 설정한 것이다.

<script>
import category from "@/assets/category.json";
...
</script>

 

 

읽어오는 방법

◽ computed() 사용하기

// component.vue
import category from "@/assets/category.json";

// computed()에서 바로 가져와 categorys에 바로 할당한다.
computed: {
	categorys() {
		return category.map((items) => {
			return items;
		});
	},
},

 

◽ data에 바로 바인딩

// component.vue
import category from "@/assets/category.json";

// 1.
data() {
	return {
		categorys: category
	}
}

// 2. 화살표를 사용하는 경우의 표현
data: () => {
	categorys: category
}

 

 

화면에 출력하기

<li class="prod" v-for="item in categorys" :key="item.code">
	<div class="category_img" :id="item.code">
		<img :src="item.image_url" />
		<p>{{ item.name }}</p>
	</div>
</li>

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.