전체 글

이왕 하는거 우왕 나오게
Googling/React + Next + Eco

Zustand 쓸 때 setter 바로 찍으면 왜 값이 안 바뀌는 걸까?

Zustand를 쓰다 보면 이런 경험, 한 번쯤 해보셨을 거예요 👇const count = useStore((s) => s.count);const inc = useStore((s) => s.inc);const handleClick = () => { inc(); console.log(count); // ??? 여전히 이전 값};setter(set)로 값을 바꿨는데 콘솔에 찍으면 갱신이 안 되어있다?Zustand 버그일까요?아니요 --- 이건 React 구조상 당연한 동작이에요.🧩 React와 Zustand의 타이밍 차이React는 "렌더링 단위"로 상태를 관리합니다.컴포넌트는 렌더 시점의 상태 스냅샷을 들고 있고,그 이후 값이 바뀌어도 "다음 렌더" 때까지는 이전 상태를 유지해요.Zustand는 상..

Googling/React + Next + Eco

Zustand에서 useShallow 제대로 쓰기 — 원시값 중심 설계의 이유

상태관리 라이브러리 Zustand를 쓰다 보면, 여러 상태를 한꺼번에 구독할 때 리렌더링이 생각보다 자주 일어나는 문제를 겪게 된다. 특히 객체를 반환하는 셀렉터(selector)를 쓸 때 그렇다.이 글에서는 그 원인과, useShallow를 어떻게 활용하면 좋은지, 그리고 왜 원시값 중심으로 상태를 설계해야 복잡도가 줄어드는지 정리해본다.🧩 Zustand의 기본 구독 구조보통 우리는 Zustand에서 이렇게 상태를 꺼내 쓴다.const count = useStore((s) => s.count);이 경우 count 값이 바뀔 때만 컴포넌트가 리렌더링된다. 간단하다.그런데 아래처럼 객체 형태로 여러 값을 묶어서 반환하면 이야기가 달라진다.const { count, user } = useStore((s) ..

Googling/React + Next + Eco

Next.js 배럴(Barrel) 파일 가이드 (14+)

대규모 Next.js 프로젝트에서 components/**/index.ts 같은 배럴(Barrel) 파일은 거의 반사적으로 등장합니다. 임포트를 깔끔하게 만들고 폴더의 Public API를 정리할 수 있기 때문이죠. 다만 배럴을 과하게 쓰면 번들 최적화(트리 셰이킹)나 유지보수 측면에서 발목을 잡기도 합니다. 이 글은 한국 실무 기준으로 “언제 배럴을 쓰고, 어디서 멈춰야 하는지”를 정리한 가이드입니다.TL;DR (요약)배럴은 ‘도메인 상위 1단’까지만 두고, 더 하위 폴더는 직접 import가 기본.경로 문제는 배럴 남발 대신 @/ 경로 별칭으로 해결.export type { ... } 타입 재수출은 안전(런타임 번들에 미포함).export * 와일드카드 재수출은 최소화. 필요한 것만 명시적으로 exp..

Googling/React + Next + Eco

Zustand에서 `useStore` 값 꺼내 쓰는 다양한 패턴과 shallow 비교

Zustand를 쓰다 보면 상태 값과 setter(액션)를 어떻게 꺼내 쓰는 게 가장 효율적인지 고민이 생깁니다.이번 글에서는 제가 정리한 값/세터 패턴, shallow 비교의 의미, 그리고 커스텀 훅으로 깔끔하게 묶는 방법을 공유합니다.1. 값 꺼내기: 3가지 방식const { viewMode } = useUIStore();const viewMode2 = useUIStore((s) => s.viewMode);const { viewMode: viewMode3 } = useUIStore.getState();(1) `const { viewMode } = useUIStore();`스토어 전체 구독 → 어떤 값이든 바뀌면 리렌더단순하지만 불필요한 리렌더 위험(2) `const viewMode2 = useUISt..

Googling

CSRF (몰래요청)

CSRF크로스 사이트 리퀘스트 포저리(교차 사이트 요청 위조)사이트에 로그인된 유저를 대상으로그 사이트에서 API 호출을 몰래 요청하게 만든다.결제 사이트의 결제 요청 API를 분석해본 다음이미지를 포함한 그럴듯한 메일을 보낸다.이미지 주소를 "그 결제 사이트의 결제 요청 API를 호출주소"로 하면유저가 로그인 되어있었다면 모르게 호출이 되고돈이 빠져나가는 상황이 발생함.POST 방식이라고 해도메일에 그럴듯한 Form을 구성하고버튼을 누르게 만들면 같은 원리로 빠진다.쿠키 SameSite=Strict로 해두면 같은 도메인의 웹사이트에서만 API가 호출된다. 만약 SameSite=Strict가 제한된다면 CSRF 전용 토큰을 활용한다는 등 해야한다

Retrospective

[개발자회고] #14. 2024 하반기 회고 (feat. 마지막)

2024년이 끝났다. 개발자가 되고 쓰는 14번째 회고! 그리고 마지막 회고. (마지막의 의미는 가장 아래 챕터에서 ...)전략팀장이 되면서부터 제일 먼저 고려해야 하는 부분이 바로 전략 부분입니다.뭐 특별한 일이라기보다는 팀의 목표 설정하는 것부터 전략의 시작이라고 생각합니다. "딜라이트룸" 테크 리더분께서 쓰신 글을 인상 깊게 읽었다.여담이지만, 에서 "딜라이트룸 패널토크"를 매우 인상 깊게 보았기에 글이 반가웠다.  자연스럽게 항상 고민했던 부분인데 실무도 아니고 매니징도 아니라 내가 고민하는 게 맞나 의문이 들었던 부분이 있었다.  그게 전략이었던 것 같다.  개발부장으로서 "전략"적인 부분을 더 많이 고민해야겠다고 생각했으나 생각에 그쳤던 것 같다.  주어진 과제들에서 헤어 나오지 못했고, 실무..

Retrospective

[개발자회고] #13. 2024 상반기 회고 (feat. 늦었어도 회고!)

2024년 상반기가 끝났다. 개발자가 되고 쓰는 13번째 회고를 시작해 보자!(6월 말부터 쓰기 시작한 임시저장 회고록을 더 늦기 전에 마무리 짓고자 생각을 꾹꾹 눌러 담았다!!)AI 2023년 작년 4월, 회사가 주최한 행사에서 GPT와 우리 서비스를 융합한 실험적인 기능들을 선보였다.당시 R&D 시간 부족과 성능 이슈로 최종적으로는 '실험적'인 기능에 그쳐 대고객에 정식 출시하지는 못했다. 그 이후로 다른 과제들과 안정화에 집중하다 보니 2023년이 훌쩍 지나가고 있었다.  2023년 11월 6일 샌프란시스코에서 OpenAI Dev Day 행사가 열렸다. 그때 선보인 GPT-4는 IT업계에 이전보다 더 큰 영향을 주었다. 생각보다 발전속도가 빨랐고 점점 쓸만해지는데 가격은 보다 저렴해졌다. 2023년..

Googling/tools

Postgresql -> Supabase 데이터 마이그레이션

1. 깃헙으로 3초 로그인2. 직관적인 ux 따라 세팅 완료!3. PGAdmin 접속 및 타겟 디비 우클릭 백업 시도!4. pre-data (데이터 넣기 전 스키마 정보), data(진짜 데이터), post-data(데이터 넣은 후 스키마 정보) 전부 백업!5. 로컬(내컴퓨터)에서 원격서버로 리스토어를 요청하는 방식pg_restore --host= --port= --username= --password --dbname= --verbose --clean --no-owner --no-acl 6. 좌측 project setting > database > connection parameters 잘 보고 치환해서 사용7. api 호출 전용 주소가 있는데 그거 쓰지 복붙해서 쓰면 안됨- host뒤에는 https:/..

날개단
날개단 기술 블로그