CodeHoon

안녕하세요 상훈입니다.

Vue.js에서 반복문을 사용하고, 그 속에서 data binding이 된 객체 데이터를 출력하는 방법을 포스팅하겠습니다.

1. data

2. template

1. data

import products from './assets/listData.js'
export default {
  name: 'App',
  data () {
    return {
      products: products,
      }
    }
  }

외부의 객체 배열을 products라는 변수로 import 하여 vue 내에서 products로 사용하겠다고 선언한 내용입니다.

아래는 export한 객체 배열 내용 예시입니다.

2. template

자, 이제 반복문과 그에 해당하는 문법을 작성해야겠죠?

for의 기본 문법입니다.

<div v-for="item in items" :key="item"></div>
<div v-for="(item, index) in items" :key="item"></div>

JavaScript 혹은 React 같은 경우 많이 작성하는 방식입니다.

첫 번째는 1개의 인자만 사용할 경우이고, 두 번째는 index를 주고 싶을 경우입니다.

저는 이 중 첫 번째만 사용해보도록하겠습니다.

 <div v-for="product in products" :key="product">
    <img src="{{ product.image }}" alt="이미지">
    <h4>{{ product.title }}</h4>
    <p>{{ product.price }}원</p>
  </div>

작성 방법은 받아온 객체의 key값을 기준으로 작성하면 value가 출력되어져 나오는 방식입니다.

laravel의 blade 문법이 생각나는군요

결과입니다. css를 제대로 적용시켜주지 않고, 이미지 url이 올바르게 작성되어있지 않아 이미지가 깨졌지만, 나머지는 정상적으로 반복되어 출력되었습니다.

이상입니다.

안녕하세요 상훈입니다.

리액트에서 Axios 요청을 사용하는 방법(chart ... etc)을 알아보도록 하겠습니다.

$ npm install axios react-chartjs-2 --save

터미널에 복사 붙여넣기 해주시면 됩니다.

Axios는 js의 Ajax와 유사합니다.

브라우저와 Node.js에서 Promise API를 통신 방식으로서,

 프론트와 백을 연결하여 HTTP 비동기 통신 방식입니다.

받아오는 방식은 JSON 입니다.

이 중에 GET 방식을 진행해볼건데, 

axios.get(url)

로 사용이 가능합니다. 

예제) 코로나 현황 검색

우리나라의 covid19 현황을 검색해보겠습니다.

저는 Google Extensions : Talend API Tester를 사용했구요, api 통신 테스터 아무거나 사용하셔도 무방합니다.

이렇게 JSON 형태로 값이 받아와졌습니다. 

이제 web에 적용을 하도록 하겠습니다.

Contents.js    :  React.js file

import React, {useState, useEffect} from 'react'
import axios from 'axios'


const Contents = () => {

    useEffect(() => {
        const fetchEvents = async () => {
            const res = await axios.get("https://api.covid19api.com/total/dayone/country/kr")
            console.log(res)
        }
        fetchEvents()
    })

    return (
        <section>
            <h2>국내 코로나 현황</h2>
            <div className="contents">
            

            </div>
        </section>
    )
}

export default Contents

1. useState와 useEffect를 import 해주셔서 앱이 로딩이 될 때 사용을 하도록 하고,

2. axios를 import하여 axios를 사용할 수 있게 해줍니다.

3. 그리고 async await을 사용하여 바로 스크립트가 실행되는 것이 아닌, 먼저 모든 페이지가 로딩 된 후에 데이터를 찾는 것으로 설정하였습니다.

이렇게 object 형태로 데이터를 받아왔습니다.