React.js
-
프로덕트 투어 라이브러리React.js 2024. 4. 22. 12:04
첫 방문 사용자에게 웹사이트 이용 방법을 안내하기 위해 사용할 수 있는 기능을 명칭으로 프로덕트 투어(product tours)라고 한다. - React Joyride React Joyride Demo react-joyride.com - React Tour GitHub - elrumordelaluz/reactour: Tourist Guide into your React Components Tourist Guide into your React Components. Contribute to elrumordelaluz/reactour development by creating an account on GitHub. github.com react-joyride가 좋아보인다
-
react에서 css module 사용시 자식 컴포넌트에서 css를 정의하고 className만 부모 컴포넌트에 props로 전달 하기React.js 2024. 4. 20. 16:41
import { toggleVariant } from '@/utils/animation/toggle-variant'; import { motion } from 'framer-motion'; import React, { FC, PropsWithChildren } from 'react'; const LayerModalVariantWrapper: FC = ({ children, className }) => { return ( {children} ); }; export default LayerModalVariantWrapper; 똑같은 코드발생으로 인해 wrapper를 이용해서 관리 하려고 했는데 보통 className이 없지만 특정 layer-modal 컴포넌트에서 cla..
-
vite+ typescript + react+ emotion + storybookReact.js 2024. 4. 17. 10:47
vite를 통해 react를 설치한다 // 더블대시가 필요함 주의 # npm 7+, extra double-dash is needed: $ npm create vite@latest my-vue-app -- --template react-ts emotion 설치 $ npm install --save @emotion/react $ npm install --save @emotion/styled react-router-dom 설치 $ npm i react-router-dom 절대 경로 설정을 위한 vite-tsconfig-paths 설치 $ npm i -D vite-tsconfig-paths @types/node vite-env.d.ts 는 타입스크립트에서 환경변수를 추론하게 도와줌 https://velog.i..
-
react mention 기능 구현React.js 2024. 4. 13. 11:03
1. react-mentions 라이브러리 설치 $ npm i react-mentions $ npm i -D @types/react-mentions 2. 문서 확인 https://react-mentions.vercel.app/ React mentions react-mentions.vercel.app https://github.com/signavio/react-mentions GitHub - signavio/react-mentions: @mention people in a textarea @mention people in a textarea. Contribute to signavio/react-mentions development by creating an account on GitHub. github.c..
-
SSE 통신을 위한 EventSource 대체할것React.js 2024. 4. 12. 13:48
클라이언트에서 사용하는 EventSource의 아쉬운점은 header를 넣지 못한다는 점이다. http 통신을 그대로 이용할 수 있다는점에서 단방향 통신으로 SSE통신방식이 굉장히 매력적으로 다가왔으나 hader에 Bearer 토큰을 넣어서 인증하는 방식을 사용 할 수 없다면 backend에서 다른방식으로 처리하는 코드가 늘어나게 되면서 authorization 하는 하나의 gaurd로 처리하는게 아니라 다른 guard를 만들거나 검증하는 다른 방법을 모색 해야한다. 굉장히 불편하다. https://eightify.app/dev/http-authorization-header-in-eventsource-server-sent-events 해당 좋은글을 발견했다. 확장성 있는 http-authorization..
-