스토리북 배포하기 공식 문서를 참고 했다.공식문서에 상세하게 절차가 나와 있지만 조금 더 상세하게 알아본다.우선 Next 또는 React 프로젝트를 하나 생성한다.그리고 npx storybook@latest init 명령어를 사용해서 스토리북을 설치한다.latest로

Next.js를 사용하다보면 ServerSide에서 렌더링 할 수 없는 라이브러리를 사용하게 된다. 예를 들면 ToastUI, ReactQuill... 같은 라이브러리들때문에 별도의 컴포넌트를 생성하고 그 컴포넌트를 dynamic import를 해서 가져오는 방법을 사

회사에서 프로젝트 시작 전 진행중인 사이드 프로젝트에서는 다음과 같은 기술 스택을 사용하고 있다.Next.js, Storybook, Emotion(styled)디자인 패턴은 Atomic Design 패턴을 사용하고 있다.컴포넌트를 하나 만들기 위해서는 폴더를 하나 생성

일하고 있는 회사에서 Next.js 프레임워크를 사용하기로 하였고Next.js + Storybook + Atomic Design 패턴을 사용해서 본격적인 프로젝트에 합류하기전에 사이드 프로젝트를 진행하고 있다처음 프로젝트를 생성할 때 기본적인 ESLint만 적용하고,

React에서 제공하는 React.memo는 HOC, 고차 컴포넌트다. 고차 컴포넌트란, 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환해주는 함수다.리액트에서 컴포넌트는 Props, 또는 State에 의해서 자주 렌더링된다. 컴포넌트가 복잡한 로직을 포함하고 있

useCallback 또한 useMemo와 같이 Memoization을 사용해서 리액트 컴포넌트 성능 최적화를 만든다는 점은 동일하다.단 useMemo와 달리 인자로 넘겨주는 콜백 함수 그 자체를 Memoization 한다는 점이 다르다.자바스크립트에서 함수는 객체다.

useMemo를 알기전에 memoization에 대해서 간단하게 알아본다.나무위키에서는 메모이제이션에 대해서 이렇게 설명하고 있다.컴퓨터 프로그래밍 용어로, 동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 꺼내 씀으로써 중복 계산을 방지할

useRef는 크게 두 가지 경우에 사용할 수 있는 것으로 알고 있다.컴포넌트 내부에서 변수를 사용하고 싶을 때, DOM 요소에 접근할 때간단하게 이렇게만 알고 있었고 직접적으로 사용해 본적은 없었지만좀 더 자세하게 알아보고 어떤 상황에서 useRef가 필요하고 어떤

리액트 hooks를 공부할 때 가장 많이 사용되는 훅은 아마도 useState일 것이고 그 다음 가장 많이 사용되는 훅은 useEffect일 것이다.클래스형 컴포넌트와 달리 함수형 컴포넌트에서는 리액트 생명주기 함수를 사용할 수 없으므로 이를 대체하기 위해서 useEf

React를 공부하면서 상태는 컴포넌트에서 가장 중요한 요소다.컴포넌트의 변할 수 있는 값을 만들기 위해서 클래스형 컴포넌트에서는this.state를 활용하기도 하지만 가장 많이 사용하는 방법은함수형 컴포넌트에서 useState hook을 사용하는 방법일 것이다.use

소프트웨어 디자인 패턴에 대해서 공부를 하다보면 가장 많이 보고 듣게되는 디자인 패턴이 MVC 패턴이다.Model, View, Controller로 나누어서 코딩을 한다는 정도만 알고 있었고 이 방법이 많이 사용된다는 것만 알고 있을 뿐 깊게 고민해보지 않았기 때문에이

이번에는 동적 Context를 사용하는 방법에 대해서 알아본다!이전에 만들었던 ColorContext 컴포넌트를 수정한다.기존에는 ColorContext를 사용해서 Provider 컴포넌트를 직접 사용하는 방식이었다면 이번에는 ColorProvider라는 컴포넌트를 만

React 또는 Vue와 같은 SPA 프레임워크/라이브러리를 사용하다보면항상 "상태 관리"에 대해 신경써야하는 경우가 발생한다.컴포넌트는 props를 사용해서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다.만약 트리구조를 갖는 컴포넌트에서 다른 분기에 있는

농산물 실시간/경락 가격정보githubKapture 2022-10-03 at 14 56 10원래는 매일매일 기록하면서 프로젝트를 진행하려고 했지만 기록하는게 정말 어렵운 습관이라는 것을 한번 더 깨달았다..그래서 프로젝트를 진행하면서 기억나는 과정들을 한번에 정리해보려

axios를 사용해서 API를 호출한다. 호출하는 API는 두 종류로 실시간 경락가격과 정산 가격을 확인할 수 있다. 이 표는 정산 가격확인을 위한 API의 요청 변수다. 실시간 경락가격의 경우 정산일지만 제외하면 동일하다.확인해본 결과 정상적으로 데이터를 불러오는

나의 부모님은 약 6년전 귀농을 하셔서 강원도 횡성에서 농업을 하고 계신다.부모님이 농산물을 판매하는 방식은농산물을 전국에 있는 도매시장중 한 곳에 보낸다. 새벽에 경매가 이루어지고 가격이 확정된다.그리고 확정된 가격에서 일부 수수료를 제외한 금액을 부모님이 받는다.이

자바스크립트는 코드를 평가하고 실행하는 과정에서 실행 컨텍스트를 생성한다.전역 실행 컨텍스트부터 함수 실행 컨텍스트까지 코드를 평가해서 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 푸시한 다음 코드를 실행한다. 그리고 실행 컨텍스트 스택에서 팝해서 제거한다.자바스크립

scroll, resize, input, mouse 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 해들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다. 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹

일전에 데브코스를 수강하면서 클로저에 대해 정리를 해본적이 있다.사실상 정리라기 보다는 그냥 책의 내용을 그대로 배껴쓰거나 다른 블로그의 좋은 글들을 그대로 가져왔을 뿐이었다.그때 당시에도 명확하게 클로저란 무엇인가 명확하게 이해하지 못하고 그냥 소멸된 함수의 변수를

실행 컨텍스트를 이해해야 호이스팅이 발생하는 이유와, 클로저에 대해 깊게 이해할 수 있다. 어려운 내용이지만 차근차근 이해해보자자바스크립트의 모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다. 자바스크립트 엔진은 소스코드를 2개의 과정,