LearnApplyShare

Written by min9nim - Email GitHub Twitter

who writes practical code and builds useful things.

[React] ErrorBoundary

January 15, 2021 -[react, ErrorBoundary]

리액트는 렌더링시 오류가 발생할 경우 오류가 발생했던 일부 컴포넌트만 렌더링을 하지 않는 것이 아니라 전체 화면 모두를 아예 렌더링하지 않는다. 잘못된 화면을 사용자에게 보여주는 것보다는 아예 보여주지 않는 것이 더 나은 사용자경험이라는 판단에서이다. 이것은 리액트가 화면을 렌더링할 때 오류를 만나면 아무것도 그리지 않기 때문에 사용자는 그저 흰화면을 보게 된다는 의미이다.

[React] import React from "react" 제거시 웹스톰 오류

January 15, 2021 -[react, jsx]

CRA4.0 부터는 jsx 를 사용할 때 `import React from 'react'` 를 더이상 사용하지 않아도 된다. 별 것 아닌 것 같지만 그동안 신규 컴포넌트 작성시마다 해당 `import` 구문을 삽입하는 것은 참 귀찮은 일이었기에 무척 반가운 소식이었다. 하지만 해당 구문을 지웠을 때 유독 img 태그 사용시 웹스톰에서 예민하게 경고메세지를 띄어주었다.

[React] `pages` 폴더 경로를 이용한 동적 라우팅

December 18, 2020 -[react, routing, lazy, Suspense]

React 를 이용한 SPA 웹프로젝트를 개발한다고 할 때 react-router 를 이용한 라우팅은 웹 개발시 거의 필수적인 요소라고 해도 과언이 아닐 것입니다. 그리고 프로젝트가 점차 커지고 라우팅 패스가 하나 둘씩 많아 지게 되면, 자연스럽게 클라이언트 라우팅만을 담당하는 별도 컴포넌트를 생성하여 관리하게 될 것입니다.

[js] `e` 를 이용한 숫자표기법이 필요한 이유

November 11, 2020 -[js, number, float]

자바스크립트는 문법적으로 여러가지 애매한 특징들을 가지고 있다. 특별히 소수점 처리가 범상치 않다는 것은 이미 대충은 알고 있을 것이다. 왜 유독 14 에 0.1 을 곱할 경우만 결과가 이상하게 떨어지는 걸까? 위 문제가 현실 세계에서 어떤 문제를 발생시킬 수 있을 지 직접 예시를 통해 확인해 보자.

[react] CRA앱 런타임에 마지막 커밋 정보 표시

November 11, 2020 -[react, commit, craco, child_process]

CRA 앱 런타임에서 해당 앱의 정확한 버젼을 확인하여 비교해 보아야할 필요가 있었다. 간단하게 현재 런타임의 커밋정보를 로그상에 표시하려면 어떻게 해야할까. 런타임 중에 동적으로 커밋버젼을 확인하는 것은 불가능하므로 웹팩 컴파일타임을 커밋정보를 확인하고 이를 환경변수로 전달하는 방법이면 가능하다.

Redux 를 넘어 SWR 로(2)

October 05, 2020 -[react, swr]

앞서 첫번째 글에서는 Redux 를 사용할 때 일반적으로 경험할 수 있는 몇가지 문제들을 언급하였습니다. 이번 글에서는 SWR 은 무엇이고 SWR 이 어떻게 Redux 를 대체할 수 있는 지에 대해 설명해 보겠습니다. SWR은 무엇인가? SWR…

Redux 를 넘어 SWR 로(1)

October 03, 2020 -[react, swr]

이 글에서는 오랫동안 Redux 를 이용한 상태관리를 해오다가 최근 SWR을 만나고, 프로젝트에서 Redux 의존성 모듈을 완전히 제거하기 까지 이른 과정과 경험을 공유하고자 합니다. 이 글이 도움이 되실 독자들 Redux…