1. 각자 다른 react-query 사용 패턴

api 폴더에 query api 함수 만들고, 컴포넌트에서 훅처럼 불러와 쓰는 방식

스크린샷 2024-01-11 오후 2.02.50.png

스크린샷 2024-01-11 오후 2.03.34.png

✅ api 폴더에는 비동기 함수만 작성, 컴포넌트에서 query api 선언 및 호출

Untitled

둘 중 하나의 방식으로 통일하는게 좋아보임

@박하린 언니 방식으로 갑시다! 저 저거 작성할 때에는 react-query 사용법을 잘 몰라서 검색해서 나온 방식으로 작성했던 건데 요즘은 언니처럼 작성해서 요게 편할 것 같아요!

2. querykey 관리법

  1. 네이밍 규칙

    [{도메인 그룹}, {query 함수 이름}, …(API 응답에 영향을 주는 값)]

    ⇒ 키는 hierarchy 구조이기 때문에, 이를 활용해서 화면 영역을 분리하는 용도로도 키를 설정할 수 있습니다.

    My구독의 React Query 전환기

3. Styled-components 규칙

  1. props

    1. ✅ props 변수 참조

      background: ${props => (props.active ? (props.first ? '#333333' : '#DFDFDF') : '#fff')};

    2. props 객체 분해 할당

      &::placeholder {
    ${({ $error }) => $error && `color : rgb(var(--redText))`}
  }

  2. 스타일 순서

    → 맞출 수 있는 툴이 있나

    styled-components: Tooling

  3. 스타일 컴포넌트 규칙

    컴포넌트별 폴더 아래에 stylecomponent 파일 생성후 컴포넌트에서 임포트하는 방식

    1. 임포트 방식 ⇒ ✅ S dot 네이밍

      /* ✅  1. 모든 컴포넌트 다 가져올때 */
import * as S from './ModalStyledComponents';

/* 2. 특정 컴포넌트만 가져올때 */
import {
  DetailContainer,
  PlusButton,
  Circle,
  RenderUnscheduledContainer,
} from './CalendarStyledComponents';

    2. 클래스명 : BEM 규칙 → 주로 이방식대로 클래스명 짓는듯

      한국어 정리본 - https://naradesign.github.io/bem-by-example.html

      구글 스타일 가이드 (이것도 참고)

      .block__element--modifier

블록(Block): 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의한다.
요소(Element): 구성 요소 안쪽에는 하나 또는 그 이상의 요소가 있을 수 있다.
변경자(Modifier): 블록 또는 요소는 변경자를 이용하여 변형을 표시할 수 있다.

      e.g.

      .form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

    3. 컴포넌트명

4. API 함수명