728x90 반응형 SPA/React98 [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. [React] StyledComponents와 Emotion을 비교해보기 (2) - css 안녕하세요. J4J입니다. 이번 포스팅은 StyledComponents와 Emotion을 비교해보는 시간에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 styled를 이용한 비교를 원하시는 분들은 다음 링크를 참고해주시길 바랍니다. [React] StyledComponents와 Emotion을 비교해보기 (1) - styled 이번에는 Emotion을 사용할 때 styled가 아닌 css를 사용하여 구현하는 테스트 코드를 작성해보며 StyledComponents와 비교해보는 시간을 가져보겠습니다. StyledComponents 개발 환경 세팅 [ 1. 패키지 설치 ] $ npm install styled-components styled-reset $ npm install -D @types/s.. 2022. 2. 26. [React] StyledComponents와 Emotion을 비교해보기 (1) - styled 안녕하세요. J4J입니다. 이번 포스팅은 StyledComponents와 Emotion을 비교해보는 시간을 가져보려고 합니다. 들어가기에 앞서 css를 이용한 비교를 원하시는 분들은 다음 글을 참고해주시길 바랍니다. [React] StyledComponents와 Emotion을 비교해보기 (2) - css 최근 스타일을 꾸미기 위해 CSS-in-JS를 많이 사용하고는 합니다. 그중 가장 대표적으로 자리매김을 하고 있던 것이 StyledComponents입니다. 또한 최근에 새롭게 등장하여 점점 사용성이 높아지고 있는 Emotion이 존재합니다. 이들 모두를 한번에 사용하는 것은 혼란만 높이기 때문에 하나를 선택하는 것이 좋다고 생각하고 그렇기 때문에 동일한 상황을 만들어보며 두 기술을 비교해보겠습니다. .. 2022. 2. 21. [React] CRA 사용하지 않고 타입 스크립트 개발환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 CRA 사용하지 않고 타입 스크립트 개발환경 세팅하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 세팅 방법 [ 1. 작업할 폴더 생성 및 이동 ] VSCode 터미널을 이용하여 다음 명령어를 통해 작업 폴더를 생성해주시면 됩니다. $ mkdir { 폴더 명 } // ex) mkdir init_typescript $ cd { 폴더 명 } // ex) cd init_typescript [ 2. package.json 생성 ] $ npm init 명령어를 입력하면 부가 정보들을 추가적으로 작성해줘야 합니다. 필요한 내용들에 대해 입력해주시면 되고 괄호가 있는 곳은 아무것도 입력하지 않을 경우 괄호 안의 내용이 default로 입력이 됩니다. package.. 2022. 2. 16. [React] CRA 사용하지 않고 개발환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 CRA 사용하지 않고 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 세팅 방법 [ 1. 작업할 폴더 생성 및 이동 ] 보통 React를 이용해 개발할 때는 대부분의 사용자들이 VSCode를 IDE로 선택합니다. VSCode를 사용하시는 분들은 터미널을 이용하여 다음과 같이 간단하게 폴더 생성 및 이동을 해주시면 됩니다. $ mkdir { 폴더 명 } // ex) mkdir init $ cd { 폴더 명 } // ex) cd init [ 2. package.json 생성 ] $ npm init 명령어를 입력할 경우 다음과 같이 추가 정보를 입력해야 되는데 필요한 부분만 입력해주시면 되고 또한 괄호가 있는 곳은 입력을 하지 않을 경우 괄호.. 2022. 2. 15. [React] Polyfill을 이용하여 IE에서도 동작되게 하기 안녕하세요. J4J입니다. 이번 포스팅은 Polyfill을 이용하여 IE에서 동작되지 않는 서비스를 동작되도록 하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Polyfill이란? Polyfill은 IE와 같은 구형 브라우저에서 동작되지 않는 최신 기능을 동작할 수 있도록 도와주는 기술입니다. Babel에 대해 아시는 분이 계시다면 Babel이 있는데 Polyfill을 왜 사용하지? 라는 생각이 드실겁니다. Babel은 트랜스파일러로써 최신 ES버전에서 나온 여러 기능들을 구형 브라우저가 읽을 수 있는 문법으로 변경시켜주는 역할을 담당합니다. 하지만 여기서 문제는 이전에 없던 기능들이 새로나온 경우입니다. 대표적인 케이스가 ES6에서 등장한 Promise, Map, Set 등이 있습니다. 해당 기술.. 2022. 1. 4. [React] Vendor Prefix (공급업체 접두사) 설정 안녕하세요. J4J입니다. 이번 포스팅은 공급업체 접두사 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vendor Prefix (공급업체 접두사) 설정 방법 들어가기에 앞서 webpack과 관련된 패키지들은 최신 버전으로 설치해야 정상적으로 동작됩니다. 제가 설정하는 환경은 webpack 관련 패키지들이 다음과 같기 때문에 참고하시길 바랍니다. { "devDependencies": { "html-webpack-plugin": "^5.5.0", "webpack": "^5.65.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.7.2" } } [ 1. 패키지 설치 ] $ npm install -D postcss autoprefixer postcss.. 2022. 1. 2. [React] Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내기 안녕하세요. J4J입니다. 이번 포스팅은 Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내는 방법에 대해 적어보는 시간을 가져보려고 합니다. useLazyQuery 사용 예시 관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다. 링크를 확인해보면 다음과 같이 person query를 사용하는 getPerson이라는 함수를 확인할 수 있습니다. const getPerson = (id: number) => { const { loading, error, data } = useQuery(GET_PERSON, { variables: { id, } }) if(loading) return Loading... if(error) return (Error...) retu.. 2021. 12. 28. [React] GraphQL에서 Fragment 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 GraphQL에서 Fragment 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Fragment란? Fragment는 여러 query에서 사용되는 필드들을 재사용할 수 있도록 도와줍니다. query를 작성하다 보면 중복적으로 사용되는 필드들이 존재하기 마련인데 중복되는 필드들을 각각 다 작성하는 것이 아니라 Fragment를 활용하여 중복을 줄이고 코드를 간결하게 만들어 줄 수 있습니다. Fragment와 관련된 간단한 코드를 작성해보도록 하겠습니다. Fragment 사용 예시 관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다. 또한 해당 글의 스키마는 다음과 같이 구성되어 있습니다. # This directive allows re.. 2021. 12. 27. [React] Apollo를 이용하여 GraphQL 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Apollo를 이용하여 GraphQL 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 GraphQL을 이용하여 데이터를 가져오는 서버 및 설명은 여기를 참고해주시면 됩니다. 또한 타입 스크립트를 이용하여 설정 및 구현해보도록 하겠습니다. Apollo 환경 설정 [ 1. 패키지 설치 ] $ npm install @apollo/client graphql [ 2. App.tsx에 Provider 등록 ] import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; import * as React from 'react'; import Person from './pers.. 2021. 12. 26. [React] 무한 스크롤(Infinite Scroll) 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 무한 스크롤(Infinite Scroll)을 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Infinite Scroll이란? Infinite Scroll은 화면에서 페이징 기법을 적용하기 위해 사용하는 방법 중 하나로 모든 데이터를 조회할 때까지 무한정 스크롤하는 기법을 의미합니다. Infinite Scroll과 비교되는 가장 대표적인 것은 페이지네이션이 있습니다. 페이지네이션은 우리가 정말 친근하게 많이 보던 화면으로 게시판 같은 곳에 접속을 하게 되면 하단에 페이지 번호가 존재하는 페이징 기법입니다. 하지만 Infinite Scroll은 페이지네이션과 달리 페이지 번호가 따로 존재하지 않고 페이지네이션에서 다음 번호를 클릭해야 되는 동작을 단순히 계.. 2021. 12. 19. [React] 리액트에서 Smooth Scrollbar 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 리액트에서 smooth scrollbar 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Smooth Scrollbar 사용 방법 스크롤을 할 때 사용자들에게 보다 좋은 UI를 제공해주기 위해 smooth scrollbar을 사용하고는 합니다. 최근 리액트를 이용하여 개발하다가 smooth scrollbar를 적용했던 적이 있는 데 사용 방법에 대해 간단히 글을 남겨보고자 합니다. [ 1. 패키지 설치 ] $ npm install smooth-scrollbar [ 2. App.jsx 파일 수정 ] smooth scrollbar 적용을 위한 설정을 추가해보도록 하겠습니다. 또한 스크롤이 잘 되는지도 확인해봐야 되니 스크롤이 될 수 있도록 div들을 여러개 .. 2021. 11. 20. [React] 타입 스크립트에서 dotenv 자동완성 기능 만들기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트에서 dotenv 자동완성 기능 만드는 방법에 대해 적어보는 시간을 가져보려고 합니다. dotenv 자동완성 기능 만드는 방법 dotenv를 사용하다 보면 느끼는 점 중 하나는 자동완성이 되지 않기 때문에 파일에 찾아가 사용할 변수를 복사하는 작업을 매번 해줘야 합니다. 만약 dotenv에 자동완성이 된다면 이런 불편한 행동들을 매번 해줄 필요가 없을 것이라고 생각되었고 타입 스크립트에서 자동완성 기능을 사용하는 방법에 대해 알게 되어 글을 적어보게 되었습니다. 기본적으로 dotenv를 사용하는 환경이 구성되어 있다는 가정하게 추가 설정을 해보도록 하겠습니다. [ 1. .env 파일에 사용할 변수 저장 ] MY_KEY=keykeykeykey API_K.. 2021. 11. 17. 이전 1 2 3 4 5 6 다음 728x90 반응형
