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를 통해 개발자에게 더 많은 정보를 제공할 수 있습니다. 코드는 가독성때문에 마지막에 정리하였습니..

프로젝트 폴더 관리 방법론 중 하나인 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 모달모달은 화면 위에 떠오..

리액트 프리랜서로서, 저는 요즘 리액트 프로젝트에서 많은 고객들과 함께 일합니다. 이메일로 요청을 받을 때마다, 저는 보통 리액트 프리렌서 개발자 체크리스트 템플릿으로 답장합니다. 본질적으로 이 체크리스트는 리액트 프리랜서로서 프로젝트 참여를 더 원활하게 만듭니다. 왜냐하면 회사가 여러분을 고용하기 전에 양측의 요구 사항을 맞추기 위해 이 체크리스트를 통해 대화해야 하기 때문입니다.이 글에서 체크리스트의 항목을 자세히 공유하겠습니다. 여려분이 직장을 찾는 구직자이든, 고용하려는 회사이든 상관없습니다.리액트 프리랜서 체크리스트프리랜서로서 회사와 일하기전에 항상 알고싶은 몇가지 세부사항이 있습니다.이 프로젝트의 규칙이 뭔가요?이 프로젝트의 마감/기한이 언제인가요?회사의 배경이 뭔가요?그러나 프리랜서에게 가장..