본문 바로가기

분류 전체보기234

@radix-ui / createContext 훑어보기 @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.. 2024. 3. 26.
1. Compound Component Pattern @radix-ui 같은 나만의 라이브러리 만들어보기 첫 시작. 컴파운드 패턴의 이점 1. 재사용성과 조합성 2. 명확한 API 3. 유연성 4. 내부 상태의 캡슐화 컴파운드 패턴의 특징 공통된 상태를 공유하는 여러 컴포넌트를 조합하여, 하나의 큰 컴포넌트를 만드는 디자인 패턴. 컴포넌트 간 명확한 통신 방법 & 각 컴포넌트는 독립적으로 분리되어 재사용성이 높음. 1. 부모-자식 관계를 통해 명시적으로 연결. 각 컴포넌트의 역할이 분명 2. 상태공유- 내부 상태를 자식 컴포넌트와 공유 3. 컴포넌트는 독립적으로 사용될 수 있으므로, 다른 Context에서도 재사용 아래는 React.ContextAPI를 사용한 컴파운드 패턴. FlyOut 컴포넌트는 내부에 기본적으로 다음 3가지를 가지고 있다: 토글 버튼과.. 2024. 3. 25.
@radix-ui 훑어보기 - accordion @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 .. 2024. 3. 24.
[Prisma] 검색 기능 추가 해보기 (feat. searchParmas & next.js) 1. 검색 창에 찾을려는 '제목' 을 입력 2. 제목 입력 성공시 router.push 를 통해 url에 ?title="제목" 을 넣어줌 => "/pathname?title="제목" const onSubmit = (data: FormProps) => { const { title } = data; router.push(`${pathname}?title=${title}`); }; 3. 나는 pathname에 접근하면 react-query를 통해 쿼리 키에 따라 데이터를 받아오도록 해놨었다. 4. useSearchParams를 통해 "title"을 get 해옴. 없다면 undefined. // /pathname component const searchParam = useSearchParams(); const .. 2024. 2. 13.
next.js 에 kakao map 띄우기 (feat. react-kakao-maps-sdk) 카카오 개발자 센터에 들어가보면 api key (자바스크립트 키) 를 발급 후 아래 코드를 삽입하라고 한다. "API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없습니다. 하지만, 반드시 실행 코드보다 먼저 선언되어야 합니다." 리액트 같은 경우에는 intex.html에 작성하면 되고 next.js 같은 경우 layout 같은 곳에 Script 태그를 불러와 삽입하면 된다. 하지만 이 같은 번거로운 작업을 JaeSeoKim 님이 배포하신 라이브러리를 사용하면 비교적 간단하게 처리 할 수 있다. next.js 같은 경우 example에 따르면 .env 에 아래와 같이 작성해두면 script 문을 따로 작성하는 대신 useKakaoLoader를 통해 api 키.. 2024. 2. 6.
prisma client로 현재 data의 값을 수정하는 법 prisma docs post의 like 값을 수정하고 싶다면(eg. +1 or -1) 유니크 키를 통해 데이터에 접근 후 post.like +1 과 같은 행동을 할 수 있다. 하지면 통신 측면에서 값을 조회 후 업데이트 하는 것은 두번 이상의 행위를 하는 것이므로 비효율. update의 increase / decrease를 통해 조회와 동시에 값을 수정 해보자. (cf. string 필드를 추가한다면 https://github.com/prisma/prisma/issues/15269 요거 참고 ) export async function PATCH( req: Request, { params }: { params: { postId: string } } ) { try { const { postId } = pa.. 2024. 2. 1.
[next.js] react-quill 에디터 값을 출력하기 (feat. dangerouslySetInnerHTML ) import 'react-quill/dist/quill.snow.css'; import { EditorProvideProps } from '../new/new-types'; // 중간 생략 ReactQuill에 입력한 데이터 value는 html 요소를 string 형태로 받아와짐 (++참고) next.js에서 ReactQuill 컴포넌트를 사용할려면 dynamic으로 import 해야함. (window로 정의 되어 있는데 next는 서버 측에서 작동하니 아래처럼 dynamic으로 받아오면서 ssr:false 넣어주기. + useMemo를 하지 않으면 렌더링 될 때마다 변경되어보림) const ReactQuill = useMemo( () => dynamic(() => import('react-quill'.. 2024. 1. 31.
webpack과 babel (feat. CRA) webpack 여러 개의 파일을 하나로 합쳐주는 모듈 번들러 기능 css loader 기능 jsx 변환 작업 여러 개로 나눠진 js 파일을 html이 실행 할 수 있는 하나의 js파일로 합쳐줌 파일 분할(Code Splitting) 애플리케이션 번들에 포함된 코드를 여러 개의 조각/청크 로 분할하는 기술 초기 로딩 시 필요한 최소한의 코드만 다운로드 하여 페이지 로딩 속도 향상 대규모 애플리케이션에 유용 리액트 라우터와 같은 라이브러리와 잘 통합되어 있어, 각 페이지에 필요한 코드만 로딩하게 도와줌 // 동적 import() - 모듈은 필요할 때만 로딩되며 웹팩은 이를 감지하여 해당 모듈을 별도의 청크로 분할 const someModule = import('./someModule.js'); // 웹팩의 .. 2024. 1. 11.
[npm] package.json 옵션 정리 *main, module, exports, type, types 1. 전체 옵션 (축약 by Chat GPT) name: 프로젝트의 이름입니다. version: 프로젝트의 현재 버전입니다. description: 프로젝트에 대한 간단한 설명입니다. keywords: 프로젝트를 설명하는 키워드 배열입니다. homepage: 프로젝트 홈페이지의 URL입니다. bugs: 버그를 보고할 수 있는 이슈 트래커의 URL이나 이메일 주소입니다. license: 프로젝트 라이선스를 명시합니다. people fields: author: 프로젝트의 저자에 대한 정보입니다. contributors: 프로젝트에 기여한 사람들의 리스트입니다. funding: 프로젝트의 재정 지원 정보입니다. files: npm에 포함될 파일들 또는 디렉토리들의 배열입니다. main: 패키지가 로드될 때의 .. 2024. 1. 10.

티스토리툴바