30개 프로젝트로 배우는 프론트엔드 with React : 2강 이미지 슬라이더 만들기

완성 이미지

• 비기능적 요구사항
  • webpack 번들러 사용
• 기능적 요구사항
  • next, prev 버튼으로 이미지 이동 기능 제공
  • 이미지 하단에 현재 몇번째 이미지를 보여주고 있는지 indicator 기능 제공
  • setTimeout, setInterval로 auto play 기능 제공

 

9be51d Chapter 2 Image Slider

강의에서 제공한 코드

 

강의로부터 새로 알게 된 점

• setTimeout, setInterval의 차이점

 

추가 기능 및 리팩토링

0df836 refactor(chap2): add catch error when no access image

- unsplash에서 api로 접근해서 image 가져와서 뿌려주기

- image url이 유효하지 않으면 로컬 image 보여주기

addImage() {
    const realImageList = [];
    fetch(
      `https://api.unsplash.com/photos/random?client_id=${env.UNSPLASH_ACCESS_KEY}&count=7`,
    )
      .then(res => res.json())
      .then(v => {
        v.map(src => realImageList.push(src.urls.regular));
      })
      .then(() => {
      	// 주소는 위에 선언 및 초기화
        const imageList = [red, orange, yellow, green, blue, indigo, violet];

        [0, 1, 2, 3, 4, 5, 6].forEach(v => {
          const li = document.createElement('li');
          const img = document.createElement('img');

          img.src = realImageList[v];
          img.setAttribute(
            'onerror',
            `this.onerror = ''; this.src="${imageList[v]}"`,
          );

          li.appendChild(img);

          this.sliderListEl.appendChild(li);
        });

        // ... (event 추가)
      });
  }

 

6c092b refactor(chap2): remove no need else

- 필요없는 else 삭제

 

추가로 수정하고 싶은 점

• 마지막 이미지에서 첫번째 이미지로 갈 때 부자연스러운 것