리액트
-
Cursor + Next.js 개발설정Tool/VSCode&Cursor 2024. 12. 4. 17:37
1. Next.js 프로젝트 생성하기공식사이트를 보고 생성한다.test 폴더를 생성하고 source 프로젝트를 생성한다.$ mkdir test$ cd test$ npx create-next-app@latest source --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 노드 버전 오류npx: installed 1 in 0.905sUnexpected token '??=' node를 최신 버전으로 변경하고 재시도 한다. 2. 서버 실행$ cd source$ cat package.json$ yarn dev scripts를 확인하고 서버를 실행해 본다. node 버전이 낮으면 아래와 같은 에러가 발생..
-
리액트 & 스토리북 설치Project/Figma+Storybook 2023. 10. 26. 15:05
https://storybook.js.org/docs/react/get-started/install?ref=chromaticblog.ghost.io Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 리액트 프로젝트 생성 $ npx create-react-app test-design-system --template ko 스토리북 등록 $ cd test-design-sy..
-
디자인 시스템 & 스토리북 & 피그마란?Project/Figma+Storybook 2023. 10. 25. 17:16
제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자! Bard. 디자인 시스템 디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다. Bard. 스토리북 https://storybook.js.org/ Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for ..