Suspense와 선언적으로 Data fetching처리
Suspense와 선언적으로 Data fetching처리
Suspense로 Promise 기반 비동기 작업과 fallback 렌더링을 선언적으로 연결했습니다. 경쟁 상태·워터폴·결합도를 줄이는 컴포넌트 구성을 설명합니다.
#React#Suspense
3300
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?
카카오웹툰 웹 개편에서 GPU 가속과 IntersectionObserver로 인터랙션·지연 로딩을 최적화했습니다. 스크롤 이벤트 대비 Observer의 안정적 프레임과 적용 시 주의점을 공유합니다.
#IntersectionObserver#lazy load
3500
React Children 과 친해지기
React.Children.toArray()의 평탄화와 key 할당 방식을 설명했습니다. Fragment 내부를 평탄화하지 않는 제약과 대안을 소개합니다.
#React#children
000
React Children 과 친해지기
React Children 과 친해지기
React.Children.toArray()의 평탄화와 key 부여 동작을 예제로 설명했습니다. Fragment 내부를 펼치지 못하는 한계와 보완 라이브러리도 소개합니다.
#React#React.Children
2200
타입스크립트 꿀팁
타입스크립트에서 enum·index signature 대신 union type과 mapped type 활용을 권장했습니다.\n외부 타입 보강과 타입 가드로 반복을 줄이고 안전한 타입 좁히기를 소개합니다.
#TypeScript#React
000
타입스크립트 꿀팁
타입스크립트 꿀팁
TypeScript에서 union type·mapped type으로 런타임 영향과 값 누락 위험을 줄이는 방법을 소개했습니다.\n외부 패키지 타입 확장과 다양한 타입 가드 활용법도 정리했습니다.
#TypeScript#React
3300
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?
Redux Toolkit이 Redux의 설정 복잡성과 보일러플레이트를 줄이는 주요 API를 정리했습니다.\n상태 관리는 createSlice, 비동기는 createAsyncThunk, 데이터 패칭은 RTK Query를 제안합니다.
#Redux Toolkit#Redux
000
Finite state machine & statecharts – XState
XState로 React의 복잡한 상태를 FSM과 Statecharts로 모델링하는 방법을 설명했습니다.\nboolean 조합 문제를 context, guards, 계층·병렬 상태와 비동기 전이로 개선했습니다.
#React#XState
000
![[TokTokHan.dev]ES6 문법정리](https://tech.toktokhan.dev/assets/images/default_blog_cover.png)
[TokTokHan.dev]ES6 문법정리
ES5와 비교하며 자주 쓰이는 ES6 문법의 간결한 표현 방식을 정리했습니다. 변수 선언, 화살표 함수, 비구조화 할당 등을 React 활용 사례와 함께 소개합니다.
#JavaScript#TypeScript
2400
이미지 리사이징을 통해 웹 성능 개선하기
반응형 이미지의 srcSet·sizes 속성으로 기기와 레이아웃에 맞는 해상도를 제공합니다.\n압축과 리사이징을 결합해 리소스 용량과 웹 성능을 개선했습니다.
#React#srcSet
4200
cypress를 이용하여 components test 작성하기
Cypress로 Next.js 컴포넌트 테스트 환경을 구성하고 Todo List 렌더링을 검증했습니다.\n관심사 분리, fixtures, stub을 활용한 컴포넌트 리팩터링 과정을 소개합니다.
#Cypress#Next.js
2600
Chart.js 시작하기
React에서 Chart.js와 react-chartjs-2로 선·막대 혼합 차트를 구성하는 방법을 소개했습니다. 데이터 형식과 범례·툴팁·축 옵션을 중심으로 커스텀 방법을 설명합니다.
#Chart.js#React
1700
Atomic state management – Jotai
Jotai의 atomic state management 구조와 Context 재렌더링 문제 완화 방식을 소개했습니다. 파생 atom, 비동기 처리, 렌더링 최적화와 외부 라이브러리 통합 사례를 정리했습니다.
#React#Jotai
000
ICT 인턴십 후기
ICT 인턴십에서 애자일 협업 방식과 VODA 서비스 기획·개발 과정을 경험했습니다.\nFigma 와이어프레임, UX 설계, 데이터 기반 기획의 중요성을 배웠습니다.
#agile#Figma
1400