[ TIL ] 2022-05-29

CSS

• 글자 색상에 black 사용은 지양해라

• 브랜드 컬러코드 조합 참고해서 써라(좋은 예, 애플)

  https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

// 애플 컬러 코드
$RED: #ff3b30;
$ORANGE: #ff9500;
$YELLOW: #ffcc00;
$GREEN: #34c759;
$TEAL: #5ac8fa;
$BLUE: #007aff;
$INDIGO: #5856d6;
$PURPLE: #af52de;
$PINK: #ff2d55;

• Adobe Color

  https://color.adobe.com/

  • Extract Theme 에 사진 넣으면, 알아서 색상 코드를 추출해준다
  • Accessibility Tools 에서 색상 대조도 가능하다

Tips

• VSC 에서 프로젝트를 시작할 때, 기본 셋팅을 이전 프로젝트와 동일하게 진행하고 싶다면, 이전 프로젝트 clone 후 셋팅 커밋으로 돌아가면 된다

// 원하는 커밋으로 돌아가기(이후 커밋은 모조리 지우기)
git reset --hard [원하는 커밋]

React

• react router 중첩 라우팅
  공식 문서 참조

function App() {
  return (
    <Routes>
      <Route path="users" element={<Users />}>
        <Route path=":userId" element={<User />} />
      </Route>
    </Routes>
  );
}


function Users() {
  return (
    <div>
      <h1>Users</h1>
      <Outlet />
    </div>
  );
}

function User() {
  let { userId } = useParams();
  return <h1>userId: {userId}</h1>;
}