React 18: 리액트 서버 컴포넌트 준비하기
React Server Components가 데이터 요청 waterfall과 번들 크기를 줄이는 방식을 설명했습니다. SSR과의 차이, 컴포넌트 분류 및 제약 조건도 정리했습니다.
#React#React Server Components
1200
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
Transition : 쉿, 이제 안전해 나의 작은 Suspense
Suspense의 fallback 전환이 유발하는 화면 깜빡임 문제를 짚었습니다. React 18 Transition과 Recoil 지원 기능으로 이전 화면을 유지하는 방법을 소개합니다.
#React#Suspense
1900
Sentry로 우아하게 프론트엔드 에러 추적하기
Sentry를 React 프론트엔드에 적용해 재현 어려운 클라이언트 오류를 추적하는 방법을 소개했습니다. Scope·Context·tag·fingerprint로 분석과 알람 조건을 정교화하는 방안을 설명했습니다.
#Sentry#React
4600
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유
Redux 기반 서버 상태 관리의 보일러플레이트와 직접 구현 부담을 분석했습니다.\nReact Query의 Query·Mutation·캐싱 기능으로 비동기 처리와 사용자 경험을 개선했습니다.
#React#React Query
3200
아토믹 디자인을 활용한 디자인 시스템 도입기
카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다.\n단위 구분의 주관성은 UI 모델링·코드 리뷰·compound 컴포넌트로 보완했습니다.
#React#디자인 시스템
000
아토믹 디자인을 활용한 디자인 시스템 도입기
아토믹 디자인을 활용한 디자인 시스템 도입기
카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다.\n컨텍스트 기반 분류, Storybook·Figma 연계, 외부 스타일 주입 원칙을 적용했습니다.
#React#디자인 시스템
2600
react-testing-library 의 fireEvent 를 userEvent로 마이그레이션 하기 with Antd
fireEvent 기반 테스트를 userEvent로 전환하며 실제 사용자 상호작용을 반영했습니다. Ant Design 컴포넌트의 포인터 이벤트와 multiple select mocking 이슈를 해결했습니다.
#React#React Testing Library
2000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
GatsbyJS에서 l10n(지역화) 지원하기 (간단한 함수형을 곁들인)
Gatsby Node API와 GraphQL로 언어별 번역 노드·페이지를 생성하는 방식을 소개했습니다.\nReact Context와 fp-ts를 활용해 브라우저 언어 라우팅 및 타입 안전한 번역 적용을 구현했습니다.
#GatsbyJS#React
2000
![UI 라이브러리 개발 [기술 블로그]](https://miro.medium.com/v2/resize:fit:896/1*-xQJps9YOvD5TRn6cqWs4g.png)
UI 라이브러리 개발 [기술 블로그]
디자인 시스템 부재로 생긴 스타일 불일치와 소통 비용을 React UI 라이브러리로 개선했습니다.\nStorybook·자동화 테스트·ESM/CJS 빌드로 검증과 호환성을 강화했습니다.
#React#TypeScript
3400
React-Native CodePush 적용기
React Native 앱에 AppCenter CodePush를 연동해 JavaScript 변경을 원격 배포하는 과정을 정리했습니다.\nStaging·Production 분리와 앱 복귀 시 업데이트 전략, 롤백 방법을 함께 소개합니다.
#React#React Native
1400
three.js in Next.js
WebGL을 추상화한 three.js의 핵심 구성과 애니메이션 루프를 설명했습니다. Next.js에서 useRef·useEffect로 바닐라 three.js 도넛을 렌더링하는 패턴을 제시했습니다.
#three.js#Next.js
2600
Tailwind CSS 사용기
Tailwind 테마 확장으로 반복적인 arbitrary value를 줄이는 방법을 소개했습니다.\nPreflight와 클래스 우선순위, twin.macro·Headwind 활용 시 주의점을 정리했습니다.
#Tailwind CSS#React
000
Tailwind CSS 사용기
Tailwind CSS 사용기
Tailwind의 arbitrary value를 테마 확장으로 줄이고 Preflight 동작을 점검하는 방법을 소개했습니다. 클래스 우선순위 충돌은 twin.macro, 긴 클래스 정리는 Headwind로 보완했습니다.
#Tailwind CSS#React
4200
함께 성장하는 화해 개발팀
화해 개발팀의 도메인 중심 협업 구조와 Django·React 기반 개발 환경을 소개했습니다. CI/CD 자동화와 컬처데이·TIL을 통해 기술 학습과 지식 공유를 지원합니다.
#문화#Django
000