728x90 반응형 SPA147 [React] react-hook-form에서 Cannot read properties of undefined (reading '_f') 발생되는 경우 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form Cannot read properties of undefined (reading '_f') 에러에 대해 적어보는 시간을 가져보려고 합니다. 발생되는 경우 먼저 다음의 간단한 코드를 봐보도록 하겠습니다. import React, { useEffect } from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; interface UseForm { firstPhone: string; secondPhone: string; thirdPhone: strin.. 2023. 2. 1. [React] 브라우저에서 암호화를 사용할 경우 발생하는 문제점 안녕하세요. J4J입니다. 이번 포스팅은 브라우저에서 암호화를 사용할 경우 발생하는 문제점에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... 아래 글에서 사용될 암호화는 대표적으로 많이 사용되는 aes를 사용하려고 합니다. aes 암호화와 복호화를 위한 코드는 아래와 같고 자세한 설정 사항은 [React] AES256 암호화 (with. Java)를 참고해주시길 바랍니다. import cryptoJs from 'crypto-js'; const secretKey = '12345678901234567890123456789012'; // 32자리 비밀키 const iv = 'abcdefghijklmnop'; // 16자리 iv // 암호화 export const encrypt = (text: s.. 2022. 10. 17. [React] webpack을 이용하여 sourceMap 제거하기 안녕하세요. J4J입니다. 이번 포스팅은 webpack을 이용하여 sourceMap 제거하는 방법에 대해 적어보는 시간을 가져보려고 합니다. sourceMap이란? sourceMap을 제거하기에 앞서 sourceMap이 무엇이기에 제거해야 되는지에 대해 먼저 알아보겠습니다. sourceMap은 빌드된 파일과 실제 개발할 때 사용된 파일을 연결 시켜주기 위해 사용됩니다. 일반적으로 배포를 하기위해 빌드를 하면 최적화 작업을 위해 사용되고 있는 HTML, CSS, JS 등이 난독화가 이루어지며 압축이 이루어집니다. 그렇기 때문에 에러가 발생되었을 때 빌드가 이루어진 파일로 확인하기가 쉽지 않은데, 이를 쉽게 확인하기 위해 원본 파일과 매칭 하여 에러난 부분이 어딘지를 확인할 수 있도록 도와주는 것이 sour.. 2022. 10. 12. [React] 뒤로 가기 막기 안녕하세요. J4J입니다. 이번 포스팅은 뒤로 가기 막는 방법에 대해 적어보는 시간을 가져보려고 합니다. 뒤로 가기 막는 방법 리액트를 이용해 여러 UI/UX를 제공하다 보면 상황에 따라 뒤로 가기를 눌렀을 때 기존에 우리가 알던 방식처럼 이전 URL로 넘어가는 것이 아니라 특정 액션이 취해지는 결과를 만드실 필요가 있을 수도 있습니다. 흔히 사용되는 케이스는 아닐 것으로 생각되지만, 혹시나 필요하신 분들을 위해 제가 알고 있는 방법에 대해 간단히 적어보도록 하겠습니다. 먼저 다음과 같은 코드를 보겠습니다. import React, { useEffect, useState } from 'react'; const App = () => { const [toggle, setToggle] = useState(fa.. 2022. 10. 10. [React] react-router 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 react-router 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 환경 설정 [ 1. 패키지 설치 ] $ npm install react-router react-router-dom $ npm install -D @types/react-router @types/react-router-dom (typescript 사용하는 분만 설치) [ 2. BrowserRouter로 App 감싸기 ] import * as React from 'react'; import ReactDom from 'react-dom'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDom.r.. 2022. 8. 22. [React] Import에도 ESLint 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 Import에도 ESLint 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 해당 글은 ESLint 기본 설정 방법에 대한 설명은 따로 없습니다. ESLint 설정이 되어 있지 않으신 분들은 [React] 타입 스크립트 환경에서 ESLint / Prettier 설정하기를 참고해서 기본 설정을 해주시면 됩니다. 설정 방법 [ 1. 패키지 설치 ] $ npm install -D eslint-plugin-import [ 2. eslint 설정 파일 수정 (.eslintrc) ] { "plugins": [ "import" ], "rules": { "import/order": [ "error", {} ] } } 위와 같이만 설정해도 default .. 2022. 8. 20. [React] react-hook-form register 등록 방법 커스텀하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form register 등록 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. register를 props로 넘기기 첫 번째 방법은 register를 props로 넘기는 방법입니다. 개발을 하다 보면 디자인을 입히기 위해 input, select 등의 다양한 스타일 컴포넌트를 생성하게 됩니다. 그러다 보면 유효성 검증을 위해 register를 등록할 때 기존에 마크업 요소들에 적용하던 방식인 다음과 같은 방식을 사용할 수 없게 됩니다. const App = () => { return ( ); }; export default App; 이런 경우에 해결할 수 있는 방법 중 하나가 등록할 register값을 props로 넘겨주는 겁니다. .. 2022. 8. 16. [React] 사용해본 yup 조건절 정리 안녕하세요. J4J입니다. 이번 포스팅은 제가 사용해본 yup 조건절들을 정리해보는 시간을 가져보려고 합니다. 들어가기에 앞서 yup과 함께 react-hook-form을 이용하여 코드가 작성되어 있다는 점 참고 부탁드립니다. Base - 1 먼저 가장 기본이 되는 조건절입니다. 간단한 예시로 다음과 같은 코드를 작성할 수 있습니다. import * as React from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; interface Iform { displayYn: string; displayContent:.. 2022. 8. 11. [React] react-hook-form과 yup으로 동적 배열 유효성 검증하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form과 yup을 이용하여 동적 배열 유효성 검증하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 기본적인 방법 긴말 없이 바로 코드부터 보도록 하겠습니다. 동적 배열 유효성 검증 테스트를 위해 다음과 같이 코드를 작성할 수 있었습니다. import * as React from 'react'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; // obj interface interface Iobj { name: string; age: number; } // form.. 2022. 8. 9. [React] 아토믹 디자인(Atomic Design) 을 이용한 컴포넌트 개발 안녕하세요. J4J입니다. 이번 포스팅은 Atomic Design에 대해 적어보는 시간을 가져보려고 합니다. Atomic Design이란? Atomic Design은 최근 React를 이용하여 컴포넌트 개발할 때 떠오르고 있는 디자인 기법 중 하나로 효율적인 인터페이스 디자인 시스템을 만들어내기 위해 사용됩니다. Atomic Design은 다음과 같이 크게 5가지로 구성됩니다. Atom (원자) Molecule (분자) Organism (유기체) Template (템플릿) Page (페이지) Atom Atom은 디자인 할 수 있는 요소 중 가장 작은 구성단위를 의미합니다. 대표적으로 기본 마크업 구성 요소들인 input, button 등이 여기에 해당되고 마크업 요소들뿐만 아니라 color, font s.. 2022. 7. 13. [React] AES256 암호화 (with. Java) 안녕하세요. J4J입니다. 이번 포스팅은 AES256 암호화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. React에서 암호화 방법 [ 1. 패키지 설치 ] $ npm install crypto-js $ npm install -D @types/crypto-js // 타입 스크립트 사용 시 추가 설치 [ 2. 암복호화 코드 작성 ] import cryptoJs from 'crypto-js'; const secretKey = '12345678901234567890123456789012' // 32자리 비밀키 const iv = 'abcdefghijklmnop' // 16자리 iv // 암호화 export const encrypt = (text: string) => { const cipher = cry.. 2022. 7. 4. [Next] 하위 경로 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 하위 경로 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 하위 경로 사용 방법 React에서 하위 경로를 사용할 땐 Router에 /board/:no와 같이 등록하여 사용하곤 합니다. 만약 Next에서도 위와 같은 경로를 사용하고 싶다면 파일 구조를 활용해야 되고 다음과 같은 파일 구조를 구성하면 위와 같은 경로를 사용하는 것과 동일한 결과를 만들어냅니다. 또한 위의 예시에서 필요한 사항은 no로 넘어온 값을 확인할 수 있어야 합니다. no 값을 확인하기 위해서는 [no].tsx 파일 안에서 useRouter를 이용하여 다음과 같이 query값을 조회해보면 됩니다. import { useRouter } from 'next/router'; import *.. 2022. 6. 27. [React] Nivo 차트 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Nivo 차트 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Nivo 차트란? Nivo 차트는 리액트를 이용하여 개발할 때 사용할 수 있는 차트 라이브러리 중 하나입니다. 대표적으로 많이 사용되는 Bar, Pie 차트 등을 기본으로 제공하며 그 외에도 Line과 Github 잔디밭을 만들 수 있게 도와주는 Calendar 차트까지도 제공을 해줍니다. Nivo 차트 선택 이유 최근 회사에서 프로젝트를 하면서 차트를 사용해야 된다는 얘기를 전달받았습니다. 지금까지 리액트를 사용하면서 차트를 사용해본적이 없기 때문에 리액트에서 많이 사용된다는 여러 가지 차트들을 확인했고 결국 저의 선택은 Nivo 차트였습니다. Nivo 차트를 선택한 첫 번째 이유는 리액트스.. 2022. 6. 4. [React] 카카오 주소 검색 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 카카오 주소 검색 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 주소 검색 사용 방법 [ 1. 패키지 설치 ] $ npm install react-daum-postcode [ 2. 주소 컴포넌트 작성 ] import * as React from 'react'; import DaumPostcode from 'react-daum-postcode'; const App = (): JSX.Element => { /** * useState */ const [openPostcode, setOpenPostcode] = React.useState(false); /** * handler */ const handle = { // 버튼 클릭 이벤트 clickButton: (.. 2022. 5. 28. [React] Dayjs로 간편하게 날짜 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 Dayjs로 날짜 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Dayjs란? Dayjs는 날짜 처리를 간편하게 할 수 있도록 도와주는 라이브러리입니다. 일반적인 포매팅부터 시작하여 날짜를 어느 기준만큼 더하고 빼는 등의 산술 연산과 같은 날짜와 관련된 다양한 기능을 제공해줍니다. Dayjs와 유사하게 사용되는 대표적인 날짜 라이브러리로 Momentjs가 있습니다. Dayjs와 Momentjs 둘다 많은 개발자분들이 필요로 하는 여러 기능들을 대부분 제공해줍니다. 하지만 이 둘의 차이점은 라이브러리 크기에서 명확히 보여집니다. Dayjs는 Momentjs와 비교했을 때 많은 경량화를 보인다고 합니다. 실제로 Dayjs와 Momentjs를 각각 설치해봤을.. 2022. 5. 16. [React] Storybook으로 컴포넌트 문서화하기 안녕하세요. J4J입니다. 이번 포스팅은 Storybook으로 컴포넌트 문서화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Storybook이란? Storybook은 제목에서 보이듯이 개발할 때 사용되는 여러 컴포넌트들을 문서화할 수 있는 오픈 소스 도구입니다. 여러 협업되는 과정에서 사용될 수 있는 공통 컴포넌트들부터 시작하여 페이지들도 독립적으로 구축할 수 있기 때문에 개발자들이 개발된 컴포넌트 코드들을 사용하고자 할 때 Storybook을 참고하여 더 편리하게 사용할 수 있게 도와줍니다. 또한 일반 문서들처럼 단순히 Storybook에 등록할 때 설정한 값에 맞게만 보이는 것이 아니고 radio, text 등을 이용해 각 컴포넌트에서 전달받을 수 있는 props도 실시간으로 변경도 할 수 있.. 2022. 5. 14. [React] react-hook-form과 React.forwardRef() 에러 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form과 React.forwardRef() 에러에 대해 적어보는 시간을 가져보려고 합니다. React.forewardRef() 에러 react-hook-form을 이용하여 개발하면서 공통 컴포넌트에 validation을 적용시키려는 분들이 많으실 겁니다. 하지만 register를 이용하여 validation을 적용할 경우 디버깅 단계에서는 문제가 발생되지 않지만 런타임 단계에서 다음과 같은 에러를 확인하며 react-hook-form이 정상 동작되지 않으셨을 겁니다. 해당 에러가 발생되는 이유는 ref를 props로 전달하려고 하기 때문에 발생됩니다. 일반적으로 register를 사용할 경우 다음과 같이 사용을 하실 겁니다. 하지만 공식 문서.. 2022. 5. 7. [React] react-hook-form을 이용하여 validation (유효성) 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form을 이용하여 validation 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. react-hook-form 이란? react-hook-form은 react를 이용하여 개발할 때 유효성을 체크할 수 있게 도와주는 모듈입니다. react에서는 유효성을 체크해주는 모듈로써 사용되는 게 react-hook-form과 formilk 라는 것이 대표적으로 있는 것으로 보입니다. formilk를 사용해본적이 없기 때문에 차이점에 대해서 언급하기는 힘들지만 공식 문서를 참고했을 때 react-hook-form의 이점들은 다음과 같은 것이 있는 것으로 확인됩니다. 적은 코드로 더 좋은 퍼포먼스를 보여줌 효율적인 re-rendering을 제공 .. 2022. 5. 2. 이전 1 2 3 4 5 6 7 ··· 9 다음 728x90 반응형
