[Inner Circle/프론트엔드] 4주간 진행한 프로젝트 메모사항

바이브 코딩을 위한 AI 기반 IDE (팀원분들 추천)

나는 현재 코파일럿과 VS코드 사용중...

windsurf(조금더 쌈), cursor

 

 

단위를 rem or px? -> rem으로 통일하는게 낫다.
- EM은 상대적인 단위 곧, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식
- REM은 Root + em = rem도 상대적인 단위 단, 부모요소의 폰트 사이즈에 의해 
자식요소의 폰트 사이즈가 결정되는 방식이 아니라 **Root의 폰트 사이즈**에 의해 결정되는 방식

문서의 전체적인 통일성을 위해서는 REM을 쓰는 게 낫다.

 

 

프론트엔드 개발 방향 조언

성능보단 유저 경험을 중요하게 생각하는게 좋다.
(진짜 성능이 필요한 웹페이지가 아닌 이상)
예를 들어, 데이터가 없을 때 컴포넌트를 없애서 플리커 현상을 내뿜는 것보단 컴포넌트를 항상 표시하는 게 낫다.

 

 

도움이 될만한 사이트

slash 라이브러리

usehooks.com

iab.com

adthecbook.clearcode.cc

 

 

cva 라이브러리

사용하면 tailwind의 분기처리에서 조금 더 가독성이 좋아진다.

import { cva } from "class-variance-authority";

const button = cva("font-bold px-4 py-2 rounded", {
  variants: {
    intent: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-gray-500 text-white",
    },
    size: {
      small: "text-sm",
      large: "text-lg",
    },
  },
  defaultVariants: {
    intent: "primary",
    size: "small",
  },
});

// 사용
<button className={button({ intent: "secondary", size: "large" })}>
  버튼
</button>

 

 

max-width + margin auto + padding

<div class="max-w-screen-lg mx-auto px-4 sm:px-6 lg:px-8"> 콘텐츠가 들어갈 곳 </div>

중앙 정렬된, 너무 넓지 않은 콘텐츠 박스

 

 

value vs defaultValue

const onMinusClick = () => {
    if (quantity > 0) {
        setQuantity(quantity - 10);
    }
};

<button type="button" onClick={onMinusClick}>

<input
    type="number"
    defaultValue={quantity}
/>

value는 controlled, defaultValue는 uncontrolled 컴포넌트라는 특징을 가지고있음.

value와 onChange를 같이 사용하면 리액트의 state와 항상 동기화됨.

 

defaultValue를 사용한다면 setQuantity() 가 실행되었을 경우 컴포넌트가 리렌더링되어 quantity가 변경되는 것처럼 보이지만, 사용자가 직접 input 값을 바꿨을 경우엔 오동작하는 것을 볼 수 있다.

 

결론: defaultValue는 핸들러가 없을 때만 쓰자. 즉, quantity를 초기에 넣어주고, 그 값이 바뀌어도 state에서 추적하지 않아도 될 때. <form> 태그로 데이터를 한번에 전송할 때는 defaultValue를 써도 무방하다.

 

 

useMemo, useCallback, React.memo

최근 자동 캐싱을 해주는 React-Forget 업데이트로 사라지는중.

React Compiler - 우리는 memo를 잊을 수 있을까요? | 카카오모빌리티 디벨로퍼스