728x90 반응형 SPA148 [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. [Next] 환경 변수(.env) 타입을 설정하여 자동 완성 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 환경 변수(.env) 타입을 설정하여 자동 완성 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 해당 방법은 TypeScript를 사용할 때만 적용이 가능하기에 참고 부탁드립니다. 자동 완성 설정 방법 [Next] 환경 변수(.env) 사용하기를 참고하시면 Next에서 환경 변수 사용 방법을 확인할 수 있습니다. 그리고 .env나 next.config.js에 설정한 변수를 사용하기 위해 코드를 작성하고자 하면 자동 완성이 되지 않기에 자연스럽게 입력한 변수 값의 이름을 Copy & Paste를 하는 자기 자신을 확인할 수 있습니다. 이런 불편함을 제거하기 위해 환경 변수를 위한 타입을 설정하여 자동 완성할 수 있도록 해보겠습니다. [ 1... 2022. 4. 16. [Next] Production에서 Console 출력 제거하기 안녕하세요. J4J입니다. 이번 포스팅은 production에서 console 출력 제거하는 방법에 대해 적어보는 시간을 가져보려고 합니다. console 출력 제거 방법 [ 1. 패키지 설치 ] $ npm install babel-plugin-transform-remove-console [ 2. babel 설정 ] root경로에 .babelrc 파일을 생성한 뒤 다음 내용을 입력해주면 됩니다. { "presets": ["next/babel"], "env": { "production": { "plugins": ["transform-remove-console"] // console 출력 제거 } } } 테스트 테스트를 위해 index.tsx 파일을 다음과 같이 간단하게 작성해봤습니다. import * as.. 2022. 4. 10. [Next] AG Grid 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 AG Grid 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 AG Grid에서 제공해주는 여러 기능들 중 기본적인 기능들만 다뤄보려고 합니다. 추가적인 상세 내용이 필요하신 분들은 공식 문서를 참고하시면 좋을 것 같습니다. 기본 설정 [ 1. 패키지 설치 ] $ npm install ag-grid-react ag-grid-community [ 2. 기본 코드 작성 ] 기본적인 구조를 가지는 코드를 base.tsx 파일을 생성하여 작성해보겠습니다. import * as React from 'react'; import { NextPage } from 'next'; import 'ag-grid-community/dist/styles/ag-gr.. 2022. 4. 3. [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. [Next] 정적 이미지 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 정적 이미지 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 정적 이미지 사용하는 방법 [ 1. public 폴더 생성 ] root 경로에 다음과 같이 public 폴더를 생성해줍니다. [ 2. images 폴더 생성 ] 만들어진 public 폴더 하위 경로에 다음과 같이 images 폴더를 생성해줍니다. 여기서 만들어지는 images 폴더는 파일 이름을 달리 네이밍해도 무방합니다. 그리고 만들어진 폴더 내부에 이미지를 넣어놨습니다. [ 3. 이미지 사용 파일 ] img태그의 src에서는 public 폴더 내부에 있는 경로를 /를 통해 접근할 수 있습니다. 그러므로 위와 같이 폴더를 생성해뒀다면 img태그의 src에 "/images/friends.png".. 2022. 3. 20. [Next] 환경 변수(.env) 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 환경 변수 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. .env 파일 활용 Next에서 환경 변수를 사용하는 방법은 첫 번째로 .env 파일이 있습니다. React를 이용해서도 주로 사용하는 방식이 .env 파일이 있는데 Next도 동일한 방법으로 환경 변수를 사용해줄 수 있습니다. 사용 방법은 다음과 같습니다. [ 1. .env 파일 생성 ] root경로에 .env 파일을 다음과 같이 생성해줍니다. [ 2. 변수 작성 ] 그리고 .env 파일에 변수를 사용할 때는 변수 앞에 "NEXT_PUBLIC_"을 입력해줘야 합니다. 변수 앞에 해당 문자열이 포함되지 않을 경우 Next에서는 환경 변수 값인지를 인지하지 못하기 때문에 정상적으로 사용되지 않습니다.. 2022. 3. 19. [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. [React] React Query의 useQueries에 대해 알아보기 안녕하세요. J4J입니다. 이번 포스팅은 React Query의 useQueries에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 react query의 기능 업데이트가 주기적으로 이루어졌고 최근 v5로 넘어오면서 여러 가지 변경점들이 발생되었습니다. 최근 변경점에 대해서도 확인하고 싶으신 분들은 아래 글들을 참고 부탁드립니다. [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 [React] react-query v5 변경점 알아보기 (3) - useQueries 기능 변경 useQueries란? useQueries는 React Query에서 useQuery의 동적.. 2022. 3. 11. [React] React Query의 useMutation에 대해 알아보기 안녕하세요. J4J입니다. 이번 포스팅은 React Query의 useMutation에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 react query의 기능 업데이트가 주기적으로 이루어졌고 최근 v5로 넘어오면서 여러 가지 변경점들이 발생되었습니다. 최근 변경점에 대해서도 확인하고 싶으신 분들은 아래 글들을 참고 부탁드립니다. [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (5) - useMutation 기능 변경 useMutation란? useMutation은 React Query를 이용해 서버에 데이터 변경 작업을 요청할 때 사용합니다. ※ 데이터 조회를 할 때는 useQuery를 사용합니다.. 2022. 3. 9. [React] React Query의 useQuery에 대해 알아보기 안녕하세요. J4J입니다. 이번 포스팅은 React Query의 useQuery에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 react query의 기능 업데이트가 주기적으로 이루어졌고 최근 v5로 넘어오면서 여러 가지 변경점들이 발생되었습니다. 최근 변경점에 대해서도 확인하고 싶으신 분들은 아래 글들을 참고 부탁드립니다. [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 useQuery란? useQuery는 React Query를 이용해 서버로부터 데이터를 조회해올 때 사용합니다. ※ 데이터 조회가 아닌 데이터 변경 작업을 할 때는 useMutation을 사용합.. 2022. 3. 8. [React] React Query에 대한 소개와 사용 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 React Query에 대한 소개와 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. React Query란? React Query는 서버 상태 (server state)를 가져오며 동시에 캐싱 처리, 동기화 처리, 업데이트 처리를 할 수 있도록 도와주는 라이브러리입니다. 조금 더 쉽게 표현하자면 서버에 API 요청, 즉 비동기 요청을 할 때 보다 편리한 작업들을 추가 제공해준다고도 말씀드릴 수 있습니다. React를 이용해 개발하다 보면 서버 상태를 관리하기 위한 여러 가지 작업들을 수행하게 됩니다. 개인적으로 가장 많이 처리했던 반복 작업은 서버에 API 요청을 보낼 때 API 요청이 처리되고 있는지에 대한 확인을 하는 로딩 중 처리가 있습니.. 2022. 3. 7. [React] React Router v5와 v6 비교하기 안녕하세요. J4J입니다. 이번 포스팅은 React Router v5와 v6 비교하는 시간을 가져보려고 합니다. 들어가기에 앞서 주로 사용된다고 생각하는 부분들만 비교 정리를 했기 때문에 추가적으로 더 많은 것을 알고 싶으신 분들은 reactrouter 공식 문서를 참고해주시길 바랍니다. BrowserRouter 등록 [ v5 ] import * as React from 'react'; import ReactDom from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; ReactDom.render( , document.querySelector('#root') ); [ v6 ] import * a.. 2022. 3. 6. [React] Webpack Production모드에서 Console 출력 방지 안녕하세요. J4J입니다. 이번 포스팅은 Webpack Production모드에서 Console 출력 방지하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Console 출력 방지 설정 방법 [ 1. 패키지 설치 ] $ npm install -d terser-webpack-plugin [ 2. webpack 설정 파일 수정 ] 저는 webpack 설정을 위해 webpack.config.js 파일을 사용합니다. 해당 파일에 출력 방지를 설정하기 위해 다음과 같이 추가하겠습니다. const TerserPlugin = require('terser-webpack-plugin'); module.exports = (env) => { const mode = env.mode || 'development'; retu.. 2022. 3. 4. [Next] 구글 로그인 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 구글 로그인 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다른 로그인도 구현해보고 싶은 분들은 다음 글들을 참고하시면 좋을 것 같습니다. [Next] 카카오 로그인 구현하기 [Next] 네이버 로그인 구현하기 구글 로그인 설정 [ 1. 구글 클라우드 플랫폼 사이트 로그인 ] Google Cloud Platform에 접속하여 로그인해주시면 됩니다. [ 2. 프로젝트 생성하기 ] 사이트에 접속을 했다면 상단 바에 프로젝트 선택이라는 메뉴가 존재합니다. "프로젝트 선택 → 새 프로젝트" 순서대로 클릭을 하면 다음과 같이 프로젝트 정보들을 입력하여 만들어줄 수 있습니다. [ 3. 애플리케이션 등록 ] 프로젝트를 생성 완료했으면 좌측 메뉴바에서.. 2022. 3. 2. 이전 1 2 3 4 5 6 7 8 9 다음 728x90 반응형
