heroes 리스트 가져오기

요약

+ async/await, promise 이해

+ REST api GET 사용하기

+ SCSS 적용하기

+ image, font 등의 public asset 사용하기

+ post css 이해하기

prerequisite

+ 자바스크립트 실행 흐름

+ 비동기 프로그래밍: callback => promise => async/await => ReactiveX

+ Promise 패턴

// 1. promise 개념 : 비동기를 순차적으로 처리한다.
// 2. promise를 만드는 2가지 방법과 그 차이점 알기
// 3. promise를 사용하는 방법

//1)promise 를 만드는 방법 : 생성자함수
let promise = new Promise(resolve => {
    setTimeout(()=>{
        console.log('async setTimeout');
        resolve('success');
    }, 1000);
});
//Promise 생성자안의 펑션은 executor로써 선언과 동시에 실행된다.
//pending 상태 => resolve 상태 => settled 상태


promise.then(value=>{
  console.log(value);
});

// 1. promise 개념 : 비동기를 순차적으로 처리한다.

// 2. promise를 만드는 2가지 방법과 그 차이점 알기

// 3. promise를 사용하는 방법

//1)promise 를 만드는 방법 : 생성자함수

let promise = new Promise(resolve => {

setTimeout(()=>{

console.log('async setTimeout');

resolve('success');

}, 1000);

});

//Promise 생성자안의 펑션은 executor로써 선언과 동시에 실행된다.

//pending 상태 => resolve 상태 => settled 상태

promise.then(value=>{

console.log(value);

});

// 아래 코드는 비동기가 순차적으로 처리되지 않는다.
// 순차적으로 처리하기 위해서 코드를 수정하자.

new Promise(resolve => {
    setTimeout(()=>{
        console.log('async1');
        resolve('success');
    }, 1000);
}).then(value=>{
    //Promise를 리턴하여 비동기 작업을 동기식으로 처리한다. setTimeout 같은 비동기를 new Promise로 감싸지 않으면 비동기적으로 동작한다.
    console.log(value);
    setTimeout(()=>{
        console.log('async2');
    }, 1000);
    return value;
}).then(value=>{
    console.log(value);
});

// 아래 코드는 비동기가 순차적으로 처리되지 않는다.

// 순차적으로 처리하기 위해서 코드를 수정하자.

new Promise(resolve => {

setTimeout(()=>{

console.log('async1');

resolve('success');

}, 1000);

}).then(value=>{

//Promise를 리턴하여 비동기 작업을 동기식으로 처리한다. setTimeout 같은 비동기를 new Promise로 감싸지 않으면 비동기적으로 동작한다.

console.log(value);

setTimeout(()=>{

console.log('async2');

}, 1000);

return value;

}).then(value=>{

console.log(value);

});

+ async/await 패턴

// async는 함수앞에 사용되어 함수를 비동기로 만든다.
// async는 반드시 await와 같이 사용하여야 한다.
// await 뒤에는 Promise가 와야하고, Promise가 그 결과를 리턴할때까지 기다린다.
// async 비동기 함수가 리턴된 결과를 받기 위해서 then 문을 연결할수 있다.

console.log('start');

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function add1(x) {
  const a = await resolveAfter2Seconds(20);
  console.log(a);
  const b = await resolveAfter2Seconds(30);
  console.log(b);
  return x + a + b;
}

console.log(add1(10));

console.log('end');

// async는 함수앞에 사용되어 함수를 비동기로 만든다.

// async는 반드시 await와 같이 사용하여야 한다.

// await 뒤에는 Promise가 와야하고, Promise가 그 결과를 리턴할때까지 기다린다.

// async 비동기 함수가 리턴된 결과를 받기 위해서 then 문을 연결할수 있다.

console.log('start');

function resolveAfter2Seconds(x) {

return new Promise(resolve => {

setTimeout(() => {

resolve(x);

}, 2000);

});

}

async function add1(x) {

const a = await resolveAfter2Seconds(20);

console.log(a);

const b = await resolveAfter2Seconds(30);

console.log(b);

return x + a + b;

}

console.log(add1(10));

console.log('end');

http, REST API 개요

http 프로토콜에 대해서 다음 사항에 대해서 모두 알고 있어야 한다.

http method의 종류와 차이점
REST api에 사용되는 method
http request 헤더에 사용되는 content-type 의미
content-type 종류: x-www-form-urlencoded, form, json
response status code 종류와 의미
query parameter and uri parameter
multipart/form-data 파일 업로드
비동기 처리방법 – Promise, async/await 이해

heroes 목록 가져오기

http 를 호출하기 위한 3rd party 라이브러리를 설치한다. axios는 여러가지 다양한 기능을 한다.

yarn add axios

1	yarn add axios

heroes 목록을 가져오는 REST api 규격은 다음과 같다. 첨부한 postman 화일을 다운로드 받아서 import하고 테스트 해본다.

host: api.eastflag.co.kr:8000
protocol: /api/user/heroes
method: get
query parameter(option): start_index, page_size

