See the Pen Untitled by Aierse (@Aierse) on CodePen.">See the Pen Untitled by Aierse (@Aierse) on CodePen. 매번 로딩바를 구현할 필요없이 로딩 애니메이션을 제공하는 리액트 라이브러리를 소개합니다.react-spinner는 로딩 애니메이션이 적용된 컴포넌트들을 제공합니다. 1. 설치npm i @aierse/react-spinner 2. 사용법import Spinner from "@aierse/react-spinner"function Example() { return ( {/* Bricks 애니메이션 */} {/* Spin 애니메이션 */} {/* Coll..

컴포넌트를 설계하다보면 같은 역할, 비슷한 역할들의 컴포넌트들이 생성됩니다. 예를 들어 모바일 버전 네비게이션, PC 버전 네비게이션의 경우 같은 역할이지만 두개의 컴포넌트가 생성될 수 있습니다., 처럼 분할될 수 있죠. 취소 버튼, 확인 버튼 등 테마에 따라 컴포넌트들이 분할될 수도 있습니다.같은 역할의 컴포넌트들이 분할되다보면 유지보수성과 가독성이 떨어져 악영향을 줍니다. 이번 글에서는 모듈의 인터페이스를 구현해 비슷한 역할의 컴포넌트를 묶는 방법에 대해 소개드립니다.1. JSON 인터페이스확인취소 JSON 방식 인터페이스는 무한히 확장될 수 있습니다.또한 리액트에서 명시적으로 사용할 수 있으며 Lint를 통해 개발자에게 더 많은 정보를 제공할 수 있습니다. 코드는 가독성때문에 마지막에 정리하였습니..

자바스크립트의 map메소드는 배열을 매핑하는 함수입니다.배열 내 데이터를 특정 규칙으로 정제하는 방법으로 주로 사용합니다. 그러나 map 메소드는 배열을 전부 순회하는 O(n)의 복잡도를 가집니다.데이터 정제 로직이 복잡하거나 배열 자체가 크다면 처리시간이 기하급수적으로 늘어날 수 있습니다. 때문에 map 메소드를 사용할때는 성능을 고려하며 코드를 작성해야 합니다.이번 글에서는 async 비동기 처리로 가속할 수 있는 방법에 대해 알려드리겠습니다.1. Async로 병렬 처리function test() { const data = [1, 2, 3, 4, 5] const data2 = data.map(async (v) => { return `데이터: ${v}` }) data2.forEach((v)..

프로젝트 폴더 관리 방법론 중 하나인 Container&Presenter 패턴에 대해 소개합니다.상태 관리 이전의 패턴으로 현재는 권장하지 않습니다. 오래된 리액트 프로젝트(특히 클래스기반)에서 자주 찾아볼 수 있습니다.기존의 프로젝트를 유지보수하는데 발견하였다면 이해하는데 도움이 되기를 바랍니다. 블로그에 개발 관련 글을 작성중이니 많은 관심 부탁드립니다.1. Container&Presenter란?Presenter: 데이터가 어떻게 사용자에게 보여질지에 대해서 다루는 컴포넌트Container: 어떤 데이터가 보여질지 다루는 컴포넌트Container&Presenter 패턴은 MVC 패턴에서 영감을 받았습니다.당시 골치였던 Props Drilling 현상을 조금 이해하기 쉽게 하기위해 사용했습니다. Red..

프로젝트 폴더 관리 방법론 중 하나인 아토믹 디자인 패턴에 대해 소개합니다.저만의 아토믹 패턴 노하우도 작성했으니 많은 의견 부탁드립니다. 아토믹 패턴은 NextJS에서도 일부 확인할 수 있는 패턴입니다.layout.ts와 page.ts는 아토믹 패턴에서 각각 템플릿과 페이지에 대응됩니다.1. 아토믹 패턴이란?오늘날 프론트엔드는 점점 복잡해지며 기능뿐만 아니라 유지보수와 재사용성이 용이한 시스템이 요구됩니다.Atomic Design은 이러한 문제를 해결하기 위한 방법론 중 하나로 탄생했습니다. 아토믹 패턴이란 원자 모형에서 영감을 받아 프로그래밍에 적용한 프로젝트 방법론입니다.컴포넌트의 크기에 따라 원자, 분자, 구조체, 템플릿, 페이지로 분류해 컴포넌트를 정의합니다. Atoms(원자): 기본적인 UI ..

기존의 리액트 모달 라이브러리는 유연함과 확장성을 가지고 있지만 너무 무겁다는 단점이 있습니다.문서가 영문이다보니 어떤 기능이 있는지도 찾기 어렵죠. 모달의 핵심적인 기능들을 구현했습니다. 가장 최신의 문법으로 dialog를 이용한 모달입니다.콩글리쉬까지 적용한 한국인의 소울이 담긴 모달 라이브러리를 소개합니다.1. 핵심 기능1-1. 백드롭백드롭은 모달창 바깥의 외부 공간을 의미합니다.백드롭은 외부와의 상호작용을 차단하는 것을 목표로 합니다.CSS로 Blur, 화면 가리개 등 프로젝트에 알맞는 디자인을 적용할 수 있습니다.모달 바깥 흐리게 혹은 안보이게 적용 가능 (투명도 가능)바깥 클릭시 모달창이 닫히게 구현 가능백드롭 커스텀 CSS 적용 가능모달 바깥과의 상호작용 차단1-2 모달모달은 화면 위에 떠오..