노력하는 개발자 노력하는 개발자

react

• 리액트 & 스토리북 설치

  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..

  Read More
• 디자인 시스템 & 스토리북 & 피그마란?

  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 ..

  Read More
• NextJS에서 queryString 변경 감지 hook 만들기

  Language/React 2023. 10. 20. 09:43

  NextJS 환경에서 `/aaa?arg1=111` 경로를 `/aaa?arg1=222`로 push 혹은 replace 헀을떄 arg1를 받아오는 hook을 생성하는 과정을 간략하게 정리해 놓는다. useQuery 훅 생성 필자는 p가 팝업레이어 아이디인데 path가 바뀔때 그부분은 제외한 로직이다. export function useQuery() { const router = useRouter(); const [query, setQuery] = useState(router.query); useEffect(() => { const beforeQuery = { ...query }; const afterQuery = { ...router.query }; // 팝업 파라미터 제외 (레이어 팝업) delete be..

  Read More
• React/InfiniteScroll - 외부 collection

  Language/React 2022. 12. 2. 09:49

  InfiniteScroll을 공통으로 사용하기 위해서 Component형식으로 만들고 나중을 위해서 정리해 둔다. InfiniteScroll Component 외부에 collection을 두고 사용하는 방식 부모 컴퍼넌트 import React, { Component } from 'react'; ... class RequestViews extends Component { state = { infiniteResetUseEffect: false, // Infinite 외부에서 리스트를 초기화 해줘야 할 경우 변경 requests: [], ... }; fetchMoreList = (offset) => { return new Promise((resolve, reject) => { const pagination ..

  Read More
• React/InfiniteScroll - 내부 collection

  Language/React 2022. 12. 2. 09:47

  InfiniteScroll을 공통으로 사용하기 위해서 Component형식으로 만들고 나중을 위해서 정리해 둔다. InfiniteScroll Component 내부에 collection을 두고 사용하는 방식 부모 컴퍼넌트 import React, { Component } from 'react'; ... class RequestViews extends Component { state = { infiniteResetUseEffect: false, // Infinite 외부에서 리스트를 초기화 해줘야 할 경우 변경 requests: [], ... }; fetchMoreList = (offset) => { return new Promise((resolve, reject) => { const pagination ..

  Read More
• React/RadioButton Component 만들기

  Language/React 2022. 12. 1. 10:15

  Radio component가 마땅한게 없어서 급조해 봤다. Parent Component import React, { Component } from 'react'; ... class UnitViews extends Component { ... render() { ... return ( { const checked_unit_status = value === '' ? null : [value]; this.setState({ unitStatus: value }, this.props.onUpdate({ UNIT_STATUS: checked_unit_status })); }} /> ... ... ); } } export default wrapWithBase(UnitViews); RadioButton Compon..

  Read More
• React/X-Bar chart 만들기

  Language/React 2022. 12. 1. 10:08

  챠트를 만들어야 하는데 마땅한게 없어서 만들어 보았다. (x,y chart는 간단하니깐!) 데시보드 import React, { Component } from 'react'; ... class DashboardTab1 extends Component { ... render() { const receiptStatusCounts = { PAY_COMPLETE_AMOUNT: 50.0, PAY_COMPLETE_COUNT: 2, PAY_FAIL_AMOUNT: 3.0, PAY_FAIL_COUNT: 1, PAY_WAIT_AMOUNT: 7.5, PAY_WAIT_COUNT: 1, payCompletePercent: 50, payFailPercent: 25, payWatePercent: 25, }; const styleB..

  Read More
• React/DropdownSearch 만들기

  Language/React 2022. 12. 1. 09:54

  간단한 검색이 가능한 dropdown을 만들려고 한다. css .g-dropdown-search-wrap { position: relative; } .g-dropdown-search-wrap > .search-section { display: flex; justify-content: flex-start; align-items: center; } .g-dropdown-search-wrap > .search-section input { width: 100%; padding: 12px 8px; border: 1px solid #D9D9D9; } .g-dropdown-search-wrap > .search-section input:focus { border: 1px solid #25B9B9; } .g-dropd..

  Read More