728x90
반응형
- [Next.js] [Next.js] 인프런 강의 "Next.js 필수 개발 가이드 3시간 완성!" 정리(Zod를 이용한 유효성 검사)2024-02-13 14:03:591. Zod 설치 Zod는 유효성 검사 라이브러리이다. npm i zod 😉 공식 문서 : https://zod.dev/ 2. 적용 방법 📌 스키마 작성 // src/app/api/users/schema.ts import { z } from "zod"; const schema = z.object({ name: z.string().min(3), email: z.string().email(), age: z.number(), }); export default schema; 📌 Zod 적용 // src/app/api/users/[id]/route.tsx import { NextRequest, NextResponse } from "next/server"; import schema from "../schema"; ..
- [Next.js] 동일한 GLTF 모델을 2번 이상 렌더링하기(react-three-fiber/drei/Three.js)2023-12-28 09:45:381. 한 페이지에 하나의 GLTF만 렌더링 되는 문제 페이지에 하나의 GLTF 파일을 이용해 여러 개의 모델을 렌더링 하고자 하였다. 이미지 태그를 이용하는 방식처럼 당연히 가능할 거라 생각했는데 현실은 [그림 2]와 같이 마지막 하나의 구성만 적용되었다. 여러 테스트 중에 GLTF의 복사본의 만들어 이름을 달리하여 로드했더니 원하는 결과를 얻을 수 있었다. 하지만 렌더링 모델의 개수만큼 동일한 내용을 담고 있는 GLTF 파일을 무수히 만들 수는 없는 일이었다. 2. Clone으로 문제 해결 react-three-fiber에서 Clone 컴포넌트를 제공하고 있었다. 이 기능을 이용하여 [그림 2]와 같이 하나의 GLTF를 통해 2개 이상의 모델을 화면에 렌더링 할 수 있었다. 해당 코드는 아래와 같다. ..
- [React.js] React Three Fiber(R3F) 애니메이션 재생2023-12-12 10:56:121. useEffect 훅에서 play() 메서드 작동 안 됨 3D 모델의 애니메이션을 재생하고자 하였다. 아래의 코드를 적용해 봤는데 애니메이션이 플레이되지 않았다. import React, { useState, useEffect } from "react"; import { GLTFLoader } from "three/addons/loaders/GLTFLoader"; import { useLoader } from "@react-three/fiber"; const Model = ({ characterPath, scale }) => { const gltf = useLoader(GLTFLoader, characterPath); const mixer = new THREE.AnimationMixer(gltf.s..
- [Next.js] html2canvas 이미지 잘림 문제2023-12-08 15:26:001. html2canvas 이미지 잘림 문제 html을 이미지 파일로 저장하는 기능을 구현하기 위해 html2canvas 라이브러리를 이용했다. 편리하게 기능을 구현했고 작동했지만 html요소가 화면에 보이는 대로 캡처되지 않았다. 심지어 QR 코드 일부분은 [그림 1]과 같이 잘린 채로 저장되었다. 2. html-to-image 라이브러리로 교체 후 해결 html2canvas로 여러 시도를 해보았지만 효과를 보지 못했다. 그래서 html-to-image로 교체하였고 다행히도 깔끔하게 문제가 해결되었다. html-to-image의 경우 공식 문서의 코드를 그대로 가져와 사용했고 별다른 설정을 하지 않았음에도 화면에 보이는 대로 캡처되었다(그림 2 참조). 😉 html-to-image 공식문서 : http..
- [React.js] qr-scanner를 리액트에 적용하기!2023-10-05 17:29:301. react-qr-reader에서 qr-scanner로 갈아탄 이유! react-qr-reader 라이브러리를 이용해서 이미 프로젝트를 진행했었는데 Adobe Express에서 생성한 QR을 읽지 못하는 것이 아닌가?! 이 외에도 사용감이 좋지 못했기에 다른 라이브러리를 찾아보았다. 그렇게 해서 발견한 라이브러리가 qr-scanner이다. react-qr-reader 처럼 리액트를 위해 만들어진 라이브러리는 아니었지만 공식 문서와 데모를 살펴본 후 더 고민할 필요가 없었다. 2. qr-scanner를 리액트에 적용하기! 2.1. qr-scanner를 설치 npm install --save qr-scanner 2.2. qr-scanner 리액트 컴포넌트에 적용 장치의 카메라를 통해 QR을 스캔하고 스캔..
- [React.js] 모바일에서도 작동하는 텍스트 클립보드 복사2023-09-15 15:49:221. navigator.clipboard.writeText()를 이용한 텍스트 클립보드 복사 문제 navigator.clipboard.writeText()를 이용해 텍스트를 클립보드에 복사하는 기능을 적용하였는데, 웹에서는 정상적으로 동작했지만 모바일에서는 작동하지 않았다. // 모바일에서 작동하지 않았음 handleCopyClipBoard: async (text, then) => { try { await navigator.clipboard.writeText(text); // alert('클립보드에 링크가 복사되었습니다.'); then(true); } catch (e) { then(false); // alert('복사에 실패하였습니다'); } }, 2. 모바일에서도 작동하는 react-copy-to-cl..
- [React.js] 네이버 지도 API Overay의 컬러 데이터 변경시 즉시 반영되지 않는 문제??2023-05-11 14:05:18네이버 지도 API를 이용 중이며 Overay를 이용해 정보를 시각화하고 있다. 컬러 데이터가 변경되면 Overay에도 변경된 값이 적용되어 표시되도록 하려고 했다. [그림 1]은 정상적으로 표현된 경우이다. 30 이상은 오렌지, 60 이상은 레드로 표시되었기 때문이다. 하지만 이렇게 렌더링 하는데 꽤 많은 고민과 시행착오가 있었다. 숫자는 DOM으로 그렸기 때문에 데이터에 따라 즉시 변경되었음에 반해 Overay는 다음 변경 시점에 값이 적용되어 1박자 느리게 적용되는 문제가 있었다. 데이터가 변경되면 기존 Overay는 초기화되고 새롭게 지도에 렌더링 해야 하는데 그와 같이 작동하지 않아서 발생하는 문제였다. 그래서 아래의 코드와 같이 Overay를 null로 초기화하는 방식을 적용하였다. {rese..
- [React.js] textarea에 글이 써지지 않는 문제 해결2023-03-03 16:52:33회사에서 React.js 프로젝트에 투입될 예정이라 인프런 강의로 학습하던 중 [그림 1]과 같이 textarea에 글이 써지지 않는 문제가 발생했다. 콘솔창에는 아래와 같은 에러 메시지가 표시되었다. input 태그의 value 속성이 아닌 defaultValue 속성으로 변하는 값을 받아 해결할 수 있었다. Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. 참고한 ..
728x90
반응형