728x90 반응형 SPA153 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. [Next] Next13 이후로 MSW 사용하기 (3) - Storybook에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 마지막인 storybook에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 이전 글 [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 [Next] Next13 이후로 MSW 사용하기 (2) - Node 환경 설정 들어가기에 앞서 들어가기에 앞서 storybook에 msw를 적용하기 위해서는 2가지 환경이 설정되어 있어야 합니다. storybook 사용 환경 msw browser 사용 환경 storybook 사용 환.. 2024. 1. 9. [Next] Next13 이후로 MSW 사용하기 (2) - Node 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 두 번째인 node 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 들어가기에 앞서 들어가기에 앞서 msw가 무엇이고 msw에서 말하는 node 환경이 무엇인지는 위의 관련 링크를 참고해 주시면 됩니다. 해당 글에서는 next에서 msw node 환경 사용을 위한 설정 방법에 대해서만 다루도록 하겠습니다. Node 환경 설정 방법 [ 1. 패키지 설치 ] 현.. 2024. 1. 8. [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 첫 번째인 browser 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 들어가기에 앞서 들어가기에 앞서 msw가 무엇이고 msw에서 말하는 browser 환경이 무엇인지는 위의 관련 글 링크를 참고해 주시면 됩니다. 해당 글에서는 next에서 msw 사용을 위한 설정 방법에 대해서만 다루도록 하겠습니다. 그리고 next에서는 SSR, SSG 등의 데이터 fetching과 next 13 이후로 등장한 RSC와 같이 서버 단에서 발생되는 API .. 2024. 1. 5. [Next] Jest 사용 환경 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Jest 사용 환경 설정 방법 환경 설정을 하기 전 현재 개발하고 있는 프로젝트 환경이 어떻게 구성되어 있느냐에 따라 저와 같이 수행하더라도 정상 동작이 되지 않을 수 있습니다. 이번 설정에서 구성되는 기본적인 프로젝트 환경은 next cli를 이용하여 typescript 환경을 구축한 것을 기반으로 할 예정이기에 글을 보실 때 참고해 주시면 될 것 같습니다. 또한 일반적으로 next에서 jest를 사용하시는 경우 컴포넌트에 대한 테스트도 함께 수행하실 것이기 때문에 jest를 설정하면서 testing-library도 함께 설정하도록 하겠습니다. [ 1. 패키지 설치 ] $ npm ins.. 2024. 1. 4. [Next] 상황 별 원하는 환경 변수 (.env) 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 상황 별 원하는 환경 변수 (.env) 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [Next] 환경 변수(.env) 사용하기 Next에서 상황 별 사용되는 환경 변수 next에서 사용될 수 있는 환경 변수 파일들은 전부는 아니지만 다음과 같이 다양하게 존재합니다. .env .env.development .env.production .env.local .env.test .env.test.local 또한 이런 환경 변수 파일들은 실행되는 script가 무엇인지에 따라 우선순위를 가지게 됩니다. 우선순위의 역할은 순위가 높은 것에 대한 변수 값을 먼저 확인하고 변수가 존재한다면 해당 변수를 사용하며 변수가 존재하지 않는 다면 점점 순위가 낮은 것.. 2024. 1. 3. [Next] Storybook으로 UI 컴포넌트 문서화하기 (4) - Figma 연동하기 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 마지막인 figma 연동하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 [Next] Storybook으로 UI 컴포넌트 문서화하기 (3) - Path Alias 사용 Figma 연동하는 이유 일반적으로 개발되는 서비스 및 storybook에 표현되는 다양한 컴포넌트 UI들은 개발자가 직접 디자인을 하여 구현된 것이 아닌 디자이너와 협업을 통해 만들어진 결과물일 것입니다. 그러다 보니 자연스럽게 행해지는 플로우는 디자이너가 figma와 .. 2024. 1. 1. [Next] Storybook으로 UI 컴포넌트 문서화하기 (3) - Path Alias 사용 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 세 번째인 path alias 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 Path Alias 사용 예시 많은 분들이 path alias를 사용하는 이유가 import를 통해 모듈을 로드할 때 상대 경로보다는 절대 경로를 이용하기 위해서 일 것입니다. 그래서 일반적인 페이지를 개발할 때 path alias를 활용한 절대 경로를 자연스럽게 많이 사용하고 계실 거고 심지어 설정이 잘 되어 있다면 자동 완성을 사용할 때도 절대 경로를.. 2023. 12. 28. [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 두 번째인 tailwind 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 Tailwind 사용 예시 프로젝트 개발을 할 때 tailwind를 사용하시던 분들이 storybook을 처음 도입을 하게 되면 제일 먼저 당황하는 부분은 storybook에 css가 적용되지 않는 현상입니다. 서버를 구동하여 확인할 수 있었던 다양한 컴포넌트들의 디자인들이 storybook에서는 올바르게 보이지 않아 설정에 의문을 품게 됩니다. 예를 들어 다음과 같이 tailwind를 사용하여 새로운 버튼을 만들어 보겠습니다. import { M.. 2023. 12. 26. [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 첫 번째인 기본 설정에 대해 적어보는 시간을 가져보려고 합니다. Storybook이란? storybook은 react, next, vue 등의 FE 개발자들이 많이 사용하는 다양한 기술 스택에서 활용할 수 있는 UI 컴포넌트 문서화 오픈 소스 도구입니다. storybook을 BE 입장에서 가장 대표적으로 비교해 볼 수 있는 것은 swagger가 될 수 있습니다. API 산출물을 swagger를 통해 확인할 수 있는 것처럼 서비스 개발을 위해 만들어진 다양한 컴포넌트 및 페이지들의 산출물을 확인할 수 있도록 도와주는 것이 storybook입니다. Storybook 공식 문서를 확인해 보면 storybook을 사용했을 때.. 2023. 12. 25. 이전 1 2 3 4 ··· 9 다음 728x90 반응형
