[TypeScript] 대시보드 지표 포맷팅, 하나로 흐르게 만들기

0. 숫자를 화면에 어떻게 보여줄까?통합 대시보드 파트를 맡았을 때는 어떻게 대시보드에 지표를 보여줘야 하는지, 또 리팩토링할 때는 따로 쓴 코드를 어떻게 통합해야 하는지 막연했다. 하지만 천천히 뜯어보니 코드 전체가 푸는 단 하나의 문제는 "숫자를 화면에 어떻게 보여줄까?" 이다. 위 그림이 그 해답의 전체 흐름이다! 백엔드가 준 숫자 하나가 바인딩을 지나 레지스트리에서 옷을 갈아입고 화면에 닿기까지, 내가 헤맸던 순서 그대로 다섯 단계로 정리해보겠다.1. 레지스트리 - 흩어진 분기를 객체에 모으기1234라는 숫자가 있다고 하자. 이걸 그냥 화면에 그대로 뿌리면 안 되고, 무슨 지표냐에 따라 다르게 보여줘야 한다.클릭수면 → 1,234비용이면 → ₩1,234전환율이면 → 1.23%이걸 가장 단순하게 ..

• format_list_bulleted 카테고리 없음
• · 2026. 6. 23.

[TanStack Query] queryKey 하나로 캐시 이해하기

프로젝트에서 useQuery를 쓰긴 했는데, 정작 안에서 무슨 일이 일어나는지 설명하라면 막막했다. queryKey를 상수로 정리하는 리팩토링을 하면서 이해한 것들을 정리해봤다!! 들어가며: useEffect + fetch의 한계react에서 서버 데이터를 가져오는 가장 익숙한 방법은 useEffect이다.const [data, setData] = useState(null);const [isLoading, setIsLoading] = useState(true);useEffect(() => { fetch("/api/overview") .then((res) => res.json()) .then((res) => setData(res)) .finally(() => setIsLoading(fal..

• format_list_bulleted React
• · 2026. 6. 18.

[Playwright] Cursor와 Playwright로 테스트 자동화 하기

품질 보증(QA)과 Playwright졸업 프로젝트로 진행하는 WYAD(Where you ad)는 대시보드·워크스페이스·인증 등 상태 변화가 많은 화면이 특징입니다.현재는 ESLint·빌드·Storybook 수준의 검증만 있어, 실제 브라우저에서의 사용자 흐름은 배포·시연 전에 수동으로 확인해야 한다는 문제가 있었고 서비스가 복잡해질수록 수동으로 테스트를 해야한다는 불편함이 있었습니다. 이번 글에서는 Playwright 기반 E2E 테스트 환경을 도입하고 Cursor를 활용해 시나리오 작성을 자동화하는 프로젝트 초기 세팅 내용을 기록하고자 합니다! 1. 품질 보증(QA)과 Playwright품질 보증(QA: Quality Assurance)이란 소프트웨어가 요구사항을 충족하고 결함없이 동작하도록 보장하는..

• format_list_bulleted 카테고리 없음
• · 2026. 5. 18.

[React] useContext 활용하기

useContext를 활용해서 다크모드와 카드 플립 구현하기!UMC 스터디를 통해 학습한 React useContext 개념과 실제 구현 과정에서 겪은 에러, 그리고 해결 방법을 정리해보자! 전역 상태 관리전역 상태 관리란 특정 컴포넌트에서의 state 변화를 전역에 두고, 필요한 컴포넌트에서 사용할 수 있는 것이다.React에서는 이를 위해서 Context API를 사용할 수 있다! useContext란?React의 useContext는 Context API와 함께 전역 상태를 쉽게 공유할 수 있도록 도와주는 Hook이다. > Props drilling 방지 리액트의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 단방향으로 흐른다.컴포넌트 트리가 있다고 가정했을 때 공통적..

• format_list_bulleted React
• · 2025. 9. 26.

[React] React + Vite + TypeScript 프로젝트 생성하기

자주 사용하는 프로젝트 셋팅을 공유하고 각 정의와 역할, 그리고 사용하는 의미에 대해 정리해보고자 한다! Vite는 무엇인가?Vite는 프랑스어로 "빠르다(Quick)"라는 뜻을 가진 단어로, 프론트엔드 개발 도구이다.이름처험 빌드와 개발 서버 구동 시간이 빠르다는 장점이 있다.내부적으로 사용하는 ESBuild는 Go라는 네이티브 언어로 만들어진 도구를 이용해 빌드하기 때문에 속도가 빠르다고 한다! 기존 webpack과 같은 모듈 번들러를 이용할 때는 애플리케이션 내 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야지만이 실제 페이지를 제공할 수 있었다. 즉 프로젝트에 있는 모든 JavaScript, CSS, 이미지 파일 등을 한 번에 묶어서(번들링) 개발 서버에 올렸다. 개발 서버를 실행할 때 전..

• format_list_bulleted React
• · 2025. 9. 9.

[AWS] CLF-C02 자격증 합격 후기

AWS CLF-C02 합격까지의 과정을 공유합니다! 클라우드에 대해 전혀 알지 못하던 저는 기초부터 차근차근 공부해보자는 생각으로 AWS Cloud Practitioner 자격증을 준비하기로 했습니다.이 과정은 클라우드의 기본 개념부터 AWS 서비스 전반까지 다루기 때문에 입문자에게 적합합니다!특히, 시험에 합격하면 다음 시험 응시 시 50% 할인 쿠폰을 받을 수 있다는 장점이 있습니다 :) AWS 자격증 종류AWS 자격증은 다음과 같은 것들이 있습니다. 저는 기초 레벨인 AWS Cloud Practitioner을 준비했습니다. Q. 프론트엔드 개발자가 왜 클라우드 자격증을 준비해?클라우드 컴퓨팅은 현대 웹 개발에서 필수적인 요소입니다!클라우드 서비스를 통해 개발자는 인프라 관리의 복잡성을 줄이고, 더 ..

• format_list_bulleted AWS
• · 2025. 9. 8.