20201028 TIL

변수 & 논리부정 연산자

 cursorImageHandler = (e) => {
    if (e.clientX < window.innerWidth / 2) {
      this.setState({ isCursorPositionleft: true });
    }
    if (e.clientX > window.innerWidth / 2) {
      this.setState({ isCursorPositionleft: false });
    }
};

마우스 커서가 화면의 중앙을 기준으로 왼쪽, 오른쪽에 있는지 판단하는 로직이다.
코드 리뷰로 삼항 연산자와 논리부정 연산자로 코드 수를 줄여보면 어떻겠냐는 피드백을 받았고

 cursorImageHandler = (e) => {
    const isLeft = e.clientX < window.innerWidth / 2;
    isLeft ? this.setState({ isCursorPositionLeft : true }) : this.setState({isCursorPositionLeft:false})
};

로 정리할 수 있었다.
논리부정연산자(!)를 사용하는 방법은 전혀 모르겠어서 멘토님께 질문을 하러 갔고, 이 자체가 true, false가 된다는 점을 이용하면 어떻겠느냐는 답을 얻을 수 있었다 (!!!)

cursorImageHandler = (e) => {
  const isLeft = e.clientX < window.innerWidth / 2;
  this.setState({
    isCursorPositionleft: isLeft,
  });
};

이렇게 줄여진 코드(●'◡'●)
짧고, 간결하고, 보기쉽다.. 알흠답다...😍😍

SCSS 정리순서 컨벤션

1. Layout Properties (position, float, clear, display)
2. Box Model Properties (width, height, margin, padding)
3. Visual Properties (color, background, border, box-shadow)
4. Typography Properties (font-size, font-family, text-align, text-transform)
5. Misc Properties (cursor, overflow, z-index)

컨벤션 순서에 맞춰 작성해야 보기도 편하고,
속성끼리 묶여있어야 유지보수하는 측면에서도 용이하다.

React Component js 상단 import 순서

1. React
2. Library
3. Component
4. Style
5. 이미지
6. css