오픈소스
-
[React Hooks] useState 분석해보기 (진행 중)오픈소스/react 2024. 10. 9. 14:29
useState는 React 깃허브에서 @packages/react/src/ReactHooks.js에서 export 중이다.// @packages/react/src/ReactHooks.jsexport function useState( initialState: (() => S) | S,): [S, Dispatch>] { const dispatcher = resolveDispatcher(); return dispatcher.useState(initialState);}제네릭 타입 S를 담아주면 리턴하는 값은 [S타입, Dispatch>] (S타입에 대한 Dispatch하는 함수)useState의 리턴 값을 알아가기 위해 resolveDispatcher() 라는 함수를 추적function resolveDi..
-
shadcn/ul - Select 컴포넌트의 placeholder 색상 변경오픈소스/ui 라이브러리 2024. 9. 7. 14:40
https://github.com/shadcn-ui/ui/issues/574 Placeholder color in Select component not as expected. · Issue #574 · shadcn-ui/uiWhile I was using the form components, I noticed that the default for the placeholder in the Select component is not the same as the Input. Looking at the code I realized that the intention was for...github.com setValue("publicTag", v)}> {PUBLIC_TAG..
-
@radix-ui / createContext 훑어보기오픈소스/ui 라이브러리 2024. 3. 26. 16:50
@radix-ui/ createContext [primitives/packages/react/context/src/createContext.tsx at main · radix-ui/primitives Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos. - radix-ui/primitives github.com](https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx) 1. createCo..
-
1. Compound Component Pattern오픈소스/ui 라이브러리 2024. 3. 25. 17:16
@radix-ui 같은 나만의 라이브러리 만들어보기 첫 시작. 컴파운드 패턴의 이점 1. 재사용성과 조합성 2. 명확한 API 3. 유연성 4. 내부 상태의 캡슐화 컴파운드 패턴의 특징 공통된 상태를 공유하는 여러 컴포넌트를 조합하여, 하나의 큰 컴포넌트를 만드는 디자인 패턴. 컴포넌트 간 명확한 통신 방법 & 각 컴포넌트는 독립적으로 분리되어 재사용성이 높음. 1. 부모-자식 관계를 통해 명시적으로 연결. 각 컴포넌트의 역할이 분명 2. 상태공유- 내부 상태를 자식 컴포넌트와 공유 3. 컴포넌트는 독립적으로 사용될 수 있으므로, 다른 Context에서도 재사용 아래는 React.ContextAPI를 사용한 컴파운드 패턴. FlyOut 컴포넌트는 내부에 기본적으로 다음 3가지를 가지고 있다: 토글 버튼과..
-
@radix-ui 훑어보기 - accordion오픈소스 2024. 3. 24. 19:08
@radix-ui/accorian primitives/packages/react/accordion/src/Accordion.tsx at main · radix-ui/primitives Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos. - radix-ui/primitives github.com // 사용하는 법 import * as Accordion from '@radix-ui/react-accordion'; import React from 'react'; import classNames from ..
-
[npm] package.json 옵션 정리 *main, module, exports, type, types오픈소스 2024. 1. 10. 15:42
1. 전체 옵션 (축약 by Chat GPT) name: 프로젝트의 이름입니다. version: 프로젝트의 현재 버전입니다. description: 프로젝트에 대한 간단한 설명입니다. keywords: 프로젝트를 설명하는 키워드 배열입니다. homepage: 프로젝트 홈페이지의 URL입니다. bugs: 버그를 보고할 수 있는 이슈 트래커의 URL이나 이메일 주소입니다. license: 프로젝트 라이선스를 명시합니다. people fields: author: 프로젝트의 저자에 대한 정보입니다. contributors: 프로젝트에 기여한 사람들의 리스트입니다. funding: 프로젝트의 재정 지원 정보입니다. files: npm에 포함될 파일들 또는 디렉토리들의 배열입니다. main: 패키지가 로드될 때의 ..
-
npm에 배포해보기오픈소스 2024. 1. 9. 15:52
1. NPM 계정 만들기 https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com 2. 배포 전 패키지명 중복 확인 npm info Javascript-Package-Name 중복 된 이름이라면 해당 패키지의 내용이 뜰 것이..