개요: 당연한 말인데, 머릿속에 없으면 의미 없는 것들 데일 카네기의 자기관리론을 매일 5~20페이지씩 꾸준히 읽어서 마침내 다 읽었다. 솔직히 책 내용을 한 줄로 요약하면 "당연한 말 많이 한다" 이다. 근데 그게 단점은 아니다. 당연한 상식이라 할지언정 내 머릿속에 없으면 의미가 없는 건데, 이 책은 그걸 한번 일깨워준다. 내가 평소에 두루뭉술하게 알고 있던 것들을, "아 내가 이미 알고 있었던 거구나" 라고 바로 인지할 수 있을 정도로 구체적으로 짚어준다. 만약 내가 이 책을 읽지 않은 상태에서 같은 주제로 글을 써보라고 하면, 절대 이렇게 구체적으로 못 쓴다. 예시까지 자연스럽게 들어가면서 쓸 자신은 더더욱 없다. 특히 좋았던 건 이 책에 나오는 사례들이 다 실존 인물 기반이라는 점이다. 데일..

4.1 Deduplicate Global Event Listeners핵심: 전역 이벤트 리스너를 훅 인스턴스 간 공유한다.왜 중요한가: 리스너 폭증으로 인한 메모리/CPU 낭비를 막는다.코드리뷰 신호: 같은 훅 사용 수만큼 window 리스너가 늘어난다. 같은 훅 사용 수만큼 window 리스너가 늘어난다 코드는 보통 구현 편의 때문에 생기지만, 트래픽이 늘면 병목으로 확대된다. 이 항목의 핵심은 문법 변경이 아니라 실행/렌더 흐름을 정리해 전역 이벤트 리스너를 훅 인스턴스 간 공유한다를 기본값으로 만드는 데 있다. 변경 뒤에는 요청 중복 여부, stale 데이터 노출 시간, 재시도/취소 동작와 회귀 테스트를 같이 보면서 리스너 폭증으로 인한 메모리/CPU 낭비를 막는다 결과가 재현되는지 점검한다. 예..

3.1 Authenticate Server Actions Like API Routes핵심: Server Action 내부에서 인증/인가를 반드시 검증한다.왜 중요한가: 액션은 엔드포인트처럼 호출 가능하므로 보안 경계가 필요하다.코드리뷰 신호: action 함수 내부에 auth/authorization 검증이 없다. action 함수 내부에 auth/authorization 검증이 없다 코드는 보통 구현 편의 때문에 생기지만, 트래픽이 늘면 병목으로 확대된다. 이 항목의 핵심은 문법 변경이 아니라 실행/렌더 흐름을 정리해 Server Action 내부에서 인증/인가를 반드시 검증한다를 기본값으로 만드는 데 있다. 변경 뒤에는 서버 응답 시간, DB/외부 API 호출 수, 캐시 적중률와 회귀 테스트를 같이..

2.1 Avoid Barrel File Imports핵심: 대형 라이브러리는 배럴 import 대신 직접 import를 사용한다.왜 중요한가: 불필요한 모듈 해석/번들 포함을 줄인다.코드리뷰 신호: 아이콘/컴포넌트 라이브러리를 루트 엔트리에서 구조분해 import한다. 실무에서 아이콘/컴포넌트 라이브러리를 루트 엔트리에서 구조분해 import한다 부분만 단발성으로 고치면 같은 문제가 다시 나오기 쉽다. 작은 단위(한 페이지, 한 훅, 한 API)부터 대형 라이브러리는 배럴 import 대신 직접 import를 사용한다 패턴을 적용하고, 경계 케이스를 함께 정리해야 회귀를 줄일 수 있다. 이후 번들 분석 결과(엔트리 청크, 라우트별 청크)와 초기 JS 파싱 시간을 배포 전후로 비교해 불필요한 모듈 해석/..

Vercel Labs에서 skill로 공유한 React Best Practices를 개인 공부용으로 사람이 읽기 좋게 정리하고 설명을 다시 작성한 글입니다. 나중에 슥슥 읽으려고 AI와 함께 작성한 글이니까 이상한 부분 있으면 알려주세요. 1.1 Defer Await Until Needed핵심: await는 실제로 필요한 분기 안으로 옮긴다.왜 중요한가: 불필요한 대기를 제거해 응답 시간을 즉시 줄일 수 있다.코드리뷰 신호: `early return`이 가능한데도 그 전에 실행되는 오래 걸리는 비동기 호출이 있다. `early return`이 가능한데도 그 전에 실행되는 오래 걸리는 비동기 호출이 있다 징후는 기능을 빠르게 추가할 때 쉽게 누적된다. 먼저 의존성이 없는 작업은 먼저 시작하고, 실제 소비 ..

