Storybook 알아보기

최근에 디자인 시스템에 관심이 생겨서 관련 정보를 찾아보다가 Storybook을 알게 되었습니다. 호기심이 생겨 공식 문서를 통해 학습하여 정리했습니다.StorybookStorybook은 데이터, API 또는 비즈니스 로직으로 벗어나 UI 컴포넌트와 페이지를 독립적으로 구축할 수 있는 프론트엔드 워크샵으로 UI 개발, 테스트 및 문서화를 제공해준다.내구성이 뛰어난 UI를 개발할 수 있다.팀이 재사용할 수 있도록 UI를 문서화할 수 있다.스토리를 통해 UI가 실제로 어떻게 작동하는지 공유할 수 있다.CI 단계에 추가하여 UI 테스트를 자동화할 수 있다.스토리를 한번 작성하면 다양한 개발 환경에서 재사용할 수 있다.프론트엔드 워크샵애플리케이션 환경 외부에서 UI 코드를 작성할 수 있는 환경Storybook ..

• format_list_bulleted 개발
• · 2024. 6. 11.
• textsms

핵심 웹 지표(Core Web Vitals) 정리

모던 리액트 Deep Dive 12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표를 읽고 정리한 내용입니다. 사용자가 웹사이트에 접속했을 때 공통적으로 기대하는 사항방문한 목적을 손쉽게 달성할 수 있어야 한다.목적을 달성하는 데 걸리는 시간이 짧아야 한다.개인정보가 누출되는 등의 사고 없이 보안이 철저해야 한다.즉, 아무리 좋은 기술 스택을 쓰더라도 사용성이 불편하면 사용자는 해당 서비스를 사용하지 않습니다. 따라서 개발자는 웹사이트의 성능에 주의를 기울여야 합니다. 과거 웹사이트의 성능은 단순히 웹사이트의 로딩 속도, 방문이나 결제 같은 실제 목표로 이뤄지는 전환율 등으로만 지엽적으로 판단했습니다. 그러나 몇 년전부터 구글은 핵심 웹 지표(Core Web Vital)라고 하는 웹사이트의 우수한 사..

• format_list_bulleted 개발
• · 2024. 5. 28.
• textsms

JSON Server와 LowDB, JSON Server Auth로 가상의 백엔드 서버 구현

1. JSON Server가짜 REST API를 생성하는 데 사용되는 도구로 이를 통해 간단한 JSON 파일을 사용하여 가상의 백엔드 서버를 구현할 수 있다.설치최신 버전에서 지원하지 않는 기능이 있어 아래의 버전으로 설치했다.npm install json-server@^0.17.32. LowDBNode.js 기반의 간단한 JSON 데이터베이스로, JSON 파일에 데이터를 저장하고 쿼리를 수행할 수 있다. 즉, 파일 기반의 데이터베이스를 생성하고 관리하는 도구이다.설치버전 1를 제외하고 모두 ESM 모듈 시스템을 사용하고 있어 CommonJS 모듈 시스템에서 사용할 수 있는 버전 1을 설치했다. (추후 sqlite로 마이그레이션 할 예정이다.)npm install lowdb@13. 가상의 백엔드 서버 구..

• format_list_bulleted 개발
• · 2024. 2. 13.
• textsms