January 12, 2022

1. CRA 셋팅 January 11, 2022

• README.md 제작

  🔗 배포

  🏹 필수 구현사항

  1. 상단 GNB(Global Navigation Bar)
  2. 슬라이드(또는 캐러샐이라고 불림) 영역
  3. 반응형(Responsive Web) 구현
  4. Github Repository 주소와 배포 링크를 제출

  💻 실행 결과

  ✅ Git - Commit Message Convention 🔗

  • feat : 새로운 기능 추가
  • fix : 버그 수정
  • docs : 문서 수정
  • style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
  • refactor : 코드 리펙토링
  • chore : 빌드 업무 수정, 패키지 매니저 수정

<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파일을 만들 수 있었다.

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