Dog foot print

엄청난양의 보일러 플레이트 코드. redux는 flux-pattern을 이용한 전역 상태관리 라이브러리이다. [React, 라이브러리] react-redux . redux를 사용하기 위해서는 action , reducer, store 의 관리를 위해 반복적인 코드 작성이 필요하다. 새로운 액션을 추가할때 마다, 액션 타입을 정의하고, 액션 생성자 함수를 만들어야 하며, 리듀서에서 해당 액션을 처리해야한다. 아래는 간단한 카운터를 구현한 “리듀서”이다. // Actions const INCREASE = "INCREASE"; const DECREASE = "DECREASE"; const UPDATE = "UPDATE"; const genAction = (action: string, f?: (arg?: T1)..

nextJs/Image를 storybook에서 사용 할 때. Next.js에서는 import 키워드로 소스 파일로 끌어 올 때 StaticImageData라는 타입으로 전달 받게 된다. 이 타입의 형태는 다음과 같다. interface StaticImageData { src: string height: number width: number blurDataURL?: string } 보통 이 StaticImageData를 이용해서,image태그를 사용하지 않고 next/Image와 함께 사용한다. Next.js/Image는 이미지의 경로를 문자열 혹은 StaticImageData타입을 Props.src로 받기 때문에, 아래와 같이 보통 작성한다. import Image from "next/image"; im..

Memoization이란 ? useCallback, useMemo, React.memo 와 같은 기능에서 사용되는 memo 라는 개념은 파라메터를 기준으로 이전에 리턴한 해당 함수의 결과값을 리턴하는 개념이다. 순수함수는 파라메터가 동일할 때, 리턴값은 언제나 같다”라는 특징이 있다. 이런 특징을 이용해 연산이 오래걸리는 함수가 이전에 동일한 파라메터로 연산한 결과가 있다면 이전 리턴값을 줌으로써 연산에 필요한 시간을 단축할 수 있게 된다. 아래는 버튼을 클릭 할 때 마다 input값을 숫자로 변경해 O(2^n) 의 시간 복잡도를 가지는 fivo 함수의 결과가 출력되는 코드이다. function fivo(n : number) : number{ console.log("FivoStart") function ..

useContext란 ? useContext는 react에서 제공하는 훅으로, 하위 컴포넌트에게 context를 제공하는 훅입니다. “context”란 직역하면 환경이라는 의미이지만, 여기서는 리액트에서는 각 컴포넌트가 참조할 수 있는 데이터 모음이라고 생각하시면 될 것 같습니다. 아래의 코드는 프롭스를 하위 컴포넌트로 전달하는 예시입니다. import React from 'react' function End({text} : {text : string}){ return ( {text} ) } function Middle({text} : {text : string}){ return ( ) } export default function App() { const text = "Hello world"; retu..

useEffect 란 ? useEffect 함수는 렌더링 이후 컴포넌트와 외부의 시스템을 연결해주기 위해 만들어진 훅이다. 별도로 컨트롤이 가능하다면, “useEffect”를 사용해, 사이드 이펙트를 발생시키기도 한다. useEffect Types function useEffect(effect: EffectCallback, deps?: DependencyList): void; // type EffectCallback = () => (void | Destructor); type DependencyList = ReadonlyArray; // type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }; useEffect는 첫번째 인자인 effect는 렌더..

컴포넌트내에서의 상태 갱신 React를 접하는 이들이 가장 먼저 사용해보는 컴포넌트의 상태를 관리하는 Hook이다. 아래의 간단한 코드를 보자. 아래의 예제는 두개의 버튼을 두어, numb라는 값을 1씩 증가시키거나, 감소시킨다. import React from 'react' export default function App() { let numb = 0; return ( {numb} { numb += 1 console.log(numb) }}> Increase { numb -= 1 console.log(numb) }}> Decrease ) } 아래는 결과이다. 우리는 화면에 numb가 버튼의 클릭에 따라 갱신되기를 기대했지만, 화면에 갱신은 되지 않지만, 값은 실제로 변하고 있다. 함수형 컴포넌트에서 돔..

기본 폴더 구조 및 파일 구조 Note : /src/Components/Header.jsx , /src/Utils/Math.ts, /src/style/main.css , /src/Utils/index.ts , /src/UI/Button.tsx 를 제외한 파일들은 이전 포스팅에서 내용을 확인해주세요 Note : 이 포스팅은 webpack-dev-server 사용 할 수 있도록 webpack.config.js와 의존성이 일부 설치되어 있습니다. 이전 포스팅에서 내용을 확인해주세요. 폴더 구조 . ├── babel.config.js ├── dist │ ├── bundle.js │ └── index.html ├── package.json ├── public │ └── index.html ├── src │ ├──..

CRA의 문제점 Tip : Jest는 테스팅 도구이다. Tip : Parcel, Webpack, Rollup은 여러 파일들을 필요한 소수의 파일로만 다시 묶어주는 번들러이다. Tip : Babel은 브라우저에서 지원하지 않는 최신문법이나 JSX문법을 브라우저가 읽을 수 있도록 변환해주는 트랜스파일러이다. Tip : 이 시점에서 위 3개의 Tip을 이해하지 않아도 된다. CRA로 시작하기 : 설치 - React 설치 - React A JavaScript library for building user interfaces reactjs-kr.firebaseapp.com Create React App(이하 CRA)는 공식 홈페이지에서도 React를 시작 할 때, 추천하는 개발 환경에 필요한 라이브러리를 설치해주..