FE24 Zustand vs TanStack Query, 같이 쓰자! 🐻요즘 프론트엔드 프로젝트에서 Zustand + TanStack Query가 자연스럽게 같이 등장한다.처음에는 둘 다 상태 관리처럼 보여서 이거 둘 중 하나만 쓰면 되는 거 아닌가? 싶었는데 역할이 완전히 다르다.이번 글에서는 실제 로그인 플로우를 구현하면서 느낀 차이를 정리해본다. 1. Zustand는 무엇인가?Zustand는 전역 상태 관리 라이브러리다.Redux보다 훨씬 간단하고, 보일러플레이트도 거의 없다.프론트 내부 상태를 저장하는 곳으로,예를 들면 로그인 모달 열림 여부, 다크모드 상태, 사이드바 열림/닫힘, 사용자가 선택한 탭 이런 것들을 저장한다. 사용예import { create } from 'zustand'export const useStore = create((set) => ({ .. 2026. 3. 15. 기존 Vite + React 프로젝트에 TypeScript 추가하기 (마이그레이션 정리) 📚사이드 프로젝트를 새로 시작했다.기존에 세팅은 되었던 프로젝트라, Vite + React(JavaScript) 프로젝트에 TypeScript를 추가하면서 겪었던 과정과 필요한 설정을 정리해보았다.1. TypeScript 설치먼저 프로젝트에 TypeScript와 React 타입을 설치한다.npm install -D typescript @types/react @types/react-dom설치가 완료되면 TypeScript 설정 파일을 생성한다.npx tsc --init그러면 프로젝트 루트에 tsconfig.json 파일이 생성된다. 2. tsconfig.json 설정기본 생성된 tsconfig.json을 Vite 환경에 맞게 일부 수정했다.{ "compilerOptions": { "target":.. 2026. 3. 12. 모바일 UI 디자인 시스템과 프론트엔드에서 디자인 시스템 적용하기 💭 서론요즘 휴대폰의 화면비율은 정말 다양하다.미니 사이즈의 선호도가 줄고 휴대폰의 평균 사이즈가 커졌어도 작은 기종을 고려하지 않을 수 없다.어떤 기기는 세로 길이가 667px 정도로 작고, 어떤 기기는 882px 이상으로 꽤 크다.그래서 디자인 시안을 바탕으로 프론트엔드 개발을 하다 보면 이런 고민이 생긴다.UI 요소 크기는 작은 화면 기준으로 해야 할까? 큰 화면 기준으로 해야 할까?작은 사이즈에서는 페이지 디자인이 "예뻐"보이는데 큰 사이즈에서는 적절하지 않아보인다면.. 어떻게 해야할까? 고민을 바탕으로모바일 UI를 디자이너 관점에서 어떻게 설계하는지그리고 프론트엔드에서 디자인 시스템을 어떻게 구현하는지를 가볍게 정리해보았다. 1. 모바일 UI는 어떤 화면 기준으로 디자인할까?웹 디자인을 배워보.. 2024. 1. 20. CSS position: sticky 제대로 이해하기 (왜 고정이 안 될까?) 💭 서론여태 브라우저의 헤더나 하단 바를 만들 때는 보통 position: fixed를 사용해왔다. 그런데 무신사나 지그재그 웹 브라우저처럼 레이아웃이 모바일 사이즈(max-width)로 고정된 구조에서는fixed를 사용하면 요소가 max-width로 제한된 레이아웃을 벗어나 좌우 바깥으로 튀어나오는 현상이 생긴다.( fixed는 뷰포트 기준으로 고정되기 때문 )지그재그 웹을 살펴보니 헤더에 position: sticky가 사용되고 있었다.그래서 같은 방식으로 sticky를 적용해봤지만 고정이 안 됐다.같은 sticky 속성을 사용했는데 왜 고정이 안 될까?원인을 찾는 과정에서 별거 아닌 내용일 수도 있지만 작은 CSS 동작 원리를 하나 새롭게 알게 되어 정리해본다. 결론)position: stick.. 2023. 12. 12. "리액트는 가상 DOM을 사용하여 성능을 최적화합니다." 가 무슨 말이야? 💭 서론프론트엔드를 공부하다 보면 한 번쯤은 이런 문장을 보게 된다.“리액트는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화합니다.” 그런데 처음 보면 이게 무슨 말인지 꽤 추상적으로 느껴진다.이 문장이 실제로 무엇을 의미하는지, 그리고 왜 성능이 좋아지는지 정리해보았다.1. DOM이란 무엇인가?먼저 DOM(Document Object Model)부터 이해해야 한다.웹페이지는 내부적으로 DOM 구조로 관리되는데, 쉽게 말하면브라우저는 우리가 작성한 HTML을 그대로 사용하는 것이 아니라 트리 구조의 객체 형태(DOM)로 변환해서 관리한다. 예를 들어 제목 내용이 코드는 브라우저 내부에서 다음과 같은 구조로 관리된다.bodyh1p이러한 구조를 DOM이라고 한다. 2. 문제: DOM을 직.. 2023. 9. 13. 사용자 관점의 UI 구성하기 💭 서론인턴십 기간 동안 실제 프로젝트에 투입되진 못했지만 우리 부서가 개발 중인 서비스의 유사 서비스 업체의 랜딩페이지 클론 업무를 하게 되었다.업무를 진행하며 어쨌든 내게 주어진 일이다보니 구현에 급급했는데, 팀장님께서 구현하는 것에만 급급해 하지 말고 레이아웃 목업부터 시작해 사용자 관점을 생각해보라고 피드백을 주셨다.기억에 많이 남는 피드백이었어서 따로 기록해본다. 1. 어설픈 반응형 보단 스크롤 적용을완전한 반응형 구현에 미숙했던지라 뷰의 사이즈에 따라 컨텐츠가 잘려 보이지 않는 순간들이 존재 했었는데,반응형보다 우선시 되어야 할 것은 사용자가 보는 컨텐츠는 어느 순간에도 보이지 않으면 안 된다는 것이다.따라서 어설픈 반응형을 구현하려다 컨텐츠 안 보임 이슈를 발생시키지 말고 min-width.. 2023. 9. 5. 이전 1 2 3 4 다음
