Codekata💢

splice/slice

• slice: 원본을 복사한다.
• splice: 원본을 바꿔버린다.

// 배열 요소에 있는 0을 모두 뒤로 빼주는 함수
let test = [0,1,0,0,3,12]

const moveZeroes = nums => {
  let zeroCnt = 0;

  while(nums.indexOf(0)!==-1){
    nums.splice(nums.indexOf(0),1);
    zeroCnt ++
  }

 for (let i=0; i<zeroCnt; i++){
   nums.push(0)
 }
 
  return nums
}

moveZeroes(test)

오늘의 CSS🎨

z-index

• position 속성이 있는 요소에만 z-index 적용 가능

.productImage {
      max-width: 220px;
      position: relative;
      .heartImg {
        // float: left;
        position: absolute;
        top: 10px;
        left: 10px;
        width: 10%;
        z-index: 10;
      }
      .frontShoesImg {
        position: relative;
        width: 100%;
        z-index: 5;
      }
      .backShoesImg {
        width: 100%;
        position: absolute;
        left: 0px;
        z-index: 1;
      }
    }

transition

• 속성값의 변화가 부드럽게 이루어지고 싶을때

.beforeExample{
  width: 100px;
  opacity: 1;
  transition: width 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}
.afterExample{
  width: 0px;
  opacity: 0;
  transition: width 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}

transform

• 어떤 요소가 사방으로 커지거나 작아지는 효과를 주고싶을 때

.heartImgEmpty {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 10%;
        z-index: 10;
        transition: transform 0.2s ease-out;
        &:hover {
          transform: scale(1.2);
        }
      }

꿀Tip🧀

• 객체 표현식

  • 변수 활용할땐 obj[var]
  • 키값일 땐 obj.key

• 매번 변하는 값은 state
  변하지 않는 값은 const

• 변한 state 바로 확인하기

handleFilter = () => {
    this.setState(
      {
        hideFilterVaild: !this.state.hideFilterVaild,
      },
      () => {
        console.log(this.state.hideFilterVaild);
      }
    );
  };

• z-index 값에 따라 cursor: porinter 설정이 적용되지 않을 수 있다
• tolocaleString 숫자 쉼표

{products.map((product) => {
  const { id, src, name, price } = product;
    return (
      <ProductContainer
        hideFilterValid={hideFilterVaild}
        id={id}
        src={src}
        name={name}
        price={Number(price).toLocaleString('en')}
      />
  );
})}

• 무한 스크롤

export class ProductList extends React.Component {
  constructor() {
    super();
    this.state = {
      products: [],
      hideFilterVaild: false,
      preItems: 0,
      items: 14,
    };
  }

  infiniteScroll = () => {
    let scrollHeight = Math.max(
      document.documentElement.scrollHeight,
      document.body.scrollHeight
    );
    let scrollTop = Math.max(
      document.documentElement.scrollTop,
      document.body.scrollTop
    );
    let clientHeight = document.documentElement.clientHeight;

    if (scrollTop + clientHeight === scrollHeight) {
      console.log("success");
      this.setState({
        preItems: this.state.items,
        items: this.state.items + 14,
      });
      this.componentDidMount();
    }
  };

  componentDidMount() {
    fetch("http://localhost:3000/data/ProductList/Products.json", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((res) => {
        // 무한스크롤 기능 확인을 위한 임의 함수
        let result = res.products.slice(this.state.preItems, this.state.items);
        this.setState({
          products: this.state.products.concat(result),
        });

        // 실제 데이터 받아오는 함수
        // this.setState({
        //   products: this.state.products.concat(res.products)
        // })
      });

    window.addEventListener("scroll", this.infiniteScroll);
  }

  render() {}