본문 바로가기

728x90

전체 글101

공통 컴포넌트 복붙은 이제 그만! Turborepo로 프론트엔드 모노레포 도입하기 안녕하세요! 오늘은 프론트엔드 실무에서 규모가 좀 커지다 보면 무조건 마주하게 되는 '컴포넌트 복붙 지옥'에서 탈출하는 법을 이야기해볼까 해요.보통 서비스를 만들다 보면 유저가 쓰는 B2C 앱(웹) 하나, 그리고 사내에서 관리자들이 쓰는 어드민(Admin) 페이지 하나, 이렇게 두 개 이상의 프로젝트를 굴리게 되죠? 처음엔 프로젝트 두 개 띄워놓고 "어? 이 버튼 어드민에도 똑같이 들어가네?" 하면서 유저 앱에 있던 버튼 컴포넌트를 그대로 복사해서 어드민에 붙여넣기 하곤 하죠. 유틸리티 함수나 커스텀 훅(Hook)도 마찬가지고요.근데 이게 프로젝트가 커지면 어떻게 될까요? 🚨 버튼 디자인이 바뀌거나 유틸 함수에 치명적인 버그가 생겨서 고쳤는데, 어드민 쪽에는 적용하는 걸 깜빡해서 에러가 터지는 대참사가.. 2026. 9. 21.

ESLint, Prettier 세팅하느라 삽질하시나요? 초고속 린터 Biome으로 갈아타기 🚨 새로운 프론트엔드 프로젝트를 시작할 때 가장 먼저 하는 일이 뭘까요? 아마 대부분 npm init을 치고 나서 eslint, prettier를 설치하고, 온갖 플러그인과 설정 파일을 복사해서 붙여넣는 일일 거예요. "포매팅은 Prettier가 하고, 린팅은 ESLint가 하되, 둘이 충돌나면 안 되니까 eslint-config-prettier를 깔고..." 이렇게 보일러플레이트 치다 지치는 경험, 다들 한 번쯤 해보셨죠? 게다가 프로젝트 규모가 조금만 커져도 저장할 때마다 린터가 굼벵이처럼 돌아가는 걸 보면서 한숨을 쉬게 됩니다. 그런데 요즘 이 끔찍한 삽질을 단 한 방에, 그것도 미친 속도로 해결해 주는 새로운 툴이 프론트엔드 생태계의 '국룰'로 떠오르고 있어요. 바로 Biome(바이옴) 입니다! 💡.. 2026. 9. 18.

React 19 Compiler 도입: 이제 useMemo, useCallback 쓰느라 삽질할 필요 없다고요? 🚨 리액트 개발자라면 누구나 한 번쯤 겪어본 악몽이 있죠. 바로 '불필요한 리렌더링(Re-rendering)'을 막기 위한 끝없는 사투입니다. 성능 좀 최적화해보겠다고 코드마다 useMemo, useCallback, React.memo를 덕지덕지 때려 넣다 보면, 내가 지금 비즈니스 로직을 짜는 건지 리액트 비위를 맞추고 있는 건지 현타가 올 때가 한두 번이 아니에요.특히 훅(Hook)의 의존성 배열(Dependency Array)에 값 하나 빼먹어서 생기는 버그 잡느라 밤새며 삽질해 본 경험, 다들 있으시죠? 그런데 드디어, 우리를 이 고통에서 해방시켜줄 구원 투수가 등장했습니다. 바로 React 19의 핵심 기능인 'React Compiler' 예요.오늘 포스팅에서는 그동안 우리를 괴롭혔던 메모이제이션(.. 2026. 9. 18.

"아직도 컴포넌트 처음부터 짜세요?" Shadcn UI로 디자인 시스템 구축 시간 1/10로 줄이기 새로운 프론트엔드 프로젝트를 시작할 때 가장 먼저 맞닥뜨리는 고민, 바로 "UI 컴포넌트를 어떻게 구성할 것인가?"죠. 처음부터 바닥부터 다 짜자니 보일러플레이트 치다 지치고 접근성(a11y) 챙기느라 끝없는 삽질이 시작돼요. 그렇다고 MUI나 Ant Design 같은 무거운 UI 라이브러리를 가져다 쓰자니, 디자인 커스텀이 너무 빡세고 앱 번들 사이즈만 무식하게 커지는 경험, 다들 한 번쯤 해보셨을 거예요.그런데 최근 1~2년 사이, React와 Next.js 생태계에서 완전히 '국룰'로 자리 잡은 UI 솔루션이 등장했어요. 바로 오늘 소개할 Shadcn UI입니다. 일반적인 npm 패키지와는 완전히 다른 접근 방식을 가진 이 녀석이 왜 프론트엔드 개발자들을 열광하게 만들었는지, 실무에서는 어떻게 활용.. 2026. 9. 18.

Redux는 무겁고 Context API는 렌더링 지옥? Zustand로 1분 만에 전역 상태 관리 끝내기 프론트엔드 개발을 하다 보면 가장 많이 하는 고민 중 하나가 바로 '상태 관리'죠? 특히 React 생태계에서는 이 상태 관리를 어떻게 하느냐에 따라 프로젝트의 유지보수성이 하늘과 땅 차이로 갈리게 돼요. 과거에는 Redux가 거의 유일한 해답이었지만, 요즘 프론트엔드 커뮤니티에서는 Zustand가 거의 '국룰'로 자리 잡아가고 있어요.왜 다들 무거운 Redux나 기본 내장된 Context API 대신 Zustand에 열광하는 걸까요? 오늘은 프론트엔드 실무에서 삽질을 줄여주고, 빡세게 작성하던 보일러플레이트 코드를 확 줄여주는 Zustand의 매력과 실전 적용법을 낱낱이 파헤쳐 볼게요! 💡🚨 기존 상태 관리 도구들의 치명적인 단점Zustand가 왜 좋은지 알기 위해서는 먼저 기존 도구들이 우리를 얼.. 2026. 9. 18.

프론트엔드 성능 최적화 1순위: Core Web Vitals (LCP, CLS) 실전 개선 가이드 안녕하세요! 프론트엔드 개발자로 일하다 보면 기획자나 사용자에게 "우리 사이트 왤케 느려요?"라는 가슴 철렁한 질문을 들을 때가 있죠. 서버 응답이 느린 걸 수도 있지만, 대부분은 브라우저 렌더링 최적화가 덜 되어 있어서 발생하는 문제입니다.예전에는 단순히 '페이지 전체가 로딩되는 시간(Load)'만 봤다면, 요즘 구글 SEO와 사용자 경험(UX)의 핵심 트렌드는 단연 Core Web Vitals(웹 핵심 성능 지표)입니다. 프론트엔드 채용 공고 우대사항에 국룰처럼 꼭 적혀 있는 그 단어 맞아요.구글에서 발표한 3가지 핵심 지표 중에서도 실무에서 가장 자주 마주치고, 개선했을 때 사용자가 확 체감할 수 있는 LCP(최대 콘텐츠 풀 페인트)와 CLS(누적 레이아웃 이동) 현상을 어떻게 빡세게 최적화하는지 .. 2026. 9. 17.

이전 1 2 3 4 ··· 17 다음

728x90

LIST

티스토리툴바