Front-end/React
-
React Preview 환경 구성Front-end/React 2023. 3. 18. 01:41
이전에 작성한 React Production 환경 테스트를 사용하여 build 결과물을 확인하고 있었습니다. 그런데 text compression을 적용하려고 보니 http server 생성을 위해 사용한 spa-http-server가 gzip encoding을 지원하지 않고 있었습니다. 그래서 다른 방법을 찾아보게 되어 그 내용을 정리해보겠습니다. 먼저 spa-http-server는 http-server를 fork하여 변형한 라이브러리였습니다. https://www.npmjs.com/package/spa-http-server spa-http-server A simple zero-configuration command-line http server. Latest version: 0.9.0, last pu..
-
React Component debounce 적용Front-end/React 2023. 3. 5. 02:02
Debounce는 이벤트가 발생할 때 연속해서 발생하는 동일한 이벤트를 무시하고, 일정 시간이 지나면 해당 이벤트를 실행하는 것을 의미합니다. 이를 통해, 이벤트 발생 시간 간격이 짧은 경우 중복 처리되는 문제를 방지할 수 있습니다. React에서 input을 사용하는 경우 debounce를 적용하여 성능을 개선할 수 있습니다. 일반적으로 lodash 라이브러리에서 제공하는 debounce 함수를 사용합니다. lodash 라이브러리는 사이즈가 크기 때문에 lodash/debounce 형태로 import하는 것이 권장되고 있습니다. (https://lodash.com/per-method-packages) import debounc from "lodash/debounce"; const MyComponent ..
-
React CRACO 설정Front-end/React 2023. 2. 9. 01:24
React 프로젝트 생성시 CRA를 많이 사용합니다. React 프로젝트에 필요한 여러 번들 라이브러리 및 설정들을 알아서 해주어 편하기 때문입니다. 하지만 알아서 해준다는 이 장점이 단점이 되기도 합니다. webpack config를 수정해야 하는 경우가 그렇습니다. CRA v5 (react-script v5) 이상부터 사용하는 webpack v5는 더 이상 nodejs 함수의 polyfill을 기본으로 제공하지 않습니다. 이 polyfill을 webpack config에 설정해주어야 합니다. (원칙상 nodejs를 사용하는 server-side의 패키지들은 backend에서 처리하고 frontend에서 받아서 쓰는 것이 맞습니다.) CRA는 webpack 설정을 알아서 해주기 때문에 webpack c..
-
현재 state와 동일한 값으로 업데이트해도 리렌더링되는 경우Front-end/React 2023. 2. 8. 01:07
React 함수형 컴포넌트에서 setState를 사용하면서 다음과 같은 생각을 합니다. 현재 state와 다른 값을 업데이트할 때만 컴포넌트가 리렌더링되는구나 React 공식 문서에서도 똑같이 말하고 있습니다. 업데이트 함수가 현재 상태와 정확히 동일한 값을 반환한다면 바로 뒤에 일어날 리렌더링은 완전히 건너뛰게 됩니다. https://ko.reactjs.org/docs/hooks-reference.html#functional-updates Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 그런데 개발을 하다보면 반은 맞고 반은 틀리다는 것을 알게 됩니다. 빠르게 예제를 통해 알아보겠습니다..
-
React Production 환경 테스트Front-end/React 2023. 1. 28. 02:35
회사에서 development 환경에서는 정상 동작하던 기능이 production 환경에서는 의도하지 않은 동작을 하는 이슈가 있었습니다. 비동기 작업이 포함된 기능이라 타이밍 문제가 있지 않았나 추측을 하였습니다. 어쨌든 어떤 로직 flow 차이로 오류가 발생하는지 분석하고 수정해야합니다. 수정 하나마다 배포하여 테스트를 할 수는 없습니다. 그래서 로컬에서 production 환경을 테스트할 수 있는 방법을 찾아 보았습니다. 원리는 간단합니다. build 후에 간이 http server를 만들어서 결과물을 실행하는 것입니다. http server를 만드는 방법은 여러가지입니다. CRA 공식 문서에서 추천하는 방법은 serve 패키지를 사용하는 것입니다. npm install -g serve serve ..
-
React TestFront-end/React 2023. 1. 18. 22:32
React 개발을 접하면서 가장 신세계이고 귀찮게(?) 느꼈던 것이 테스트 코드 작성입니다. 이전에 C++로 개발할 때는 QA로 넘어가기 전에 미리 작성한 테스트 케이스들을 따라 기본 동작 테스트를 했습니다. 이 과정은 익숙해져도 30분 정도가 소요되고, 사람이 하는 일이다 보니 누락되는 케이스가 발생하는 문제가 있었습니다. 더군다나 QA 넘기기 전인데 기본적인 동작에서 오류가 발생한다면 급하게 처리해야 했기 때문에 골치가 아팠습니다. 그래서 React 개발을 접하면서 테스트 코드가 정말 신세계였습니다. 자동으로 테스트가 가능하고, 매 commit마다 테스트를 할 수 있기 때문에 오류 코드를 미연에 방지할 수 가 있습니다. 문제는 정말 귀찮다는 것입니다. 기능 하나를 구현한다 하면 테스트 코드도 작성해야..
-
React Strict Mode에서 API 사용Front-end/React 2023. 1. 17. 22:50
React 18 부터 Stric Mode development 환경에서는 컴포넌트가 두번 렌더링됩니다. 정확히 말하면 mount → unmount → remount의 lifecycle로 이루어집니다. 공식 문서: https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state Strict Mode – React A JavaScript library for building user interfaces reactjs.org 모든 컴포넌트들에 대해서 unmount한 후 remount 되는 상황을 검사하기 위함입니다. 그래서 useEffect로 lifecycle 로직을 아래와 같이 구현한다면, mount 로직 → unmount 로직 → mount 로직이 수행..