728x90 반응형 SPA/React98 [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. [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. [React] 타입 스크립트(TypeScript) 환경에서 절대 경로 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트(TypeScript) 환경에서 절대 경로 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 절대 경로 사용 이유 절대 경로를 사용하는 이유는 프로젝트의 규모가 커질수록 복잡해지는 경로지정을 더 편리하게 관리하기 위해서입니다. 예를 들어 다음과 같은 경로가 있다고 가정하겠습니다. folder A ㄴ folder B ㄴ folder C ㄴ folder D ㄴ folder E ㄴ file 1 folder F ㄴ file 2 이런 파일 구조에서 만약 file 1에서 file 2를 로드하여 사용할 때 상대 경로를 이용하면 "../../../../../folder F/file 2"와 같이 경로 설정을 할겁니다. 하지만 절대 경로를 사용하게 되면 "/fo.. 2022. 3. 27. [React] 타입 스크립트(TypeScript) 환경에서 Jest를 이용하여 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트(TypeScript) 환경에서 Jest를 이용하여 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 테스트 (1) - JS 작성하여 테스트 가장 먼저 테스트 파일에 JS를 작성하여 테스트를 진행해보겠습니다. [ 1. 패키지 설치 ] $ npm install -D jest @types/jest [ 2. package.json에 jest 추가 ] { "scripts": { "test": "jest", }, } [ 3. 테스트 파일 생성 ] /src/test 경로를 생성한 뒤 테스트를 위한 js.test.ts 파일을 다음과 같이 생성하겠습니다. 그리고 테스트 코드를 다음과 같이 작성하겠습니다. describe('js test', () => { i.. 2022. 3. 24. [React] 타입 스크립트 환경에서 ESLint / Prettier 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 환경에서 ESLint / Prettier 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 설정하는 방법 React를 이용해 개발할 때 코드 점검과 포맷팅을 위해 ESLint와 Prettier를 사용합니다. 또한 이 두 개를 연동하여 코드를 점검함과 동시에 올바른 코드 상태가 아닐 경우 자동으로 포맷팅을 해줄 수 있습니다. 이번 글에서는 ESLint와 Prettier를 함께 사용할 수 있도록 환경 설정을 해보도록 하겠습니다. [ 1. Extension 설치 ] 대부분 VSCode를 이용해 개발하실 것으로 생각됩니다. VSCode에서 ESLint와 Prettier를 사용하기 위해서는 Extension 설치를 해줘야 합니다. 다음과 같이 2개의 .. 2022. 3. 21. [React] useInfiniteQuery를 이용하여 Infinite Scroll (무한 스크롤) 구현 안녕하세요. J4J입니다. 이번 포스팅은 useInfiniteQuery를 이용하여 Infinite Scroll 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 useInfiniteQuery에 대한 개념을 모르시는 분들은 [React] React Query의 useInfiniteQuery에 대해 알아보기를 참고해주세요. Infinite Scroll 구현 방법 [React] 무한 스크롤(Infinite Scroll) 사용하기를 확인해보시면 Infinite Scroll에 대한 개념과 react query를 이용하지 않고 Infinite Scroll을 구현한 것을 확인할 수 있습니다. IntersectionObsever와 hook을 이용하여 구현을 했었는데 이번에는 useInfinite.. 2022. 3. 14. [React] React Query의 useInfiniteQuery에 대해 알아보기 안녕하세요. J4J입니다. 이번 포스팅은 React Query의 useInfiniteQuery에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 react query의 기능 업데이트가 주기적으로 이루어졌고 최근 v5로 넘어오면서 여러 가지 변경점들이 발생되었습니다. 최근 변경점에 대해서도 확인하고 싶으신 분들은 아래 글들을 참고 부탁드립니다. [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 [React] react-query v5 변경점 알아보기 (4) - useInfiniteQuery 기능 변경 useInfiniteQuery란? useInfiniteQuery는 파라.. 2022. 3. 13. 이전 1 2 3 4 5 6 다음 728x90 반응형
