shadcn/ui 코드를 보다가 잠깐 멈췄던 부분이 있었다. JSX에서는 뒤에 오는 prop이 앞을 덮어쓴다고 알고 있었는데, Button 컴포넌트는 className을 앞에 두고 {...props}를 뒤에 둔다.

function Button({ className, variant, size, ...props }: ButtonProps) {
  return <ButtonPrimitive className={cn(buttonVariants({ variant, size, className }))} {...props} />;
}

처음엔 그냥 이렇게 생각했다.

"어? 이거 사용자가 className 넘기면 덮어써지는 거 아냐?"

근데 다시 보니까 애초에 덮어쓸 대상이 없었다. className을 구조 분해로 미리 빼놨기 때문이다.

function Button({ className, ...props }: ButtonProps);

여기서 이미 className은 따로 꺼내졌고, props 안에는 안 들어간다. 그러니까 뒤에서 {...props}를 spread해도 className 충돌 자체가 안 난다.

zod, react-hook-form, <input type="number">. 숫자 입력 처리를 검색하면 늘 같은 후보들이 나온다. 그런데 페이지 점프 input 하나를 만들면서 든 생각은, 이런 도구를 꺼내기 전에 검증의 위치를 먼저 정해야 한다는 것이었다.

결론부터 말하면 입력 시점에서 막아버리면 변환 시점은 두 줄로 끝난다. 왜 그 두 줄로 충분한지가 이 글의 주제다.

입사하고 6개월 즈음, Vue 2(Quasar Framework) 기반의 제품을 외주 개발자가 React로 마이그레이션 하던 중에 계약이 종료되어 인계를 받게 되었다. 미완성된 React 버전 제품의 기능을 원래의 수준 또는 그 이상으로 만들기 위해 열심히 뜯어 고침과 동시에 개발 환경을 개선하기 위해 많은 시도를 했다. (현재진행형)

CORS 문제를 해결하다가 알게 된 사실.

자바스크립트의 Array.length는 참 많이 쓰는 속성이다.

프로젝트를 하다가 새로 알게 된 지식을 정리하려고 한다.

현상​

프로젝트를 진행하다가 일관성을 위해 styles.css라는 파일명을 Styles.css로 변경해 주었다.

그런데, Git이 파일명 변경 사항을 tracking하지 못하는 현상을 발견했다.

:::info 출처

프로그래머스

:::

문제 설명​

머쓱이는 프로그래머스에 로그인하려고 합니다. 머쓱이가 입력한 아이디와 패스워드가 담긴 배열 id_pw와 회원들의 정보가 담긴 2차원 배열 db가 주어질 때, 다음과 같이 로그인 성공, 실패에 따른 메시지를 return하도록 solution 함수를 완성해주세요.

• 아이디와 비밀번호가 모두 일치하는 회원정보가 있으면 “login”을 return합니다.
• 로그인이 실패했을 때 아이디가 일치하는 회원이 없다면 “fail”를, 아이디는 일치하지만 비밀번호가 일치하는 회원이 없다면 “wrong pw”를 return 합니다.

:::info 출처

프로그래머스

:::

문제 설명​

문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요.

기존에도 SSG(Static Site Generator) 도구인 Gatsby로 블로그를 만들었는데, 이번에 Docusaurus로 변경하게 되었다.

.gitignore 파일은 root 디렉토리에 추가해서 git으로 관리하고 싶지 않은(tracking 하지 않을) 파일을 정의하는 파일이다.

때로는 이미 원격 저장소에 업로드한 파일을 나중에 무시하고 싶은 경우가 있다.