오늘날 웹 애플리케이션은 효과적으로 데이터를 관리하고, 반응형 사용자 경험을 제공하기 위해 점점 더 복잡해지고 있다. 이에 따라 애플리케이션의 성능과 유지보수성을 높이기 위해 체계적인 상태 관리가 필수적이게 되었다. 특히 React와 같은 프레임워크를 사용할 때 컴포넌트 간의 데이터를 효율적으로 관리하고 일관된 상태를 유지하려면 상태 관리 라이브러리를 활용할 필요가 있다. 💡Jotai란?Jotai는 일본어로 원자(atom)를 의미하는 이름에서 유래했으며, React 애플리케이션에서 가장 작은 단위의 상태를 관리할 수 있도록 설계된 상태 관리 라이브러리이다. Jotai는 Recoil과 비슷한 Atom 기반의 상태 관리 라이브러리이며, 가볍고 쉽게 전역 상태를 관리할 수 있다. 원자 (atom)원자는 상태..
TypeScript로 프로젝트를 개발할 때, 데이터 유효성 검증은 필수적인 작업이다. 특히 클라이언트와 서버 간의 데이터 통신, 사용자가 입력한 폼 데이터, API 응답 데이터를 검증하는 과정에서 이 작업은 매우 중요하다.TypeScript는 컴파일 시점에서의 타입은 검증하지만, 런타임에서 발생하는 에러는 방지하기 어려워 별도의 데이터 검증 라이브러리가 필요하다. 이때 사용할 수 있는 것이 Zod이다. 💡Zod란?Zod는 TypeScript 기반의 스키마 선언 및 데이터 검증 라이브러리로, 데이터가 특정 형식과 구조를 따르는지 검증하기 위해 설계되었다. Zod는 데이터 유효성 검증과 타입 안전성을 강화하기 위해 만들어졌다. Zod를 사용하면 TypeScript와 함께 타입 정의와 데이터 검증을 손쉽게..
JavaScript 개발에서 자주 사용되는 함수들을 모아 간편하게 제공하는 유틸리티 라이브러리는 생산성을 높이고 코드 품질을 개선하는 데 큰 도움이 된다. es-toolkit은 JavaScript API를 활용해 높은 성능과 작은 번들 사이즈를 제공하는 유틸리티 라이브러리이다. 💡es-toolkit란?es-toolkit은 토스에서 개발한 유틸리티 라이브러리로, 자바스크립트 개발에서 자주 사용되는 다양한 유틸리티 함수를 보완하고 확장하였다. 이 라이브러리는 lodash와 같은 기존의 유틸리티 라이브러리와 비슷한 기능을 제공하지만, 최신 JavaScript API를 활용하여 최대 97% 더 작은 번들 사이즈와 2~3배 빠른 속도를 보유하고 있다. 특히 TypeScript 타입을 내장하고 있어, 타입 안전성..
💡Auto layout Figma에서는 Auto layout 기능을 통해 반응형 UI 디자인을 할 수 있다. Auto layout은 화면 크기가 바뀔 때 바뀌는 화면마다 UI 레이아웃을 조정할 필요가 없도록 자동 조정 옵션을 설정하도록 고안된 기능이다. 따라서 Auto layout 기능을 이용하면 UI/UX 디자인의 영역에서 다양한 화면 크기 및 콘텐츠 변경에 레이아웃이 대응하면서 디자인을 할 수 있다. 콘텍스트 메뉴에서 Auto layout을 선택하거나 Shift + A 단축키를 입력하여 사용할 수 있다. 오토 레이아웃으로 설정하는 옵션 1. 개체 크기 적용할 개체를 선택하고 크기를 조정하면 Auto layout은 동적으로 개체의 크기를 조절하여 내부 콘텐츠에 자동으로 대응한다. 2. 정렬 및 방향 가..
💡Prototype Figma의 프로토타이핑 메뉴는 디자인을 화면상에서 실제 동작하는 프로토타입으로 변환하는 기능을 제공한다. 이를 통해 사용자 상호작용을 미리 시뮬레이션하고, 피드백을 할 수 있다. Device 항목 설정 시 주의사항 프로토타입을 진행할 때 Device 항목을 선택하지 않으면 기본적으로 PC 기준으로 설정된다. 따라서 모바일 환경에서의 사용을 고려한다면, 프로토타입 시작 전에 디바이스를 선택하는 것이 좋다. 💡Prototype 기능 설명 Interaction details Option 터치 후 발생하는 이동 및 애니메이션 효과를 설정할 때 사용되는 기능이다. 사용자와의 상호작용에 따라 화면 전환 및 효과를 정의하여 프로토타입을 더욱 동적으로 만들 수 있다. None: 어떤 액션도 선택하..
🔎Figma 커뮤니티 플러그인과 위젯을 사용하면 Figma에서의 작업을 효율적으로 할 수 있으며, 다양한 도움을 받을 수 있다. Figma Explore, install, use, and remix thousands of templates, plugins, and widgets published to the Figma Community by designers and developers. www.figma.com 💡Annotation Sticky Note https://www.figma.com/community/widget/1125842729650935566 Annotation Sticky Notes | Figma Community This widget is one of the sticky note wid..
Figma의 디자인 파일은 툴바, 사이드바, 스크롤이 가능한 캔버스로 구성되어 있다. 이 중에서 좌측 사이드바는 레이어와 페이지에 접근할 수 있게 해 준다. Pages, Layers, Assets 세 가지 헤딩은 좌측 사이드바에서 확인할 수 있다. 각 패널 간에 전환하면서 사용하면 된다. Ctrl + Shift + \ 단축키를 누르면 좌측 사이드 바 토글을 할 수 있으며, Alt + 1 단축키와 Alt + 2 단축키를 누르면 Layer와 Asset 패널을 이동하는 게 가능하다. Figma의 모든 UI를 끄려면 Ctrl + \ 단축키를 입력하면 된다. 💡페이지 (Pages) 각 페이지는 자체 캔버스를 가지며 디자인을 탐색하고 수정할 수 있으며, 각 페이지에서 개별 프로토타입을 만들 수도 있다. 페이지는 좌..
💡Design Mode 메인 메뉴 Figma 작업 화면에서 좌측 상단 Figma 로고 아래로 화살표를 클릭하면 메인 메뉴가 Drop Down 된다. Quick actions 메뉴는 작업하고 있는 파일 안에 들어 있는 기능을 찾아주는 검색 기능이다. Dev Mode 메인 메뉴 Dev Mode로 전환한 뒤의 메인 메뉴는 Design Mode와 상이하므로 참고한다. 파일 불러오기 메인 메뉴에서 Ctrl + Shift + K 단축키를 이용하여 Place image/video를 빠르게 할 수 있다. 파일을 선택하면 마우스 커서 옆에 썸네일이 보이면서 화면 어디에 이미지를 위치할 것인지 보여준다. 이미지를 삽입할 위치를 정하고 나면 Figma 파일 안에 이미지가 들어가게 되며, 좌측의 레이어 패널에서도 이미지 레이..
