time to wander

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 v17까지만 해당합니다. React v18부터는 Promise에도 automatic batching을 지원하기 때문에 2개 이상의 API를 동시 호출해야 할 떼 useQuery 여러번 또는 useQueries를 사용해도 리렌더링이 한 번밖에 되지 않습니다. 🥲 회사에 들어온 지도 4개월이 다 되어간다. 마침 내가 입사한 시기가 운이 좋게도 jQuery로 되어 있던 레거시 프로젝트를 Nextjs로 막 옮기려고 하고 있던 참이었어서 덕분에 일종의 마이그레이션을 경험할 수 있었다. 프로젝트를 옮기면서 동시에 기능에 필요한 API들도 큰 변경이 있었는데, 바로 API 모듈화였다. 아래와 같이 되어 있는 페이지를 상상해보자. 한 페이지를 완성하기 위해 A, B, C, D, E 총 5..

Concurrency Concurrency는 새로워진 React v18 의 코어 컨셉이라고도 볼 수 있다. 공식 문서에서 또한 v18에 대해서 소개하면서 Concurrent React가 무엇인지 자세히 설명하고 있다. Coucurrency는 아래와 같은 사전적 의미를 가지고 있다. • 동시성 • 동시 실행 • 병행성 그렇다면 리액트에서의 동시성이란 무엇을 의미할까? Concurrency란 어떠한 기능이 아닌, 동시에 여러 가지 버전의 UI를 준비할 수 있게 해주는 메카니즘이다. 가장 큰 변화는 리액트의 렌더링 모델에 있다. 이전에는 오직 하나의 트랜잭션만이 직렬로 실행되면서 중간에 엔지니어가 개입할 수 없는 렌더링 구조를 띄고 있었다면, v18부터는 렌더링이 시작되었다 하더라고 임의로 중간에 멈추거나, ..

Locale이란? 로케일은 사용자 인터페이스에 사용하기 위해 언어, 지역, 출력 방식 등을 정의한 문자열을 말한다. 로케일에 대한 자세한 설명은 이 포스팅에서 볼 수 있다! 로케일(Locale)이란? 국제화(internationalization)와 지역화(localization) 로케일(Locale)이란? 국제화(internationalization)와 지역화(localization) 로케일(Locale)이란? 로케일이란 사용자 인터페이스(UI)에서 사용되는 언어(ISO 639-1 codes 표준 형식), 지역 설정(ISO 3166-1 표준 형식), 출력 방식(Character Set 또는 ISO 8859-1, UTF-8 등의 인코딩 식별자.. zubetcha.tistory.com Nextjs의 Inte..

SPA의 서버 사이드 렌더링을 지원하는 React 기반의 Next.js는 Link, Image, Head 등 몇 가지 컴포넌트를 제공하고 있다. 그 중 이미지 컴포넌트에 대해서 알아보자! Next.js의 이미지 컴포넌트, 왜 사용할까? 답은 간단하다. 이미지 최적화를 위해 사용한다. 이미지는 어플리케이션에 있어서 필수적인 존재이다. 이미지가 차지하는 비율에 따라서 어플리케이션의 성능에 중요한 영향을 끼치기도 한다. 그래서 많은 사람들이 이미지의 크기, 포맷, 불러오는 속도 등에 신경을 쓰고, 이미지를 최적화하기 위한 여러 장치들을 마련해 놓고는 한다. Next.js는 위와 같이 이미지 소스와는 별도로 추가해야 했던 최적화 기능들을 이미지 컴포넌트 하나로 손쉽게 사용할 수 있도록 제공해주고 있다. 이미지 ..

회사에서 서버 데이터의 CRUD를 위해 Redux-toolkit을 사용해 볼 기회가 생겼다. Redux를 사용해 본 적이 있었기 때문에 구조를 익히는 데 큰 어려움은 없었지만 createAsyncThunk API를 사용하면서 파라미터에 여러 개의 인자가 넘겨지지 않는 문제에 직면했다. 인자를 1개만 넘길 때는 문제가 없었기 때문에 이 부분에 대해서 공식문서를 살펴보았다. createAsyncThunk createAsyncThunk는 string 타입의 리덕스 액션 타입과 프로미스를 반환하는 콜백함수를 파라미터로 받는 함수이다. createAsyncThunk는 1) 파라미터로 받은 액션 타입을 기반으로 프로미스 생명주기의 액션 타입을 생성하고, 2) 프로미스 콜백함수를 실행시켜 반환된 프로미스를 기반으로 ..