본문 바로가기
728x90
반응형

SPA/React104

Turborepo 원격 캐시 설정 방법 (Vercel / Self-hosted) 안녕하세요. J4J입니다. 이번 포스팅은 turborepo 원격 캐시 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 모노레포를 위한 Turborepo 기초 가이드 모노레포를 위한 Turborepo 기초 가이드안녕하세요. J4J입니다. 이번 포스팅은 모노레포를 위한 turborepo 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 모노레포란 ? 모노레포는 하나의 저장소에 애플리케이션 서비스, 라jforj.tistory.com Helm 이란? Helm 입문을 위한 기본 개념 설명 Helm 이란? Helm 입문을 위한 기본 개념 설명안녕하세요. J4J입니다. 이번 포스팅은 helm 입문을 위한 기본 개념 설명하는 시간을 가져보려고 합니다. Helm 이란? helm이라고 하는 것.. 2026. 2. 1.
모노레포를 위한 Turborepo 기초 가이드 안녕하세요. J4J입니다. 이번 포스팅은 모노레포를 위한 turborepo 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 모노레포란 ? 모노레포는 하나의 저장소에 애플리케이션 서비스, 라이브러리 패키지 등을 서로 구분하지 않고 여러 개의 프로젝트를 함께 관리하는 방식을 말합니다. 보통 저장소를 관리할 때 가장 많이 접하는 구조는 멀티레포가 될 것입니다. 멀티레포는 1개의 프로젝트마다 1개의 저장소를 소유하고 있는 것으로, 말 그대로 서로 독립적인 방식으로 관리되며 각자의 프로젝트에 관여하지 않는 구조를 말합니다. 간단하게 예시를 들면 멀티레포는 다음과 같은 구조가 나올 수 있습니다. // design-system repo- design-system// application service.. 2026. 1. 27.
Tailwind로 만드는 React 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 안녕하세요. J4J입니다. 이번 포스팅은 tailwind로 react 컴포넌트 라이브러리 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리안녕하세요. J4J입니다. 이번 포스팅은 npm 패키지 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. NPM 패키지 배포 npm 패키지 배포라고 하는 것은 한 번 만들어진 javascript 기반의 라이jforj.tistory.com React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용안녕하세요. J4J입니.. 2026. 1. 23.
Tailwind className 관리 가이드, clsx + twMerge + cva 역할 정리 안녕하세요. J4J입니다. 이번 포스팅은 tailwind를 사용할 때 className 관리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Tailwind를 사용하면 겪는 className 설정 문제점 요즘 react 프로젝트를 이용하여 페이지 및 컴포넌트 개발을 할 때 css를 이용한 스타일링을 제공하기 위해 tailwind가 많이 사용되고 있습니다. 함께 비교될 수 있는 도구인 styledComponents, emotion 등과 비교해보면 utility-first 기반의 tailwind가 최근에 많이 선택되고 있는 것으로 보입니다. tailwind를 이용하여 개발을 하다 보면 개인적으로 가장 크게 다가오는 이점은 css를 정의할 때 block-element-modifier (BEM)을 .. 2026. 1. 18.
React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 안녕하세요. J4J입니다. 이번 포스팅은 react typescript 컴포넌트 라이브러리 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Vite 사용하기 [React] Vite 사용하기안녕하세요. J4J입니다. 이번 포스팅은 vite 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vite란? vite는 webpack, rollup 등과 같이 모듈 번들링을 수행할 때 사용되는 번들러 중 하나입니jforj.tistory.com npm 패키지 배포, 처음부터 자동화까지 한 번에 정리 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리안녕하세요. J4J입니다. 이번 포스팅은 npm 패키지 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. NPM 패키지.. 2026. 1. 10.
[React] SSE (Server-Sent Events) 사용하여 실시간 통신하기 안녕하세요. J4J입니다. 이번 포스팅은 sse (server-sent events) 사용하여 실시간 통신하는 방법에 대해 적어보는 시간을 가져보려고 합니다.   관련 글 [SpringBoot] SSE (Server-Sent Events) 사용하여 실시간 통신하기    들어가기에 앞서 해당 글에서는 sse API가 존재할 때 react에서 어떻게 활용할 수 있는지에 대해서 적어보려고 합니다. 만약 sse에 대한 기본 개념에 대해서 먼저 알고 싶으신 분들은 위의 링크를 참고해 주시면 됩니다.    SSE (Server-Sent Events) 사용 환경 설정 react에서 sse 사용 환경 설정하는 방법에 대해 적어보겠습니다. sse API는 관련 글에서 확인할 수 있는 spring에서 제공해주는 API를 .. 2024. 5. 8.
[React] Jest에서 호출되는 함수 mocking 하기 안녕하세요. J4J입니다. 이번 포스팅은 jest에서 호출되는 함수 mocking 하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Jest에서 Mocking이 필요한 이유 mock이란 번역을 했을 때 확인할 수 있는 것처럼 모조품, 가짜라는 의미를 가지고 있습니다. 그래서 mocking이라는 것은 mock 데이터를 활용하는 것으로 해석해볼 수 있으며 주로 테스트 케이스를 작성할 때 mock 데이터를 활용하여 테스트 코드를 작성하는 것을 의미합니다. jest에서 mock 데이터가 필요한 이유는 간단합니다. jest에 의해 테스트될 수 있는 다양한 모듈 및 컴포넌트들에는 다양한 함수들이 존재할 수 있고 한 가지의 함수가 올바르게 동작되는지 테스트할 때 함수에 의존된 여러 가지 함수들이 실행될 수도 있습.. 2024. 1. 20.
[React] Jest에서 path alias 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 jest에서 path alias 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Path Alias 설정이 필요한 경우 일반적으로 react를 활용하여 개발할 때 path alias를 사용하는 경우는 상대 경로 대신 절대 경로를 활용하기 위해서입니다. 그래서 path alias를 적용하고 있는 프로젝트 같은 경우는 이를 위한 설정 값들을 적용해 둔 경우가 존재하는데 typescript를 활용하시는 분들은 보통 다음과 같이 tsconfig.json에 설정되어 있을 확률이 매우 높습니다. { "compilerOptions": { "paths": { "@/*": ["./src/*"] // path alias 설정 (./src 경로의 하위 경로를 표현할 때 ./.. 2024. 1. 18.
[React] Jest에서 render 커스텀하여 전역 wrapper 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 jest에서 render 커스텀하여 전역 wrapper 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Jest에서 발생될 수 있는 render 이슈 jest를 이용하여 개발한 컴포넌트를 테스트할 때 발생될 수 있는 간단한 이슈에 대해 먼저 얘기해 보겠습니다. 예를 들어 recoil을 사용하고 계시다면 index 또는 main 파일에 recoil 사용을 위한 설정을 다음과 같이 해야만 합니다. // src/main.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import { RecoilRoot } from 'recoil'; import App from './App.tsx'.. 2024. 1. 14.
[React] Zod를 이용하여 React Hook Form 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 zod를 이용하여 react-hook-form 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] react-hook-form을 이용하여 validation (유효성) 처리하기 Zod란? 이번 글에서는 react-hook-form에 다루기보다는 react-hook-form과 함께 사용해 볼 수 있는 zod에 대해 다뤄보도록 하겠습니다. react-hook-form에 대해 더 궁금하신 분들은 위의 링크를 참고해주시면 될 것 같습니다. zod는 validation 처리를 위해 사용할 수 있는 라이브러리로 여러 서비스들에서 쉽게 볼 수 있는 입력 값이 올바르게 되어있는지를 확인할 때 활용할 수 있습니다. Zod 공식 문서를 확인해보면 zod.. 2023. 12. 24.
[React] react-query v5 변경점 알아보기 (5) - useMutation 기능 변경 안녕하세요. J4J입니다. 이번 포스팅은 react-query v5 변경점 알아보기 마지막인 useMutation 기능 변경에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 [React] react-query v5 변경점 알아보기 (3) - useQueries 기능 변경 [React] react-query v5 변경점 알아보기 (4) - useInfiniteQuery 기능 변경 Optimistic Updates 방식 추가 useMutation의 변경점에 대해서는 한 가지에 대해서만 적어보도록 하겠습니다. 먼저 여기서 말하고자.. 2023. 12. 13.
[React] react-query v5 변경점 알아보기 (4) - useInfiniteQuery 기능 변경 안녕하세요. J4J입니다. 이번 포스팅은 react-query v5 변경점 알아보기 네 번째인 useInfiniteQuery 기능 변경에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 [React] react-query v5 변경점 알아보기 (3) - useQueries 기능 변경 initialPageParam 설정 방법 변경 useInfiniteQuery를 사용하게 되면 처음 보여주고 싶은 페이지에 대한 값을 초기화하여 원하는 페이지를 화면에 보여줄 수 있게 설정이 가능합니다. 5버전 이전에는 해당 설정을 다음과 같이 qu.. 2023. 12. 10.
[React] react-query v5 변경점 알아보기 (3) - useQueries 기능 변경 안녕하세요. J4J입니다. 이번 포스팅은 react-query v5 변경점 알아보기 세 번째인 useQueries 기능 변경에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 Combine 추가 useQueries만이 가지고 있는 변경점은 1개로 combine 기능이 추가되었습니다. combine 기능은 useQueries를 통해 실행되는 여러 query들의 결과를 하나로 합쳐 1개의 query가 실행된 것과 같은 결과를 제공해 줍니다. react-query 공식 문서에 따르면 combine을 활용하여 구조적으로 안정화가 될 .. 2023. 12. 3.
[React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 안녕하세요. J4J입니다. 이번 포스팅은 react-query v5 변경점 알아보기 두 번째인 query 공통 기능 변경에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 getQueryData Filter 사용 변경 react-query에서 query 처리를 수행할 때 활용될 수 있는 공통 기능 중 첫 번째 변경된 사항은 getQueryData입니다. getQueryData는 query key에 매핑되어 있는 캐싱된 데이터가 존재하는 경우 해당 데이터를 불러와 사용할 수 있도록 도와줍니다. 그래서 getQueryData를 사용할 땐 query key의 값을 넣어줘야 했고 이외에 추가적으로 query filter라는 것.. 2023. 12. 1.
[React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 안녕하세요. J4J입니다. 이번 포스팅은 react-query v5 변경점 알아보기 첫 번째인 공통 기능 변경에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 최근 react-query의 major 버전이 변경되어 5 버전이 등장하게 되었습니다. react-query 공식 문서를 확인해 보면 5 버전이 등장하면서 변경된 다양한 것들을 확인해 볼 수 있습니다. 이 중 주요 변경점들에 대해 서로 관련 있는 것들끼리 묶어 정리를 해보려고 합니다. 가장 먼저 공통 기능 변경점에 대해 적어보겠습니다. Options 설정 방법 변경 useQuery, useMutate 등을 사용할 때 options 설정을 하는 방법이 변경되었습니다. 먼저 5버전 이전까지는 options를 설정할 때 다음과 같이 objec.. 2023. 11. 28.
[React] react-i18next로 다국어 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 react-i18next로 다국어 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. react-i18next란? react-i18next는 i18next를 기반으로 한 React에서 사용할 수 있는 국제화 프레임워크입니다. 여기서 말하는 국제화란 세계에 존재하는 여러 국가들에 대한 언어를 맞추는 것으로, 다른 말로는 서비스에서 사용되는 단어들을 각 국가에서 사용되는 언어에 맞게 보여주는 것을 의미합니다. 그래서 국내를 대상으로 하는 서비스들에는 국제화에 대해 고려를 할 이유가 없지만, 만약 동일한 서비스를 국내뿐만 아니라 특정 해외 국가에도 지원을 해준다 하면 국제화를 고려해봐야 합니다. 국가에 맞는 언어를 보여주는 방법들은 여러 가지가 존재할 수 있습니다.. 2023. 11. 23.
[React] Jest로 테스트 커버리지 확인하기 (2) - 커버리지 비율 한계점 안녕하세요. J4J입니다. 이번 포스팅은 Jest로 테스트 커버리지 확인하는 방법 마지막인 커버리지 비율 한계점에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Jest로 테스트 커버리지 확인하기 (1) - 개념과 설정 방법 커버리지 비율 한계점이란? 커버리지 비율 한계점은 커버리지 동작을 위해 수집된 코드들에서 테스트 코드로 동작되는 코드들의 비율이 충족되어야만 하는 기준치를 의미합니다. 이전 글을 확인해 보시면 커버리지 비율 한계점을 설정하기 위해서는 jest.config.js에서 coverageThreshold 값을 활용하면 가능했었고, 설정되는 값들에는 statements, branches, functions, lines와 같이 총 4가지가 있는 것을 볼 수 있었습니다. 이번 글.. 2023. 11. 20.
[React] Jest로 테스트 커버리지 확인하기 (1) - 개념과 설정 방법 안녕하세요. J4J입니다. 이번 포스팅은 Jest로 테스트 커버리지 확인하는 방법 첫 번째인 개념과 설정 방법에 대해 적어보는 시간을 가져보려고 합니다. 테스트 커버리지란? 테스트 커버리지는 테스트 케이스가 작성된 소스 코드 범위를 의미하는 것으로 실제 기능 동작을 위해 작성된 다양한 코드들이 테스트 코드로 얼마나 작성이 이루어졌는지 확인하도록 도와줍니다. 그리고 React에서 테스트 커버리지를 확인해보고 싶을 때 사용해 볼 수 있는 대표적인 라이브러리로 Jest가 존재합니다. 많은 개발자 분들이 테스트 코드를 작성하기 위해 Jest를 사용하고 계실 것이고, Jest를 사용하고 계시는 중이라면 간단하게 테스트 커버리지를 적용해 볼 수 있습니다. 만약 Jest 설정이 필요하신 분들은 다음 글들을 참고하시면.. 2023. 11. 16.
728x90
반응형

티스토리툴바