요약

+ async/await, promise 이해

+ REST api GET 사용하기

+ SCSS 적용하기

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

+ post css 이해하기

prerequisite

+ 자바스크립트 실행 흐름

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

+ Promise 패턴

+ async/await 패턴

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는 여러가지 다양한 기능을 한다.

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

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

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

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

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

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

axios base URL 설정

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

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

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

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

css, scss 적용하기

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

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

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

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 조건문을 추가하자.

inline 스타일 추가 방법

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

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

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

– note