개발개발51 커스텀 Select, 드롭다운 구현하기 html 태그 중 select, option을 구현하면 아래와 같이 간단한 드롭다운을 구현할 수 있다Choose a pet: --Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish Choose a pet:--Please choose an option--DogCatHamsterParrotSpiderGoldfish 코드 출처는 MDN 이 경우 UI 커스텀이 안되기때문에 input으로 구현하는 경우가 많이 있는 것 같다.이전 workroot 프로젝트와 이번 프로젝트에서도 커스텀 select 를 구현했다.작동 방식은 비슷한데, 구현 방식과 react hook form 에 등록하는 방법이 각기 register, controller로 다르.. 2025. 4. 24. [vanilla-extract] sprinkles 적용하는 방법 디자인 시스템에서 공통 컴포넌트를 개발하면서 불편한 점이 하나 있었다.바로 매번 font-size, font-weight, lint-height 속성을 적어주는 것이었다. 먼저 피그마에서 이를 토큰화하였고, vanilla-extract의 sprinkles를 이용하여 간편하게 코드에 적용하고자 했다. import { createGlobalTheme } from "@vanilla-extract/css";import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";// text 토큰export const FontWeight = createGlobalTheme(":root", { regular: "400", medium: "50.. 2025. 4. 21. 조건부 렌더링 - 비정상적인 버튼 동작 발생 원인 / 휴리스틱 알고리즘 / key prop의 중요성 지난 번에 올렸던 버그와 관련하여, 임시로는 해결했지만? 근본적인 해결을 하지 못한채 지나갔었다.상태에 따라 두 종류(type = "button" / "submit")의 버튼을 조건부 렌더링하는데, UI에는 문제 없지만 기능에 문제가 있었다.폼의 전체 필드가 채워져있는 경우에 type="button"을 눌렀을때 submit이 작동하는 문제였다.isAccountPart ? : --- 상태에 따라 조건부 렌더링으로, 두 단계로 나눠 폼 작성이전isAccountPart ? 다음 : 제출 https://memoryelim.tistory.com/316 submit 버튼이 아닌데 submit 되는 버그아래와 같이 폼의 모든 필드가 채워졌을때 [이전] 버튼 눌러서 이동한 뒤에 [다음] 을 누르면 제출이 이루어진.. 2025. 4. 21. submit 버튼이 아닌데 submit 되는 버그 아래와 같이 폼의 모든 필드가 채워졌을때 [이전] 버튼 눌러서 이동한 뒤에 [다음] 을 누르면 제출이 이루어진다.[완료] 버튼을 눌렀을때만 제출이 되어야한다.(현재는 제출 버튼 클릭 이벤트에 콘솔 출력을 임시로 연결해둔 상황) [다음] 버튼은 type="button"으로 되어있고, [완료] 버튼만 submit으로 되어있는데 왜 이런 문제가 발생하는 걸까?대략적인 페이지구조는 이렇게 되어있다. ---리액트 훅 폼 사용isAccountPart ? : --- 상태에 따라 조건부 렌더링으로, 두 단계로 나눠 폼 작성이전isAccountPart ? 다음 : 제출 form 안에 버튼이 2개 있어서 그런가? => [이전] 버튼을 form 바깥으로 빼도 동일한 현상 발생 [완료] 버튼 type="subm.. 2025. 4. 18. 배럴 파일 자동 생성 스크립트 패키지 진입점 index.ts 생성하기 위해 배럴 파일 생성 자동화아래 블로그에서 공유해준 코드로 배럴 파일을 생성하였다.https://lasbe.tistory.com/187 "scripts": { ... "barrel": "node generateBarrel.js" },안내해주신대로 처리 대상 디렉토리와 예외 파일 목록을 작성했고, script에 추가하여 편리하게 배럴파일을 생성할 수 있었다.만약 내용을 수정하고 스크립트를 재호출하면 이전의 결과물을 덮어씌우게 된다. 그런데 나는 export default 를 사용해서 컴포넌트를 export 해주었고+ 컴포넌트 파일명의 경우 파스칼 컨벤션을 사용하므로 아래와 같이 코드를 일부 수정했다. export * from './components' 이런 .. 2025. 4. 9. 모노레포 vite build 결과물이 이상해요? 문제 상황모노레포 프로젝트에서 디자인 시스템 내부 컴포넌트를 앱에서 사용하기 위해서는 빌드 결과물인 dist/*.js 를 export 해야한다고 생각했음pnpm build 시 .js 파일이 생성되었다가 삭제됨 해결packages/ui/src/component/ 경로에 존재하는 배럴 파일 index.ts가packages/ui/dist/components/index.js로 컴파일되는 것이 아니라 패키지 내 전체 파일을 빌드한 결과물을 packages/ui/dist/ui.mjs로 생성한다 vite 는 단일 엔트리 파일을 기준으로 빌드함 아래 config를 보면 entry 가 지정되어있다 //vite.config.tsexport default defineConfig({ build: { outDir: "d.. 2025. 4. 8. 이전 1 2 3 4 ··· 9 다음
