Light
Dark
zustand를 그냥 사용했을 때 문제점 zustand를 각각의 slice로 관리하다보면 다음의 단점이 있습니다. 각각의 store에서 상태를 가져와야하기 때문에 import와 const 선언문이 길어집니다. 각각의 store에 속해있는 상태값을 서로 참고하거나 가져올 수 없습니다. use_store 훅을 통한 중앙 집... Read More
쇼핑몰의 단점, 많은 이미지 가장 유명한 쇼핑몰인 쿠팡에서도 화면을 불러오는 데 2초 이상 걸리기도 합니다. 쇼핑몰은 데이터도, 이미지도 많아 화면을 로딩하는 과정에서 유저의 이탈률이 많이 생긴다고 합니다. 이를 개선하기 위해 lazy-loading을 next/image에서 기본 제공을 하고 있다는 것을 알 수 있... Read More
여러 형태의 컴포넌트를 서로 드래그 앤 드랍하여 작업하기 위해서는 드래그가 가능한 것과 드랍이 가능한 컴포넌트를 분리하고, 방향을 정해주는 게 중요하다고 생각했습니다. 먼저 각각의 컴포넌트 타입을 정의합니다. 그 후 드래그가 가능한 방향을 정의하고 값을 만들어주는 유틸을 만들었습니다. // type.ts // 드래그 가능한 컴포... Read More
객체지향 프로그래밍 (Object-Oriented Programming, OOP) 객체지향 프로그래밍이란? 객체지향 프로그래밍(OOP)은 프로그램을 객체(object)라는 기본 단위로 나누어 설계하고 개발하는 프로그래밍 패러다임입니다. 객체는 데이터(속성)와 해당 데이터에 작용하는 함수(메서드)를 포함하는 독립된 단위입니다. OOP는... Read More
JSX와 Babel JSX와 Babel은 현대 JavaScript 개발에서 매우 중요한 도구입니다. 아래에서 각각의 개념과 역할에 대해 설명하겠습니다. JSX (JavaScript XML) JSX는 JavaScript 내에서 HTML과 유사한 문법을 사용할 수 있게 해주는 문법 확장입니다. 일반적으로 React에서 사용되며... Read More
Haeran's blog