[NEXTjs] 다국어 페이지 설정하기 (next-i18next)
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..
[Github Actions] CI - 빌드 실패 시 Pull Request 닫고 코멘트 등록하기
얼마전 회사에서 github actions로 CI를 적용하는 일을 맡게 되었다. 이전에 프로젝트에서 자동 배포용으로 github actions를 사용해 본 적은 있지만, 부끄럽게도 문서 한번 찾아보지 않고 블로그에 나와 있는 소스를 복붙한 수준이었기 때문에 이번 기회에 하나하나 알아보며 필요한 스텝들을 붙여나갔고, 많은 공부가 되어서 정리해보고자 한다! Github Actions? Github Actions는 Github에서 제공하는 일종의 툴이다. CI/CD 파이프라인을 구성하기 위한 용도로 많이 알려져 있지만 그 외에도 개발과 관련된 다양한 워크플로우 자동화를 내 입맛에 맞게 커스텀 할 수 있도록 지원해주는 유용한 툴이다. 사전 준비사항 Github Actions 워크플로우를 작성하기에 앞서 몇 가지..
[NEXT.js] next.js의 Image 컴포넌트, 왜 사용할까?
SPA의 서버 사이드 렌더링을 지원하는 React 기반의 Next.js는 Link, Image, Head 등 몇 가지 컴포넌트를 제공하고 있다. 그 중 이미지 컴포넌트에 대해서 알아보자! Next.js의 이미지 컴포넌트, 왜 사용할까? 답은 간단하다. 이미지 최적화를 위해 사용한다. 이미지는 어플리케이션에 있어서 필수적인 존재이다. 이미지가 차지하는 비율에 따라서 어플리케이션의 성능에 중요한 영향을 끼치기도 한다. 그래서 많은 사람들이 이미지의 크기, 포맷, 불러오는 속도 등에 신경을 쓰고, 이미지를 최적화하기 위한 여러 장치들을 마련해 놓고는 한다. Next.js는 위와 같이 이미지 소스와는 별도로 추가해야 했던 최적화 기능들을 이미지 컴포넌트 하나로 손쉽게 사용할 수 있도록 제공해주고 있다. 이미지 ..
[redux-toolkit] createAsyncThunk 콜백 파라미터에 2개 이상 인자 넘기기
회사에서 서버 데이터의 CRUD를 위해 Redux-toolkit을 사용해 볼 기회가 생겼다. Redux를 사용해 본 적이 있었기 때문에 구조를 익히는 데 큰 어려움은 없었지만 createAsyncThunk API를 사용하면서 파라미터에 여러 개의 인자가 넘겨지지 않는 문제에 직면했다. 인자를 1개만 넘길 때는 문제가 없었기 때문에 이 부분에 대해서 공식문서를 살펴보았다. createAsyncThunk createAsyncThunk는 string 타입의 리덕스 액션 타입과 프로미스를 반환하는 콜백함수를 파라미터로 받는 함수이다. createAsyncThunk는 1) 파라미터로 받은 액션 타입을 기반으로 프로미스 생명주기의 액션 타입을 생성하고, 2) 프로미스 콜백함수를 실행시켜 반환된 프로미스를 기반으로 ..
[React] useMemo & useCallback
React를 사용하여 프로젝트를 만들 때 성능을 최적화하기 위한 방법으로 많이 거론되는 것이 useMemo, useCallback, React.memo 훅을 사용하는 것이다. React.memo는 비교적 이해하기 쉬워서 실제로 프로젝트에서도 사용했었는데 useMemo와 useCallback은 잘 이해가 가지 않아 아예 도입하지 않았던 기억이 난다. 개념에 대한 이해 보다는 어떻게 사용해야 똑똑하게 사용할 수 있는 건지 잘 와닿지 않았었다. 어떻게 성능을 최적화하는 걸까? useMemo와 useCallback의 핵심은 메모이제이션이다. 메모이제이션이란? 메모이제이션이란 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램의 실행 속도를 빠르게..
[React] react-query (2) - Queries, Mutations, Query Invalidation
Defaults cached data - 더 이상 useQuery, useInfiniteQuery의 활성 인스턴스가 없는 쿼리 결과 또는 쿼리 옵저버들은 inactive 상태가 되고, 나중에 다시 사 용될 때 캐시에 남아 있게 된다. - 기본적으로 inactive한 쿼리는 5분 후에 GC 처리 된다. 즉 default cacheTime이 5분이라는 의미로, 변경하고 싶다면 cacheTime 옵션에 변경하고자 하는 시간을 설정하면 된다. - default cacheTime: 5분 (1000 * 60 * 5 ms) stale data - useQuery 또는 useInfiniteQuery 훅을 사용해서 캐시된 데이터는 기본적으로 stale한 데이터로 취급한다. - 위와 같은 default option은 전체..