January 12, 2022

1. CRA 셋팅 January 11, 2022

<aside> 💡 이미지 슬라이더 만들어본 경험이 없어서

Youtube 에서 튜토리얼 만들기 먼저 해보기로 결정 !

</aside>

2. JSON 파일 만들기 January 12, 2022

2-1. wanted 배너에서 이미지 url, title, content 추출

2-2. Objgen (JSON Generator) 사용하기

원티드 페이지 에서 일일이 수작업으로 url, title, content을 text로 따왔다.

JSON 파일로 만들기 귀찮아서 JSON Generator을 검색해 보았고 어렵지 않게 json파일을 만들 수 있었다.

Untitled

2-3. import images.json

import React from 'react';
import GlobalStyles from './GlobalStyles';
import images from '../images/images.json';
import ImageSlider from '../components/ImageSlider';

export default function Application() {
  return (
    <>
      <GlobalStyles />
      <div>
        <h1>React.js Image Slider</h1>
        <ImageSlider images={images.data} />
      </div>
    </>
  );
}

3. Image Slider

3-1. auto play slider