클론 코딩 피드백 정리

깃허브 피드백

1. 접근성 측면 img

• img의 alt 속성이나, figcaption 사용하면 좀더 시멘틱하고 화면에서 숨기는 처리가 verbose해지지 않는 장점이 있으면서 접근성도 만족할 수 있다.

2. 이미지 추출법 sprite와 HTTP/2

• sprite 방식은 이미지 GET 요청을 최소화하기 위해 생겨난 방법으로, HTTP/2 사용이 일반화되면서 여러번의 GET 요청에도 최적화된 브라우저 렌더링이 가능해져서 sprite 이미지 추출의 의미가 덜해졌다.
• HTTP/2는 출처별로 최대 128개의 병렬 요청을 처리할 수 있어, 스프라이트 기법을 쓰지 않아도 많은 양의 리소스를 동시에 요청하고 처리할 수 있다.
• 관련 포스팅

3. 😯😮자료구조 정리

• 하나의 아이템을 구조화한 후에 이것들의 나열로 배열을 만들면 좀더 파악하기 쉬운 자료구조가 되면서 데이터 처리시에 사이드이펙트를 줄일 수 있습니다. 현재는 배열 두개로 index를 통해 특정 아이템에 접근하는 형태인데 어느 한 배열의 순서가 바뀐다거나 중간에 아이템 하나가 추가/삭제된다거나 하는 경우에 유지보수 포인트를 놓치기가 쉽습니다.

수정전

const desc = ['[댑]무료반품+10%+12%댑 여름 잠옷세트/바지~70%', '[백설]포도씨유 5병(900ml 5)', ...]
const price =  ['13,900', '34,210', '12,800', '17,500', ...]

const createItems = (i) => {
const bestItem = document.createElement('li')
bestItem.classList.add('swiper-slide', 'best__item')
bestItem.innerHTML = `
  <a href="/" class="best__link">
  <div class="product">
    <figure class="product__card">
      <div class="image--dimmed-layer"><img src="./images/bestProduct${i+1}.jpeg" alt="${desc[i]}" class="product__image" width="100%" />
      </div>
      <figcaption class="product__caption">
       ${desc[i]}
      </figcaption>
    </figure>
    <div class="product__rank">
      <span class="sr-only">순위</span>
      <span class="rank">${i+1}</span>
    </div>
    <div class="product__price">
      <span class="sr-only">판매가</span>
      <em class="price" role="text">${price[i]} <span class="currencyUnit">원</span></em>
    </div>
  </div>
</a>
  `
return bestItem;
}
export const renderItem = () => {
  $bestList.innerHTML = ''
  for(let i=0; i<15; i++) {
    const item = createItems(i)
    $bestList.appendChild(item)
  }
}

수정후

const items = [
  {
    desc: '[댑]무료반품+10%+12%댑 여름 잠옷세트/바지~70%',
    price: '13,900'
  },
  ...restItems,
]

const createItem = (item, index) => {
  const bestItem = document.createElement('li')
  bestItem.classList.add('swiper-slide', 'best__item')
  bestItem.innerHTML = `
    <a href="/" class="best__link">
      <div class="product">
        <figure class="product__card">
          <div class="image--dimmed-layer">
            <img src="./images/bestProduct${index+1}.jpeg" alt="${item.desc}" class="product__image" width="100%" />
          </div>
          <figcaption class="product__caption">
            ${item.desc}
          </figcaption>
        </figure>
        <div class="product__rank">
          <span class="sr-only">순위</span>
          <span class="rank">${index+1}</span>
        </div>
        <div class="product__price">
          <span class="sr-only">판매가</span>
          <em class="price" role="text">${item.price} <span class="currencyUnit">원</span></em>
        </div>
      </div>
    </a>
  `
  return bestItem;
}
export const renderItems = () => {
  $bestList.innerHTML = '';
  
  items.forEach((item, index) => {
    const itemChild = createItem(item, index);
    $bestList.appendChild(itemChild);
  })
}

4. JS 변수명 카멜케이스

수정전

const categorydepth = document.querySelectorAll('.category__depth2')

수정 후

const categoryDepth = document.querySelectorAll('.category__depth2')

5. 함수 네이밍 센스!

• 동작을 보았을 때 goToTop으로 함수명을 선언적으로 해주면 좋을 것 같습니다. 만약 스크롤 이동 위치를 옵셔널하게 인자로 받아 처리하는 함수였다면 function goTo (position) {// 스크롤 처리} 형태로 개선될 여지도 있어 보이네요!

6. BEM 방법론에 의한 네이밍 센스!

• BEM 방법론에 따르면 -- 뒤에만 modifier가 붙으면 되어서 --active 로만 적어도 의미 전달이 될 것 같아요!
  모듈화된 클래스 변수명을 사용한다면 isActive 등으로 boolean 타입 스타일임을 명시할 수 있습니다.

7. scss

• 중첩은 3deapth이내로!
• & 선택자로 scss 신택스 슈가를 이용한 modifier도 확장도 가능하다.

수정전

  .service__title {
    font-size: 2.4rem;
    font-weight: normal;
    margin: 0;
  }
  .service__content {
    margin: 30px -12px 0 -12px;
  }

수정후

  &__title {
    font-size: 2.4rem;
    font-weight: normal;
    margin: 0;
  }
  &__content {
    margin: 30px -12px 0 -12px;
  }

8. 웹팩의 css minify 플러그인

• 버벅이는 이슈 관련해서는 css 로드 시점이 느린 상황 같아서, 웹팩의 css minify 플러그인 사용하여 한번 테스트해보시면 어떨지 의견드립니다!
• 적용 공부중!