블로그 이사 준비중..🥹
Nextjs로 한땀 한땀 블로그를 만들고 있습니다! 10월 중순쯤에 1차 개발을 마무리하고 이전할 예정입니다이잉
트리쉐이킹으로 ECharts 번들 사이즈 최적화하기 (+@next/bundle-analyzer)
최근 회사에서 약 3개월에 걸쳐 진행한 프로젝트가 마무리 되었습니다. 잠깐의 여유가 생겨 프로젝트 회고를 하던 중 성능 최적화에 대한 얘기가 나왔습니다. 프로젝트는 크게 1) 고객사에서 사용하는 페이지와 2) 관리자 계정이 사용하는 어드민 페이지로 나뉘어져 있는데, 고객사 페이지는 데이터를 시각화하여 대시보드의 형태로 제공하고 있는 페이지가 많아 받아오는 데이터가 크고, 실시간으로 데이터를 받아서 실시간 차트를 그려주는 페이지도 있기 때문에 속도가 중요했습니다. 성능을 최적화하는 방법에는 여러가지가 있겠지만 우선 번들 사이즈를 줄이는 방법을 택했습니다. 이유는 두 가지인데, 1. 비교적 적은 리소스를 투입해서 2. 서비스 운영에 큰 리스크를 주지 않으면서도 가시적인 효과를 기대할 수 있기 때문입니다. 번..
[NEXTjs] svg를 ReactComponent처럼 사용하는 방법 (+storybook)
React 기반의 프로젝트에서는 .svg 에서 이미지를 import해서 바로 컴포넌트의 형태로 사용할 수 있지만 React 기반의 프레임워크인 NEXTjs 어플리케이션에서는 위의 방식대로 svg를 사용할 수 없습니다. svg 파일을 컴포넌트의 형태로 사용하면 svg의 속성들을 동적으로 변경해주어야 할 때 손쉽게 props를 내려줄 수 있어 편리합니다. React에서 사용하던 것처럼 nextjs에서 svg 파일을 컴포넌트처럼 바로 사용하기 위한 몇 가지 방법을 소개합니다. 1️⃣ @svgr/webpack 1. @svgr/webpack 라이브러리 설치 yarn add --dev @svgr/webpack npm install @svgr/webpack -D 2. next.config.js 설정 파일의 포맷이 s..
[react-query] useQuery와 Promise.all을 활용한 리렌더링 최적화
본 게시글의 내용은 React v17까지만 해당합니다. React v18부터는 Promise에도 automatic batching을 지원하기 때문에 2개 이상의 API를 동시 호출해야 할 떼 useQuery 여러번 또는 useQueries를 사용해도 리렌더링이 한 번밖에 되지 않습니다. 🥲 회사에 들어온 지도 4개월이 다 되어간다. 마침 내가 입사한 시기가 운이 좋게도 jQuery로 되어 있던 레거시 프로젝트를 Nextjs로 막 옮기려고 하고 있던 참이었어서 덕분에 일종의 마이그레이션을 경험할 수 있었다. 프로젝트를 옮기면서 동시에 기능에 필요한 API들도 큰 변경이 있었는데, 바로 API 모듈화였다. 아래와 같이 되어 있는 페이지를 상상해보자. 한 페이지를 완성하기 위해 A, B, C, D, E 총 5..
[React] React v18 - 빠르게 둘러보기
Concurrency Concurrency는 새로워진 React v18 의 코어 컨셉이라고도 볼 수 있다. 공식 문서에서 또한 v18에 대해서 소개하면서 Concurrent React가 무엇인지 자세히 설명하고 있다. Coucurrency는 아래와 같은 사전적 의미를 가지고 있다. • 동시성 • 동시 실행 • 병행성 그렇다면 리액트에서의 동시성이란 무엇을 의미할까? Concurrency란 어떠한 기능이 아닌, 동시에 여러 가지 버전의 UI를 준비할 수 있게 해주는 메카니즘이다. 가장 큰 변화는 리액트의 렌더링 모델에 있다. 이전에는 오직 하나의 트랜잭션만이 직렬로 실행되면서 중간에 엔지니어가 개입할 수 없는 렌더링 구조를 띄고 있었다면, v18부터는 렌더링이 시작되었다 하더라고 임의로 중간에 멈추거나, ..
로케일(Locale)이란? 국제화(internationalization)와 지역화(localization)
로케일(Locale)이란? 로케일이란 사용자 인터페이스(UI)에서 사용되는 언어(ISO 639-1 codes 표준 형식), 지역 설정(ISO 3166-1 표준 형식), 출력 방식(Character Set 또는 ISO 8859-1, UTF-8 등의 인코딩 식별자) 등을 정의하는 문자열을 말한다. OS에서 로케일과 관련된 환경 변수들을 사용해 로케일 관련 설정들을 변경할 수 있으며, 설정된 로케일에 따라 프로그램이 지원하는 메시지, 시간 포맷, 통화 등의 출력이나 동작 등을 제어할 수도 있다. 로케일 설정은 특정 언어의 입출력에 영향을 줄 수도 있기 때문에 영어 이외의 언어를 사용하는 경우 적절한 값을 지정해야 한다. 로케일 형식 language[_territory][.codeset][@modifier] 한..