개요: 결핍은 왜 피할 수 없는가 결핍은 단순히 무언가를 적게 가졌을 때 느끼는 불쾌감이 아니다. 그것은 삶의 필수적인 요소이자 누구도 피할 수 없는 상대적인 감각이다. 아무리 풍족한 삶을 살아도 부족함의 기준(역치)은 '블루 닷 효과'처럼 유동적으로 변하기 때문이다. 혹자는 한 사람의 인격이 그가 겪은 결핍의 크기로 정의된다고 말할 정도로, 결핍은 인간과 떼려야 뗄 수 없는 관계다. 이 책은 이러한 결핍의 메커니즘을 4가지 핵심 개념으로 명쾌하게 설명한다.결핍: 무언가가 부족한 상태 그 자체.대역폭 (Bandwidth): 우리가 인지하고 일을 수행할 수 있는 정신적 용량. 결핍 상태에 놓이면 이 대역폭이 급격히 낮아진다.터널링 (Tunneling): 대역폭이 낮아졌을 때 나타나는 현상. 터널 속에 들어..

개요 프론트엔드 개발자라면 누구나 한 번쯤 이런 순간이 온다. 디자인 시스템이 없어서 매번 버튼 스타일을 복사-붙여넣기 하는 게 답답하거나, 레거시 코드가 섞인 컴포넌트 파일이 500줄을 넘어가는 걸 볼 때 참을 수 없는 충동을 느낀다. "이거 내가 싹 정리해서 공통 컴포넌트로 만들면 대박이겠는데?""지금 쓰고 있는 라이브러리 너무 구려. 요즘 뜨는 걸로 바꾸면 개발 속도 빨라질 텐데." 시작은 언제나 순수한 열정이다. 불편함을 해소하고, 코드를 우아하게 만들고 싶다는 선의다. 하지만 잠시 키보드에서 손을 떼고 냉정하게 생각해 보자. 그거, 정말 지금 우리 팀에 필요한 거 맞나? 혹시 나만의 기술적 만족감을 채우기 위한 욕심은 아닐까? 오늘은 현직 개발자들과의 대화 도중 나온 주제를 바탕으로, 주니..

개요 대한민국 남자 개발자라면 누구나 한 번쯤 마주하는 거대한 벽이 있다. 바로 군대다. 많은 이들이 경력을 끊지 않으면서 국방의 의무를 해결할 수 있는 산업기능요원(병역특례)에 눈을 돌린다. 하지만 요즘은 TO가 줄고 채용 트렌드가 급변하면서 전략 없이 덤볐다간 시간만 날리기 십상이다. 필자 역시 이 과정이 순탄치 않았다. 주변에 마땅히 정보를 얻을 만한 사람이 없었기 때문이다. 병특에 해당됐던 지인들은 개발자 붐이 일던 코로나 시기에 이미 좋은 곳에서 해결해버렸고, 그마저도 나와는 개발 스택이 달라 실질적인 도움을 받기 어려웠다. 결국 맨땅에 헤딩하듯 혼자 정보를 찾고, 개발 스택까지 바꿔가며 일반 회사를 다녔다. 그렇게 퇴근 후 사이드 프로젝트까지 병행하며 꼬박 2년이 걸려서야 겨우 병특을 시작할..

개요 출퇴근길, 습관처럼 인스타그램을 켠다. 지인들의 소소한 일상보다는 릴스를 시청하며 시간을 보낸다. 30분이라는 시간 제한을 둔 채, 주로 유머나 개그 콘텐츠를 소비하다 보면 알고리즘은 비슷한 영상을 끊임없이 추천해 준다. 개중에는 가끔 정치적, 사회적 이슈를 다룬 릴스가 섞여 있기도 하다. 보통 그런 영상의 댓글창은 전쟁터를 방불케 하기에 굳이 열어보지 않으려 한다. 하지만 호기심을 이기지 못하고 댓글창을 열었다가 후회하는 일이 종종 있다. 원본 영상의 일부만 잘라낸 릴스를 보다 보면, 같은 내용임에도 댓글 반응이 천차만별인 경우를 목격하게 된다. 첫 댓글의 논조에 따라 전체 여론이 형성되는 현상, 즉 '누가 먼저 어떤 평가를 내렸느냐'가 집단의 반응을 결정짓는 미묘한 광경을 마주하게 되는 것이다..

개요 회사와 사이드 프로젝트에서 디자인 시스템을 구축하게 됐다. React 기반에 Radix UI를 사용하고, Tailwind CSS로 스타일링하고, Storybook으로 문서화하는 전형적인 구성이었다. 하지만 여기서 한 가지 독특한 시도를 했다. 컴포넌트의 스크린샷을 자동으로 캡처해서 JSDoc에 주입하는 파이프라인을 만든 것이다. ▼ 'Storybook이 있는데 도대체 왜?' 라는 의문이 들 수 있을 것이다. 지금부터 왜 이런 걸 만들었고, 어떻게 구현했고, 실제로 얼마나 유용한지 정리해보려 한다. 문제 상황: 컴포넌트를 확인하려면 어디로 가야 하나?일반적인 디자인 시스템 사용 경험디자인 시스템을 만들어 본 사람이라면 알겠지만, 컴포넌트를 쓸 때 항상 이런 과정을 거친다. ▼"이 버튼 컴포넌트 어떻..