react
-
Cursor + Next.js 개발설정Tool/VSCode&Cursor 2024. 12. 4. 17:37
1. Next.js 프로젝트 생성하기공식사이트를 보고 생성한다.test 폴더를 생성하고 source 프로젝트를 생성한다.$ mkdir test$ cd test$ npx create-next-app@latest source --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 노드 버전 오류npx: installed 1 in 0.905sUnexpected token '??=' node를 최신 버전으로 변경하고 재시도 한다. 2. 서버 실행$ cd source$ cat package.json$ yarn dev scripts를 확인하고 서버를 실행해 본다. node 버전이 낮으면 아래와 같은 에러가 발생..
-
비트마스크 적용 (QueryDSL & Hibernate 6.x)Language/Java 2024. 8. 28. 16:45
Java QueryDSL에서 비트마스크를 사용하는 이유는 여러 상태나 옵션을 효율적으로 저장하고, 이를 SQL 쿼리에서 쉽게 필터링하기 위해서이고, 비트마스크를 사용하면 여러 가지 조건을 하나의 필드로 관리할 수 있으며, 데이터베이스에서 복잡한 조건을 효율적으로 조회할 수 있다. 비트마스크 사용의 주요 이유1. 상태 관리의 효율성여러 상태나 옵션을 하나의 정수 값에 저장할 수 있다. 예를 들어, 사용자의 권한을 비트마스크로 관리하면, 권한 정보를 단일 열로 관리할 수 있다. 2. 간결한 쿼리비트마스크를 사용하면 복잡한 조건을 간단한 비트 연산으로 표현할 수 있다. 여러 개의 OR 또는 AND 조건 대신, 비트 연산자를 사용해 단순한 조건으로 필터링할 수 있다. 3. 성능 최적화비트 연산은 매우 빠르며, ..
-
push Toast 메시지 만들기Language/React 2024. 7. 9. 14:43
iOS 포그라운드 상태에서 푸시를 수신 후 React에서 푸시메시지를 토스트 형태로 표시하는 작업에 대한 정리이다. 소스코드css.push-toast-wrap { position: fixed; top: 0px; width: 100%; z-index: 99999;}.push-toast-wrap .toast-items { display: flex; flex-direction: column; gap: 10px;}.push-toast-wrap .toast-items .item { display: flex; align-items: flex-start; /* width: 344px; */ width: 720px; padding: 14px 14px 12px 14px; border-radius:..
-
Rancher - react build html nginx로 띄워보기ETC/MacOS,Rancher 2024. 3. 15. 14:44
react로 개발되고 빌드된 html를 로컬에서 nginx로 띄워볼 일이 생겼다, 간단하지만 정리는 해두자. custom.conf 생성$ vi /Users/deokjoonkang/dev/opt/nginx/config/custom.confserver { listen 80; server_name example.com; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; }} 컨테이너 실행$ nerdctl run -d -p 8090:80 \ -v /Users/deokjoonkang/dev/opt/nginx/config/custom.conf:/etc/n..
-
react-hook-form typescript로 변환 및 컴포넌트 생성 (antd)Language/React 2023. 12. 27. 17:42
이번 포스팅에서는 react-hook-form을 전체 사이트에 적용하기에 앞서 코드 라인을 줄여서 가독성을 높이고 타입스크립트로 컴포넌트를 제작해 두려고 한다. 현재 javascript 및 typescript가 혼재 되어 있지만.. 시간될때 마다 수정해 나가자! 언젠간.. typescript만 남으리라!! react-hook-form component 적용import { useForm } from 'react-hook-form';import { NInput, NInputNumber, NTextArea, NCheckbox, NSelect, NRadioGroup, NTinyMceEditor, NImageSelector } from 'components/FormControls';const TestPop = (..
-
react에 typescript 적용하기Language/React 2023. 12. 27. 15:33
회사에서 사용중인 오래된 버젼인 리액트 ^16.13.1에서 typescript만 적용해 보려고 한다. React@^16.13.1 버전과 잘 맞는 버전 React@^16.13.1과 잘 맞는 typescript 버전에 대해서 ChatGPT 질의 한 결과를 토대로 진행하려고 한다. 설치 모듈 및 버전 Modules react-hook-form 버전 typescript@^4.1.2 yarn add --dev typescript@^4.1.2 @types/node@^10.17.27 yarn add --dev @types/node@^10.17.27 @types/react@^16.9.0 yarn add --dev @types/react@^16.9.0 @types/react-dom@^16.9.0 yarn add --de..
-
react-hook-form 적용기 (antd)Language/React 2023. 12. 18. 13:18
구 버전의 node 14.17.4 + react 16.13.1 에서 react-hook-form을 적용해보자. react-hook-form은 Node 16.0.0 이상을 권장한다고 하는데 다음 분기때 버전 올릴 계획도 있고 백오피스에 적용하는거라서 큰 문제가 발생하지 않는다고 판단되어 적용하기로 하였다. 이런 저런 핑계로 지금 안하면 나중에도 못한다.! Node버전과 React버전 별 사용가능한 react-hook-form 버전 Node 버전 React 버전 react-hook-form 버전 12.17.0 이상 16.8.0 이상 7.3.0 이상 14.17.0 이상 16.13.0 이상 7.3.0 이상 16.0.0. 이상 17.0.0 이상 7.3.0 이상 17.0.0. 이상 18.0.0 이상 7.3.0 이상..
-
3. 디자인시스템 - npm에서 받아서 활용해보기Project/Figma+Storybook 2023. 11. 13. 10:46
앞서 설정한 디자인 시스템의 npm을 storybook 문서를 활용하여 테스트를 진행해 보자. 1. 디자인시스템 - Rollup을 사용하여 Storybook npm 배포 및 사용 2. 디자인시스템 - Storybook chromatic 배포 및 git 연동 3. 디자인시스템 - npm에서 받아서 활용해보기 3.1. 리액트 설치 $ npx create-react-app design-system-test-app --template typescript $ yarn create react-app design-system-test-app --template typescript 3.2. npm 라이브러리 설치 $ yarn add @djgundam/react-storybook-rollup-starter 3.3. 확인..