react

서론이 문서는 next-i18next을 기반으로 next.js page router에 다국어 기능을 적용하는 과정을 다룹니다.  세팅하기Nextjs에서는 i18n 라우팅을 제공하고 있습니다. 이 기능을 도메인 혹은 pathname을 통해 설정 언어를 url로 표현할 수 있습니다.url을 통한 다국어 기능에는 몇 가지 이점이 있습니다. 1. SEO 최적화URL에 매칭되는 페이지의 언어가 결정되기 때문에 메타 테그()를 통해 해당 페이지 언어를 명시할 수 있어 해당 언어의 검색결과에 노출될 수 있습니다. 2. 링크 및 북마크 생성 가능설정된 언어가 URL에 담겨있기 때문에 해당 언어로 된 링크를 생성할 수 있습니다.  3. 번역 결과를 캐싱할 수 있음해당 페이지 결과를 캐싱할 수 있다는 이점은 여러 가지면에..

서론쇼핑몰에서 "최근 본 상품" 배너를 보신 적 있을겁니다.어떤 페이지로 이동하든 항상 사이드 영역에 존재하면서 새로운 상품을 클릭할 때 마다 업데이트 해야합니다.이걸 리액트 프로젝트에서 어떻게 구현해야할까요?상품의 클릭 이벤트 시점에 클릭된 상품 정보를 최근 상품 목록 컴포넌트에 전달해야 합니다.물론 state lifting, contextAPI,redux 등의 방법이 떠오릅니다. 하지만 이 모든 방법이 여의치 않은 상황이라면 event 버스를 이용한 방법을 고려해볼 수 있습니다.Event Bus이벤트 버스이벤트 버스(Event Bus)는 소프트웨어 아키텍처 패턴 중 하나로, 애플리케이션 내의 다양한 컴포넌트들이 서로 통신할 수있도록 하는 중앙 허브 역할을 합니다. const EventBus = { ..

서론next13은 React Server Component(이하, RSC)을 중심으로 app router라는 큰 변화를 가지고 왔습니다.RSC과 server-action의 등장으로 인해 이젠 서버사이드 데이터 패칭의 범위가 확 늘어났습니다. 더불어 이런 서버사이드 요청에 대한 캐싱을 지원하기에 그럼 이제 react-query는 next-js에서 필요없을까? 하는 생각을 하게 됩니다.결론 부터 말하지만 역할은 축소됐지만 여전히 필요하다라고 말씀드리고 싶습니다. react-query는 클라이언트의 요청 서버 사이드의 요청은 next.js에서 처리할테니까요이 부분에 대해서 next.js의 data-fetching 파트에서도 다음과 같이 설명하고 있습니다swr 혹은 react-query를 이용해 클라이언트에서 ..

의존성 역전에 대해서  들어보신적 있을겁니다.어떤 모듈이 가지고 있는 의존성을 격리하여 외부로 부터 주입받는 형태를 보통 의존성 역전이라고 합니다.왜 이런 설계가 필요할까요? 우선 좋은 설계에 대해 짚고 넘어가보겠습니다.우리 모두가 공감할 수 있는 좋은 설계는 "기능이 동작하면서 내일 쉽게 변경할 수 있는 코드"라고 생각합니다. 확장은 쉬우면서 수정에는 닫혀있는 객체 지향에서의 개방 폐쇄 원칙도 이를 뒷받침하는 원칙중 하나입니다. 좋은 설계, 기능이 동작하면서 내일 쉽게 변경할 수 있는 코드 최악의 상황을 생각해보겠습니다. 이번 주에 새로운 기능을 개발해야 하는데 이 기능과 연결된 모듈이 \10개가 넘고 심지어 보이지 않는 숨은 의존성까지 존재합니다. 끔찍하죠?우리가 바라는 상황은 수정해야 하는 기능에 ..

서론컴포넌트를 개발하다보면 서로 독립적으로 선언된 컴포넌트가 관계를 갖는 경우가 있습니다.html태그에서 select태그와 option태그의 관계를 예로 들 수 있습니다.option은 select에 종속된 요소로 select요소의 클릭 상태를 공유받으며 이러한 상태 공유가 캡슐화되어 있습니다. key1 key2 key3  이런 암묵적 관계의 표현을 리액트 컴포넌트에서 할 수 없을까요? 이러한 접근이 바로 Compond Pattern입니다. 이 패턴은 상위 컴포넌트와 하위 컴포넌트 간의 관계를 직관적으로 표현합니다.아래 코드는 chakra-ui의 menu  컴포넌트 입니다. 첨부된 이미지의 UI를 상상해보세요!  }> Actions Download Create a Copy M..

서론"useEffect에 대해 설명해주세요"라는 질문을 받으면 어떤 대답을 해야 할까요?리액트 공식 문서에 따르면 effect는 함수 컴포넌트와 외부 시스템과의 동기화를 목적으로 만들어졌다고 합니다.여기서 외부 시스템이란 DB,네트워크, 브라우저 DOM등이 될 수 있습니다. react 앱을 개발 서버에서 실행하게 되면 useEffect가 의존성 배열과 상관없이 두번 실행되는 것을 경험하게 됩니다.이 부분 역시 동기화라는 키워드와 연결됩니다. 즉 이팩트 함수와 클린업 함수를 통해 subscrib와 unsubscrib가 올바르게 동작하는지 확인하기 위한 처리인 것이죠. 이제 부터 몇 가지 사례를 통해 불필요한 useEffect에 대해 알아보겠습니다. 1. 파생 상태 처리function Form() { co..

멀티 탭간 인터렉션에 대해 고려해야하는 순간이 있습니다.독립적 탭에서 발생하는 인터렉션을 구독해서 화면을 업데이트(예를 들면 받은 좋아요 혹은 새로운 메세지)를 해야할 수 있습니다.그럴 때 유용한 기능이 Broadcast Channel API입니다.Broadcast Channel API는 동일 origin을 가진 웹페이지간 통신 기능을 제공합니다.채널 명이 동일하다면 해당 채널에 대한 메세지를 수신할 수 있기 때문에 멀티 탭간 통신에 유용한 API 입니다.이 기능을 이용해서 React 앱에서의 멀티 탭 통신 예제를 만들어 보도록 하겠습니다.BroadcastChnnelManager를 만들어 중앙에서 모든 채널을 관리하도록 의도했습니다.BroadcastChnnelManager의 목표는 앱에서 이용되는 채널과..