본문 바로가기

전체 글

웹 기본 인터페이스 - EventTarget, Node, Element, HTMLElement 상속 관계EventTarget - 이벤트를 받을 수 있는 객체주요 속성과 메서드:addEventListener(type, listener): 지정한 이벤트 유형이 발생할 때 호출할 함수를 추가.removeEventListener(type, listener): 이벤트 리스너를 제거dispatchEvent(event): 이벤트를 발송하여 이벤트 리스너를 실행이 프로토타입을 가지는 요소:Node, WindowNode - DOM의 기본 단위주요 속성과 메서드:nodeType: 노드의 유형을 나타내는 정수값nodeName: 노드의 이름childNodes: 자식 노드들의 컬렉션parentNode: 부모 노드를 참조appendChild(node): 자식 노드를 추가removeChild(node): 자식 노드를 제거c.. 더보기
Vite 프로젝트에서 청크 사이즈 최적화 최근에 저는 프로젝트 빌드 후 청크의 사이즈가 765.81KB인 것을 발견했고, Vite에서 500KB 이상이라 줄여야 한다는 경고를 보게 되었습니다. 이 문제를 해결하기 위해 다양한 방법을 시도했는데, 그 경험을 공유하고자 합니다.모듈 사이즈 분석먼저, 청크의 크기를 줄이기 위해 rollup-plugin-visualizer를 설치해 모듈 사이즈를 확인했습니다. 이 도구를 통해 각 모듈이 얼마나 많은 공간을 차지하는지 시각적으로 분석할 수 있었습니다. 분석 결과, framer-motion과 lottie가 상당 부분을 차지하고 있었습니다.Framer-motion 최적화framer-motion의 경우 기본적으로 트리셰이킹을 지원하고, 추가적으로 경량화 모듈을 사용해 크기를 줄일 수 있었습니다. 저는 기본 애.. 더보기
RTK-Query의 usePrefetch를 사용하여 로딩 화면 줄이기 웹사이트나 애플리케이션의 사용자 경험(UX)을 개선하는 데 있어 로딩 시간은 매우 중요한 요소입니다. 저는 처음에 각 로딩 상태에 스켈레톤 UI를 사용하여 UX를 증가시키려 했지만, 매 화면마다 반복적으로 나오는 스켈레톤 UI도 불편하다고 느꼈습니다. 저는 다른 Next.js 프로젝트에서 팀원들과 함께 Pagenation을 위해 react-query의 prefetch를 사용했었는데 이걸 제 프로젝트에 적용하면 딱이겠다 생각해 바로 RTK-Query의 문서를 찾아 usePrefetch 기능을 발견했고, 이를 통해 짧은 로딩 화면조차 없애버렸습니다. 이번 글에서는 RTK-Query의 usePrefetch를 사용하여 사용자의 로딩 시간을 줄이는 방법을 소개하고자 합니다.usePrefetch 적용 방법1.  사.. 더보기
React 프로젝트 설계 2: 컴포넌트 유형 나누기 React 프로젝트를 진행하면서, 컴포넌트를 몇 가지 유형으로 나누어 관리하면 어떨까 하는 생각이 들었습니다. 이를 통해 코드의 가독성과 유지보수성을 높인 제 경험을 공유해보려 합니다.1. Page/Layout 컴포넌트해당 컴포넌트 유형은 페이지의 구조를 정의하는 가장 상단의 컴포넌트이며, 하술할 세가지 유형의 컴포넌트를 사용합니다. 또한 레이아웃을 관리하기 위해 Compound Component 패턴을 사용하는 것이 좋습니다. [관련 블로그 글] Compound Component 패턴으로 반응형 레이아웃 관리하기서문현대 웹 개발에서는 다양한 기기의 화면 크기에 적응하는 반응형 인터페이스를 만드는 것이 필수적입니다.React와 컴파운드 컴포넌트 패턴을 활용하면 유연하고 유지 관리가 쉬운 레이아웃tak-f.. 더보기
Firefox에서 Grid 영역에 Fixed 불가능한 크로스 브라우징 이슈 해결 웹 개발을 하다 보면 브라우저마다 CSS 속성의 동작 방식이 미묘하게 다를 수 있습니다. 이번에 제가 발견한 이슈는 Firefox에서 position: fixed가 display: grid와 함께 사용될 때, 예상과 다르게 동작하는 문제입니다. 검색해보아도 관련 자료를 찾기 어려웠기 때문에, 해결 과정을 공유하고자 합니다.배경 지식일반적으로 position: fixed는 뷰포트를 기준으로 설정된 top, bottom, left, right 위치에 고정됩니다. 그러나 위치 설정이 없다면 top, bottom, left, right가 auto가 되어, 브라우저가 자동으로 계산한 문서 흐름 상 원래 있어야 했을 위치에 고정됩니다.position: fixed;top: auto;bottom: auto;left: .. 더보기
UX를 고려한 개발: react-beautiful-dnd 에서 버튼 클릭 방식으로의 전환 들어가며정주행 한국사 서비스의 연표 순서 맞추기 기능을 개발할 때, 처음에는 react-beautiful-dnd를 사용하여 연표를 드래그 앤 드롭으로 순서대로 배치하는 방식을 선택했습니다. 그러나 여러 가지 UX 문제로 인해 최종적으로 배치된 연도 사이에 선택 버튼을 두어 클릭하는 형태로 변경하게 되었습니다. 이번 글에서는 초기 문제점과 최종적인 해결 방안을 중심으로 개발 과정을 공유하고자 합니다.초기 개발: react-beautiful-dnd 사용react-beautiful-dnd 선택 이유react-beautiful-dnd의 드래그 앤 드롭 기능을 사용하면 사용자 인터랙션을 직관적으로 만들 수 있어 연표 순서 맞추기 기능을 구현하기에 적합하다고 판단했습니다. 그러나 실제 사용 과정에서 여러 UX 문제.. 더보기
React 프로젝트 설계 1: 나만의 폴더 구조 도입 들어가며React 프로젝트를 처음 시작할 때, 많은 개발자들이 어떤 프로젝트 구조를 선택해야 할지 고민합니다. 저 또한 다양한 패턴을 시도해보았고, 그 과정에서 얻은 경험을 공유하고자 합니다. 이번 글에서는 Atomic 디자인 패턴에서 Container/Presentational 패턴을 거쳐, 결국 저만의 디자인 시스템을 도입하게 된 이야기를 풀어보겠습니다.Atomic 디자인 패턴의 도입처음에는 Atomic 디자인 패턴을 사용했습니다. Atomic 디자인은 컴포넌트를 가장 작은 단위인 'Atom'부터 시작해 'Molecule', 'Organism', 'Template', 'Page'로 계층화하는 방법론입니다. 해당 패턴은 컴포넌트의 재사용성을 높여주지만 아래와 같은 단점들로 인해 다른 디자인 패턴으로 교.. 더보기
아파치 카프카(Apache Kafka) 실시간 데이터 스트리밍을 처리하고 관리하는 분산형 데이터 스트리밍 플랫폼주요 개념토픽(Topic):데이터가 저장되는 논리적 채널데이터를 카테고리별로 분류, 각 토픽은 여러 파티션으로 나뉨파티션(Partition):각 파티션은 데이터를 저장파티션 내부에서 각 메시지는 offset(고유 번호)으로 구분병렬 처리 가능프로듀서(Producer):데이터를 카프카 토픽에 보내는 클라이언트특정 토픽에 데이터를 게시(publish)컨슈머(Consumer):카프카 토픽에서 데이터를 읽는 클라이언트특정 토픽을 구독(subscribe)브로커(Broker):카프카 클러스터를 구성하는 서버각 브로커는 토픽의 파티션을 저장하고, 데이터의 생산과 소비를 관리클러스터(Cluster):여러 브로커로 구성된 카프카의 인프라고가용성과 확.. 더보기

티스토리툴바