Language/React
-
Swiper - Cannot read properties of undefined (reading 'autoplay')Language/React 2024. 11. 7. 11:47
React에서 Swiper를 추가하고 autoplay를 시키고 해당 화면에서 나오게 되면 아래와 같은 에러가 발생한다.Unhandled Runtime ErrorTypeError: Cannot read properties of undefined (reading 'autoplay') 원인GPT 형님께서 말씀하시길 `TypeError: Cannot read properties of undefined (reading 'stop') 오류가 발생하는 경우는 대개 stop 메서드를 호출하려는 객체가 정의되지 않았거나 아직 초기화되지 않았기 때문입니다. 이 오류는 swiperInstance.autoplay.stop() 호출에서 자주 발생할 수 있는데, autoplay 객체가 아직 인스턴스에 초기화되지 않았거나, 다른..
-
Promise 동시에 여러번 호출Language/React 2024. 10. 15. 13:02
Promise 여러개 한번에 호출해서 받으려고 할때 헷갈려서 정리해두자.소스const promise1 = request.get('/v1/api1', param);const promise2 = request.get('/v1/api2');const responses = await Promise.all([promise1, promise2]);{ const response = responses[0]; for (let key in response.items) { ... }}{ const response = responses[1]; for (let code of response.items) { ... }}
-
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:..
-
Toast 만들기Language/React 2024. 7. 9. 11:07
iOS에서 포그라운드 푸시메시지를 수신하는 화면을 React로 보여주는 기능을 넣어야 한다.작업방향은 Toast 형식으로 먼저 만들고 푸시수신되는 애니메이션 효과를 주면 어떨까 해서 만드는 도중에 토스트 메시지는 어느정도 완성 되었는데 푸시 수신 애니메이션을 넣으려고 하니 토스트 형태 소스에서 많이 달라질듯 하여토스트까지만 작업한 부분을 정리해 두려고 한다.테스트용 소스가 많이 들어가 있으니 지저분 하지만 여기까이 정리하자! 작업 소스_app.jsximport NFToastProvider from '../components/common/NFToastProvider';function App({ Component, pageProps }) { return ( ... ..
-
nextJS 사용하는 iOS 단말기에서 뒤로가기 페이지 흰색 이슈Language/React 2024. 6. 20. 11:01
ios swift로 만든 wkWebView에서 페이지 크기가 큰 a페이지에서 스크롤을 내린상태에서 b페이지로 이동 하고 다시 a페이지로 가기 위해서 뒤로가기를 누르게 되면 a페이지 화면이 하얀색으로 나오게된다. 이상태에서 스크롤을 내리거나 클릭하면 페이지가 정상적으로 나오는 문제가 발생하였다. 문제### 전제조건 : a.page가 b.page보다 컨텐츠 내용이 많아서 스크롤이 길다### 1. a.page### 1.1. a.page에서 b페이지 크기의 스크롤 위치보다 더아래 위치로 스크롤을 내린다.### 1.2. b.page를 아래 코드로 이동 ... const push = useCallback(async (path, as, options) => { return await router.pu..
-
nextjs에서 svg 컴포넌트로 사용하는 방법Language/React 2024. 4. 4. 09:34
컴포넌트 형태로 svg를 사용하려면? 설치$ yarn add url-loader$ yarn add @svgr/webpack custom.d.tsdeclare module '*.mdx';declare module '*.svg' { const ReactComponent: React.FC>; const content: string; export { ReactComponent }; export default content;} next.config.js/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: false, eslint: { // Warning: This allows production builds to..
-
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..