현재 Storybook을 사용하여 컴포넌트 문서화를 하고 있는데, 다른 팀원들에게 공유가 되어야 하는 상황이므로 간단하게 배포할 수는 없을까 하다가 chromatic이나 netlify를 사용하면 더 간단하게 배포가능하다고 하여 작업하였다. 스토리북 공식문서에도 chromatic을 사용한 배포 방법을 안내하고 있다. https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ Storybook TutorialsLearn how to build and test UI components with Storybook. Our in-depth frontend guides are created by Storybook maintainers and p..

애뮬레이터에서 앱 실행하기

1. 플러터에 주목하는 이유 1. 높은 개발 효율플러터를 이용해 코드를 작성하면 안드로이드와 iOS 모바일 앱 모두 한 번에 개발할 수 있어서 효율적임. 이렇게 개발한 앱은 어떤 운영체제에서도 똑같은 사용자 인터페이스와 사용자 경험을 제공한다. 또한, 플러터의 핫 리로드 기능덕분에 개발자가 UI를 실시간으로 확인하고 수정하며 앱의 상태를 유지하면서 코드를 변경하는 등 생산성을 획기적으로 높일 수 있음. 2. 역동적이고 유연한 사용자 인터페이스플러터는 다양한 위젯을 제공하므로 사용자 맞춤형 앱을 쉽게 만들 수 있음. 위젯이란 사용자 인터페이스를 선언하고 구성하는 방법임. 위젯은 현재 구성과 상태에 따라 뷰에서 어떻게 보일지를 설명한다. 상태가 바뀌면 위젯은 설명을 다시 작성하고 프레임워크는 이전 설명과 ..

Introduction - React Three FiberReact-three-fiber is a React renderer for three.js.r3f.docs.pmnd.rs 1. React-three-fiberReact-three-fiber는 React 기반으로 Three.js를 사용할 수 있게 해주는 라이브러리입니다. Three.js는 3D 그래픽 렌더링에 있어 가장 널리 사용되는 JavaScript 라이브러리이지만, DOM과는 별개의 렌더링 환경을 필요로 합니다. React-three-fiber는 이를 React의 상태 관리 및 컴포넌트 구조와 통합하여 다음과 같은 장점을 제공합니다.https://r3f.docs.pmnd.rs/getting-started/introduction Introduct..

개발 라이브러리 1. DOM -> React   2. SVG -> D3.js (Data visualizing)https://d3js.org/ D3 by Observable | The JavaScript library for bespoke data visualizationD3 The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibilityd3js.org  3. Canvas ->Three.js 2D -> p5.js , pixi.js (게임업계에서 많이 사용함)   3D -> Three.js , babylon.js https://threejs.org/ Thre..

1. Object.entries() Object.entries() 메소드는 JavaScript에서 객체의 키-값 쌍을 배열로 변환하여 반환하는 메소드.이를 통해 객체의 속성을 손쉽게 반복(iterate)하거나, 배열 형식으로 작업할 수 있다.   2. Object.entries() 사용 예제 1) 기본 사용 const object1 = { a: 'somestring', b: 42, c: "세 번째", d: "네 번째",};console.log(Object.entries(object1)); [["a", "somestring"],["b", 42],["c", "세 번째"],["d", "네 번째"]]2) 반복문 사용 const obj = { a: 1, b: 2, c: 3 };// Object.entrie..

https://www.npmjs.com/package/react-month-picker react-month-pickerMonth-Picker Component offers a popup month selection panel with responsive layouts.. Latest version: 2.2.1, last published: 4 years ago. Start using react-month-picker in your project by running `npm i react-month-picker`. There are 13 other projects in twww.npmjs.com   https://www.react-lite-month-picker.dev/ React Lite Month P..

1. React Fragment? 여러 개의 자식을 하나의 부모 요소로 묶기 위해 사용하는 컴포넌트. HTML 구조 상에 불필요한 DOM 요소를 추가하지 않고도 여러 요소를 그룹화할 수 있게 해줌 import React from "react";function Example() { return ( Title This is a paragraph. );}export default Example;위의 예제에서 와 는 Fragment의 축약 문법으로, 렌더링 시 실제 DOM에 추가적인 노드를 생성하지 않음 이를 활용하기 좋은 예제가 map 을 사용할 때이다.map 의 경우 최상위 컴포넌트에 key를 부여해야하는데  key를 부여하고자 불필요한 div를 만들기보단 React.Fr..

API Routes ?NEXT.JS 에서 API를 구축할 수 있도록 도와주는 기능임 간단한 API를 구축해서 클라이언트, 즉 브라우저로 부터 요청을 받아 데이터베이스에서 데이터를 꺼내온다던가아니면 또 다른 서드파티에서 데이터를 불러와서 전달을 해주는 일련의 동작들을 할 수 있음.   Next앱에서는 pages -> api 라는 폴더 내에 hello.ts를 보면 자동으로 api 파일이 생성되어있는 것을 확인할 수 있는데, // Next.js API route support: https://nextjs.org/docs/api-routes/introductionimport type { NextApiRequest, NextApiResponse } from "next";type Data = { name: str..

Pre-Fetching이란?    -  페이지를 사전에 불러오는 것을 의미한다.    -  예를 들어 현재 페이지에서 링크로 연결되어 있는 페이지를 현재 페이지가 실행될 때 사전 미리 다 불러와 놓는 기   -  페이지 이동을 빠르게 지체없이 하기 위해 NEXT.JS에서 지원한다.   이는 개발자모드의 네트워크 탭에서 눈으로 확인이 가능하다. 이해를 쉽게 하기 위해 아래에는 각 페이지로 이동하는 Link와 버튼을 클릭했을 때 이벤트 핸들러를 통해 이동하는 경우 두 가지를 작성하여 확인해 보겠다. import "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";import { useRouter..