내가 레퍼런스가 되자 내가 레퍼런스가 되자

최근 포스팅에서 여러 project에서 사용할 모듈을 따로 package로 구성하여 개발하는 작업이 끝나 해당 모듈이 필요한 project에 적용하였습니다. Monorepo 구조를 가지는 repo의 project가 build 시 모듈도 같이 build가 되어야 하여 Github Actions에 해당 내용을 추가하게 되었습니다. Github Actions 작성예시를 위해 이전에 작성했던 CI/CD 관련 포스팅에서 예제를 가져오겠습니다.name: on: push: branches: - jobs: run: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 ..

이번에 여러 project에서 공용으로 사용할 모듈을 따로 package로 구성하면서 개발하게 되어 간단하게 사용할 상태 관리 라이브러리를 찾다가 Zustand를 써보게 되었습니다. Zustand를 사용하면서 해당 내용을 정리해 보게 되었습니다. Zustand?Zustand는 React 상태 관리 라이브러리 중 하나이며 hooks 기반의 API를 제공하는 작고 빠르며 확장 가능한 상태 관리 솔루션입니다. 사용 방법먼저 Zustand를 설치합니다.npm install zustand# oryarn add zustand 기본 사용법Zustand를 사용하는 예시 코드를 작성해보겠습니다. 예시 코드의 환경은 React, TypeScript 환경으로 가정하겠습니다.// src/store/count.tsimport ..

현재 회사에서 운영중인 여러 서비스를 과거에 monorepo로 구성하며 겪은 과정과 내용을 정리하게 되었습니다. 서비스 운영시 repository 관리에 참고하면 좋을것 같습니다. Monorepo vs Multirepo개발 시 여러 모듈 또는 서비스를 하나의 repository에서 관리할 것인지 여러 repository에서 관리할 것인지에 따라 monorepo와 multirepo로 나누어집니다. MonorepoMonorepo 방식은 하나의 repository에서 두 개 이상의 모듈 또는 서비스를 개발 및 관리하는 방식입니다. 각각의 모듈과 서비스를 구성하는 package는 서로 의존성을 가지며 구성됩니다. 따라서 package들끼리 의존성을 가지지 않으면 monorepo라고 하긴 어렵습니다. Monore..

monorepo로 구성되어 있던 특정 package를 분리하기 위해 repositroy의 형상을 다른 repositroy로 이관하는 작업을 하게 되었습니다. 기존 repositroy의 commit 이력과 브랜치들도 다 같이 옮겨가는 니즈가 있어 해당 작업 내용을 남기게 되었습니다. Git clone mirror option기존 repositroy의 commit 이력과 브랜치들도 복사하기 위해 git clone mirror option을 사용합니다. Git clone mirror vs baregit clone에는 mirror와 bare option이 있습니다. mirror option은 기본적으로 bare option을 포함하고 있으며 bare option 과는 달리 기존 repositroy의 local ..

서비스를 운영하며 배포 시 Release와 Tag를 직접 만들었습니다. 매번 Release와 Tag를 수동으로 생성하다 보니 불편함을 느끼게 되었고 이를 자동화하기 위해 GitHub Actions를 활용해 보았습니다. GitHub Actions workflow 작성운영 중인 서비스의 구조는 monorepo 구조로 하나의 repository에서 3개의 서비스를 운영 중입니다. 해당 구조에 맞게 자동으로 Release와 Tag를 각각 생성을 해야 되므로 아래와 같은 조건이 필요했습니다.1. 각 서비스 배포 시 사용하기 위해 재사용이 가능2. commit message를 통해 versioning (but commit message에 version에 대한 내용이 없더라도 동작) 3. 배포 완료 시 Release..

Recoil 관련 포스팅을 남긴 이후 다른 업무로 인해 사이드로 진행하던 레거시 프로젝트의 Recoil 포팅 작업이 멈춘 상태였습니다. 다시 작업을 시작하려는데 더 이상 Recoil을 사용하지 않는다는 관련 레퍼런스들을 읽고 해당 내용을 정리하게 되었습니다. Recoil을 선택했던 이유기존 React를 사용한 프로젝트에서 상태 관리를 위해 Redux를 도입하여 사용 중이었습니다. 하지만 Redux를 사용하다 보니 계속 생산되는 보일러 플레이트 코드, 신규 입사자들의 러닝 커브 등의 문제가 있었습니다. 사실 이러한 이유보단 규모가 작은 project에서 Redux 사용을 위해 설정하는 상황에서 배보다 배꼽이 큰 느낌을 항상 받았었습니다. 그런 상황에서 Recoil은 좋은 선택지가 되었습니다. Recoil을..

서버에서 내려주는 날짜 데이터를 이용하거나 포맷팅을 진행할 때 다른 환경과 달리 iOS에서만 Invalid Date가 뜨는 이슈를 작업 중 경험하곤 합니다. 날짜 포맷팅 라이브러리인 dayjs나 moment를 사용하더라도 해당 이슈를 발견할 수 있습니다. 해당 이슈를 알아보고 처리하는 과정을 살펴보겠습니다. Invalid Date IssueInvalid Date가 뜨는 이슈 확인을 위해 Chrome와 Safari 두 환경에서 비교를 진행하겠습니다. 날짜 포맷팅 라이브러리인 dayjs도 같이 확인 해보겠습니다. 해당 예제는 아래와 같습니다.// Chromeconst stringDate1 = '2024/08/30 00:00:00';const stringDate2 = '2024-08-30 00:00:00';c..

이전 useState와 useRef를 비교하는 포스팅에서 useState의 값의 변화와 re-render의 과정이 비동기적으로 이루어진다고 했는데 useState의 set에서 함수형 업데이트를 통해 동기적으로 사용하는 방식에 대해 살펴보려 합니다. useState 비동기적 set 함수예시코드를 간단하게 확인해보겠습니다.import { useState } from "react";function HooksTest() { const [count, setCount] = useState(0); const updateCount = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return ( ..