query parameter는 나중에 페이징을 할때 필요하며 필수 파라메터는 아니다. postman으로 테스트하면 결과가 아래와 같이 나올것이다. 결과는 json object이며 result는 결과 코드이며 0은 정상적으로 처리되었다는 의미이다. data 키에 실제 파싱할 json array로 된 hero 리스트가 들어있다. total 키는 나중에 페이징을 할때 필요한 파라메터로 전체 갯수가 담겨져 있다.

{
  "result": 0,
  "message": "success",
  "data": [
    {
      "id": 41,
      "name": "짜빠먠",
      "email": "javaman@gmail.com",
      "photo": "https://eastdb-burket.s3.ap-northeast-2.amazonaws.com/photo/1564822230276_java.jpg"
    },
...
  "total": 35
}

{

"result": 0,

"message": "success",

"data": [

{

"id": 41,

"name": "짜빠먠",

"email": "javaman@gmail.com",

"photo": "https://eastdb-burket.s3.ap-northeast-2.amazonaws.com/photo/1564822230276_java.jpg"

...

"total": 35

}

먼저 콘솔창에 출력해보자. axios를 named import 하는것을 잊지 말자.

DOM이 렌더링 된 직후에 목록 리스트를 한번 가져와야 하므로 useEffect 두번째 파라메터에 빈배열을 넘겨준다.

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

export const Heroes = (props) => {
  useEffect(() => {
    getHeroes()
  }, []);

  const getHeroes = async () => {
    let response = await axios.get('http://api.eastflag.co.kr:8000/api/user/heroes');
    console.log(response);
  }

  return (
    <div>
      Heroes works!!
    </div>
  )
}

import React, {useEffect} from 'react';

import axios from 'axios';

export const Heroes = (props) => {

useEffect(() => {

getHeroes()

}, []);

const getHeroes = async () => {

let response = await axios.get('http://api.eastflag.co.kr:8000/api/user/heroes');

console.log(response);

}

return (

<div>

Heroes works!!

</div>

)

}

postman으로 출력한 결과물은 콘솔로 찍어보면 response 의 data 부분이 여기에 해당한다는 것을 알 수 있다. hero 목록부분은 response의 data 안에 data를 다시 가져와야 한다.

heroes 목록은 처음에는 없다가 네트워크를 통해서 api를 호출하면 보이는 시간에 따라 변하는 데이터이므로 이것을 state로 정의하고 state를 업데이트하도록 한다. 그리고, 이 배열을 루프를 돌면서 photo 필드를 image 태그로, name 필드를 span 태그로 목록을 구성한다.

export const Heroes = (props) => {
  const [heroes, setHeroes] = useState([]);

  useEffect(() => {
    getHeroes()
  }, []);

  const getHeroes = async () => {
    let response = await axios.get('http://api.eastflag.co.kr:8000/api/user/heroes');
    console.log(response);
    setHeroes(response.data.data);
  }

  return (
    <ul>
      {heroes.map(hero => (
        <li key={hero.id}>
          <img src={hero.photo} alt={hero.name}/>
          <span>{hero.name}</span>
        </li>
      ))}
    </ul>
  )
}

export const Heroes = (props) => {

const [heroes, setHeroes] = useState([]);

useEffect(() => {

getHeroes()

}, []);

const getHeroes = async () => {

let response = await axios.get('http://api.eastflag.co.kr:8000/api/user/heroes');

console.log(response);

setHeroes(response.data.data);

}

return (

<ul>

{heroes.map(hero => (

</li>

))}

</ul>

)

}

axios base URL 설정

axios를 호출할때마다 매번 호스트를 설정하는것은 번거롭다. 또한 개발모드와 상용모드에서 백엔드 유알엘이 다를 경우 매번 바꿔야하는 번거로움이 생긴다.

utils 폴더에 api.js를 만들고 base url을 설정한다. 만일 백엔드도 로컬에서 개발하고 있다면 아래 주석으로 한 부분을 참고하면 된다.

import axios from 'axios';

export default axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://api.eastflag.co.kr:8000'
  // baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://localhost:8000'
})

import axios from 'axios';

export default axios.create({

baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://api.eastflag.co.kr:8000'

// baseURL: process.env.NODE_ENV === 'production' ? '' : 'http://localhost:8000'

})

getHeroes() 부분을 app.js를 import 하여 수정한다.

import React, {useEffect, useState} from 'react';
import api from "../../utils/api";

export const Heroes = (props) => {
  const [heroes, setHeroes] = useState([]);

  useEffect(() => {
    getHeroes()
  }, []);

  const getHeroes = async () => {
    let response = await api.get('/api/user/heroes');
    console.log(response);
    setHeroes(response.data.data);
  }

  return (
    <ul>
      {heroes.map(hero => (
        <li key={hero.id}>
          <img src={hero.photo} alt={hero.name}/>
          <span>{hero.name}</span>
        </li>
      ))}
    </ul>
  )
}

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

import api from "../../utils/api";

export const Heroes = (props) => {

const [heroes, setHeroes] = useState([]);

useEffect(() => {

getHeroes()

}, []);

const getHeroes = async () => {

let response = await api.get('/api/user/heroes');

console.log(response);

setHeroes(response.data.data);

}

return (

<ul>

{heroes.map(hero => (

</li>

))}

</ul>

)

}

여기서 CORS가 문제가 발생하는데 localhost:3000 도메인에서 다른 도메인을 호출하기 때문에 발생한다. 이것을 해결하기 위해서 서버에서 cors 설정을 열어놓았고, 실제 프로토콜은 크로스도메인을 호출해야 할 경우 브라우저는 먼저 OPTIONS로 서버에게 허용해도 되는지 물어본 다음 허용이 되면 그 다음에 API를 호출하는 프로토콜도 이해해야 한다.

css, scss 적용하기

li 태그를 bootstrap을 사용하여 커스터마이징을 해보자

...
  return (
    <ul className="img-box">
      {heroes.map(hero => (
        <li key={hero.id} className="row align-items-center m-0">
          <div className="col-1 py-2">
            <img src={hero.photo} alt={hero.name} className="img-fluid rounded-circle"></img>
          </div>
          <span className="col">{hero.name}</span>
        </li>
      ))}
    </ul>
  )
...

...

return (

{heroes.map(hero => (

</div>

</li>

))}

</ul>

)

...

ul 태그에 img-box라는 class를 추가하되 scss 를 적용할려면 어떻게 해야 할까? create-react-app v 2.x 부터는 scss를 바로 적용할 수 있다. 먼저 scss 컴파일러인 node-sass를 설치한다.

yarn add --dev node-sass

1	yarn add --dev node-sass

scss를 글로벌이 아니라 해당 모듈에서만 적용되도록 heroes 폴더에 Heroes.module.scss를 추가한다. & 기호는 부모 참조 연산자이다. 따라서 img-box 클래스는 자식이 아니라 부모가 되는 것이다. ul.img-box 와 동일하다.

ul {
  list-style: none;
  &.img-box {
    margin: 0;
    padding: 0;
  }
}

ul {

list-style: none;

&.img-box {

margin: 0;

padding: 0;

}

public assets 접근 방법

photo 필드에 데이터가 없는 경우 이미지 태그에서 액박 이미지가 나오게 된다.

photo 필드가 없을 경우 디폴트 이미지를 적용하자. 디폴트 이미지는 머티리얼 아이콘 사이트에서 svg 형태로 가져온다. https://material.io/tools/icons 사이트에서 face이미지를 선택후 svg로 저장한다. image, font 등 static 화일을 추가하기 위해서 public 폴더를 사용한다. public 폴더 아래에 images 폴더를 만들고 face-black-18dp.svg 를 추가한다.

자바스크립트에서 public 폴더에 접근하는 방법은 process.env.PUBLIC_URL 이고 html에서는 %PUBLIC_URL% 로 접근한다. conditional 조건문을 추가하자.

...
  return (
    <ul className="img-box">
      {heroes.map(hero => (
        <li key={hero.id} className="row align-items-center m-0">
          <div className="col-1 py-2">
            <img src={hero.photo ? hero.photo : process.env.PUBLIC_URL + '/images/face-black-18dp.svg'} 
                 alt={hero.name} className="img-fluid rounded-circle"></img>
          </div>
          <span className="col">{hero.name}</span>
        </li>
      ))}
    </ul>
  )
...

...

return (

{heroes.map(hero => (

<img src={hero.photo ? hero.photo : process.env.PUBLIC_URL + '/images/face-black-18dp.svg'}

alt={hero.name} className="img-fluid rounded-circle"></img>

</div>

</li>

))}

</ul>

)

...

inline 스타일 추가 방법

inline style을 추가하는 방법은 표현식안에 json 객체 형태로 정의를 하면 되는데 주의할점은 key 부분을 camel-case 로 사용하여야 한다.

style={{width: ‘100%’}} 이렇게 중괄호가 두개 들어가게 되는데 바깥쪽은 JSX expression이고 안쪽은 json 객체이다. img에 적용하고 bootstrap 클래스를 제거하면 다음과 같다.

...
  return (
    <ul className="img-box">
      {heroes.map(hero => (
        <li key={hero.id} className="row align-items-center m-0">
          <div className="col-1 py-2">
            <img src={hero.photo ? hero.photo : process.env.PUBLIC_URL + '/images/face-black-18dp.svg'}
                 alt={hero.name} style={{width: '100%'}}></img>
          </div>
          <span className="col">{hero.name}</span>
        </li>
      ))}
    </ul>
  )
...

...

return (

{heroes.map(hero => (

<img src={hero.photo ? hero.photo : process.env.PUBLIC_URL + '/images/face-black-18dp.svg'}

alt={hero.name} style={{width: '100%'}}></img>

</div>

</li>

))}

</ul>

)

...

적용하면 다음과 같이 보일것이다.

요약

prerequisite

http, REST API 개요

heroes 목록 가져오기

axios base URL 설정

css, scss 적용하기

public assets 접근 방법

inline 스타일 추가 방법

– note