이번 글에서는 기존에 사용하던 Context API에서 Zustand로 마이그레이션 하게 된 썰을 한 번 풀어보려고 합니다. 처음에는 상태관리에 대해 잘 모르기도 했고 단순한 전역 상태만 관리하면 되겠지 싶었습니다.  그래서 Context API를 루트에 넣고, 하나 둘 Provider를 감쌌죠.하지만 어느 순간부터 컴포넌트가 불필요하게 리렌더링 되고 수정하지 않은 컴포넌트도 갑자기 반응하며 성능 저하 이슈까지 발생하기 시작했습니다.그때 든 생각은 하나였습니다."내가… 왜 그랬을까?"이 글에서는 Context API를 쓸 때 겪었던 리렌더링 이슈와 Zustand로 어떻게 개선했는지를 공유해보려고 합니다. 왜 나는 Context API를 선택했을까?사실 Context API는 제가 선택해서 사용한 기술은 ..

이번 글에서는 마저 이어서 MSW 설치부터 적용, 그리고 잘 사용했는지(?)에 대해 기술해 보려고 합니다. 우선 MSW를 사용하려면 패키지를 먼저 설치해줘야겠죠? MSW 패키지 설치npm install msw --save-dev# oryarn add -D msw 폴더 구조이거는 팀바팀, 사람마다 다르겠지만 저는 src 폴더 내에 mocks 라는 폴더를 생성해줬습니다.그리고, mocks 폴더 내에 handlers.ts라는 파일을 만들어주고 아래와 같은 코드를 넣어줬는데요, 자세한 설명은 주석으로 달겠습니다!// src/mocks/handlers.tsimport { http, HttpResponse } from "msw";import { SignUpFormData } from "../lib/schema/au..

이 글을 작성하는 이유기존에 진행했던 세종피어 프로젝트를 되살려보려고 했지만 백엔드 팀원들의 개인 사정 때문에 더는 이어 나갈 수 없기도 하고 이전에 존재했던 API 역시 사용할 수 없기에 어떻게 할까 고민을 하다가 마침 올리브영 테크블로그의 글을 읽게 되었습니다. 여기서 MSW라는 개념에 대해 알게 되어 한 번 사용해 보고 느낀 점을 기술하고자 글을 작성하게 되었습니다.또, 사실 해커톤에서나 프로젝트에서나 프론트엔드 개발자는 백엔드 API가 나오기 전에 UI를 완성해 놓으면 시간이 붕 뜨기 마련입니다. 앞으로는 이런 일을 방지하고자, API를 Mocking하는 MSW를 사용해 보았습니다. 다음은 기본적인 페이지 구성 및 UI 구현이지만 이 부분은 생략하고 MSW (Mocking Service Worke..

이번 글에서는 Figma를 기반으로 작성한 컴포넌트를 어떻게 Storybook에서 볼 수 있는지에 대해 알아보려고 합니다. Stories 폴더 내에 파일과 코드 추가하기과정은 생각보다 간단합니다.본인의 프로젝트 폴더 내에 /components 폴더 안에 stories 폴더가 생성되어 있는데 그 안에 컴포넌트 파일.stories.tsx와 코드만 추가해 주면 됩니다. 저의 경우 confirmButton이라는 컴포넌트를 사용하기 때문에 stories 폴더 내에 ConfirmButton.stories.tsx라는 파일을 추가해줍니다.그리고 파일 내에 다음과 같은 코드를 작성합니다. // stories/ConfirmButton.stories.tsximport type { Meta, StoryObj } from "@..

이미 많이 지난 프로젝트이지만 https://github.com/SejongPeer/peer_v2 의 리팩토링을 마저하고자 합니다. 그 중 첫 번째 단계는 바로 StoryBook 도입인데요, StoryBook은 왜 도입해야 하는지부터 알아볼까요? 컴포넌트 단위 개발이 용이하다StoryBook은 각각의 컴포넌트를 독립적으로 개발하고 테스트할 수 있도록 도와줍니다.실제 페이지가 완성되지 않아도 개별 컴포넌트 단위에서 개발이 가능합니다. 이는 디자인 시스템 구축에 유리합니다.컴포넌트 문서화 자동화Storybook은 UI의 상태 (Props, Variants)를 자동으로 문서화해줍니다.팀 내에서 디자이너, 개발자, QA, PM이 컴포넌트 가이드를 쉽게 확인 가능이외에도 더 많은 장점들이 있지만, 제가 도입하려고..

저번 글에 이어서 이번 글에서는 React, Typescript, Electron으로 간단한 게임 런쳐를 구현해보려고 합니다. 우선 프로젝트 구조는 다음과 같습니다.my-game-launcher/├── package.json // Electron과 React 실행 스크립트 포함├── tsconfig.json ├── public/│ └── index.html // React HTML 템플릿 (Create React App 템플릿)| └── electron.js └── src/ ├── index.tsx // React 진입점 (TypeScript) ├── App.tsx // React 컴포넌트 ..

너무 오랜만에 블로그 글을 써서 조금 어색하네요.. 핑계지만 인턴 생활 적응하느라 정신없기도 하고,,, 솔직히 인턴 됐다고 한시름 놓은 게 컸던 것 같습니다앞으로는 꾸준히 작성해보려고 합니다 :) 글을 작성하게 된 계기우선 왜 갑자기 electron에 대해 관심이 생겼느냐부터 말씀드리자면...사실 예전부터 제가 즐겨했던 게임들 (피파, 롤 등) 모두 각자만의 클라이언트(?) (클라이언트라고 통일하겠습니다)를 사용해서 게임을 실행했는데 이게 궁금했습니다. 그래서 최근에 갑자기 생각이 나가지고 출근길에 찾아봤는데 자세한 자료는 안나오더라구요?대신 펄어비스라는 게임회사에서 electron으로 게임 런처 및 클라이언트를 만든다고 합니다. 때문에 간단하게 electron에 대해 공부를 했는데 그에 대해 작성해보려..

Suspense 란?Suspense는 리액트에서 제공하는 컴포넌트로 일부 데이터 또는 리소스가 불리울때까지 로딩 상태를 처리하고 대체 컨텐츠를 표시할 수 있다.주로 동적 import와 비동기 데이터 Fetching을 처리할 때 사용된다.그렇다면 왜 사용할까?비동기 데이터나 컴포넌트가 로드될 때, 로딩 상태를 직접 관리하지 않아도 된다.사용자에게 더 나은 로딩 경험을 제공한다.코드 분할과 비동기 데이터 처리를 쉽게 구현할 수 있다.Suspense의 주요 특징Lazy Loading: 컴포넌트를 비동기적으로 로드할 때 사용한다.비동기 데이터 Fetching: React Server Components 및 React Concurrent Features와 함께 사용비동기 데이터 Fetching과 Suspense ..