[프로젝트] Watcha Classic # Main Page 캐러셀, 에러

Joah·2022년 7월 2일
0
post-thumbnail

이미지 슬라이드 구현

기능에 대해 따로 글을 작성했다. 기능에 대한 자세한 설명이 필요하다면 아래를 클릭!
라이브러리 없이 이미지 슬라이드 구현(feat. 버튼 삭제, 생성)

그렇다면 이번 글에서는
이미지 슬라이드를 구현하면서 만났던 에러들,
새롭게 배운 개념을 정리해보자!



⛳ 조건부 렌더링 &&

이제까지 사용했던 if문if의 조건이 true라면 다음 명령문을 실행하고 false라면 else 또는 else if의 조건식을 만난다.
만약 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 상황이라면?

우선 삼항 연산자로 표현해보자

  const toPrev = () => {
    slidePx < 0 ? setSlidePx(slidePx + 1375) : null;
  };

false일 때 null값을 부여하면 아무것도 렌더링 하지 않는다. 하지만 굳이 null을 작성한다는 것이 조금 억지(?)라는 느낌이 든다.

더 짧고 간결하게 군더더기 없는 코드를 조건부 렌더링이 구현해준다.

  const toPrev = () => {
    slidePx < 0 && setSlidePx(slidePx + 1375);
  };

💡slidePx이 0보다 작다면 setSlidePx(slidePx + 1375)을 실행하라!


⛳ 인라인 스타일링은 불법이 아니다!

초반 인스타그램 클론 코딩을 할 때 팀에서 거의 모든 요소에 인라인 스타일링을 부여한 팀원이 있었다. 우리는 그 팀원에게 "어? 인자부!! 인자부!!" 외쳤던 기억이 있다.

인자부라인 스타일링 탁의 줄임말이다.

그 후로 의식적인지 무의식적인지 인라인 스타일링을 최대한 쓰지 않으려고 했다.

하지만 px이 변수에 담긴 지금과 같은 상황이라면 요소의 스타일을 제어하기 위해서 인라인 스타일링을 사용하는게 효율적이다!

이를 멘토님께서 웃으시면서 인라인 스타일링이 우선순위에서 가장 높아 사용을 자제하라고 한 것이지 아예 하지 말라는 맥락은 아니었다고 하셨다.

코딩에 이유없이 만들어진 기능은 없다. 인라인 스타일링도 필요하면 사용하자!

<div className="prevBtn" onClick={toPrev} style={{ display: slidePx === 0 ? "none" : "" }}>
    <i className="fa-solid fa-chevron-left" />
</div>
<div className="nextBtn" onClick={toNext} style={{ display: slidePx === -4125 ? "none" : "" }}>
    <i className="fa-solid fa-chevron-right" />
</div>


⛳ Long Story Short

이번 프로젝트에서 가장 힘들었지만 재미있었던 기능 슬라이드
사실 꽤 오랜시간 어떻게 해야할지 코드를 고치고 지웠다.
버튼이 자꾸 한 박자 늦게 없어지고 nextBtn이 먹통이고... 이틀동안 슬라이드 생각에만 갇혀 살았다. 하나에 깊이 빠져있으면 단순한 오타도 보이지 않고, 소용돌이 속에서 나오지 못한채 아주 간단한 코드 하나 구현할 수 없는 뇌정지 상태가 오기 마련이다.

이때 차라리 refresh하는 마음으로 다른 페이지 또는 기능을 구현하자. 그럼 뇌에서 슬라이드에 대한 생각을 잠깐 멈춘다. 그러다 문득 헐!!! 이렇게 해볼까? 하면서 새로운 아이디어가 떠오른다.

그리고 그 코드가 정상적으로 작동되면 코딩 천재가 된 것 같은 기분이 든다.

가장 중요한건 코드를 나의 것으로 만드는 과정이다. 곱씹고 또 곱씹어서 나중에 다른 프로젝트에도 활용할 수 있게!!

다음에는 배열의 요소 갯수에 따라 슬라이드 버튼이 사라지고 생겨나는 기능을 구현하고 싶다.

profile
Front-end Developer

0개의 댓글