프론트엔드

Next.js 14 App router에 Auth.js v5 적용 후기

인증을 위한 오픈소스next-auth에서 버전이 올라가면서 이름을 바꿨다. 현재 v5는 beta이고 버그가 좀 많은 편이다.인증을 위해 Auth.js (v5)를 프로젝트(Next.js 14 앱라우터 사용)에 적용하며 느낀 Auth.js의 장점, 단점 그리고 문제점과 해결방법을 정리해 봤다.장점CSR 환경에 비해 Next.js를 활용한 SSR환경은 클라이언트단에 추가로 서버단 까지 인증을 다루기가 까다롭다. 이 때 인증을 다루기 편하게 해준다. 인증 관련 로직들이 잘 추상화되어 있다.다양한 Provider, Adapter들을 통해 github, kakao등 소셜 로그인, DB 접근 로그인을 지원한다.단점v5가 beta 버전이다보니 버그가 많다. 적용하면서 커스텀해줘야 하는 부분이 많고 오픈소스 코드를 직접..

브라우저 탭간 통신하는 3가지 방법

챗 지피티로 작성해봤다. 나보다 더 잘 쓰는 것 같다.웹 애플리케이션 개발에서 여러 브라우저 탭 간의 통신은 매우 중요한 요소입니다. 사용자 경험을 향상시키고 실시간 데이터를 동기화하는 데 필수적입니다. 오늘은 브라우저 탭 간 통신을 위한 세 가지 방법인 broadcastMessage, window.postMessage, 그리고 storage 이벤트에 대해 살펴보겠습니다.1. broadcastMessage의 이해1.1. broadcastMessage란?broadcastMessage는 여러 탭 또는 윈도우 간에 메시지를 전송할 수 있는 API입니다. 이 방법은 동일한 출처의 모든 탭에 메시지를 전달할 수 있어 실시간 업데이트가 필요한 애플리케이션에서 유용하게 사용됩니다.1.2. 사용 예시사용자가 한 탭에서..

동시 여러 개의 토큰 리프레시 요청 관리하기

현재 프로젝트에서 JWT 인증 방식을 사용 중이다.api는 공통 클라이언트를 둬서 관리하고, api 응답코드가 401일 경우 토큰 재발급 요청을 보낸다.한 페이지에서 여러 개의 api 요청을 날리는 경우에, 토큰 재발급 요청이 여러개 날아가면서 토큰이 꼬이게 되는 문제가 있었다.이 문제를 api 공통 클라이언트가 1개의 토큰 재발급 요청 프로미스를 공유하도록 해서 해결했다.기존 코드동시에 여러번 재발급 요청...// api 공통 클라이언트if ([401].includes(response.status)) { const accessToken = await reissueToken() // 후처리}// 토큰 재발급asnyc function reissueToken() { // 생략 return fe..

리액트 EventBus 활용

pub/sub 방식의 통신 패턴window의 eventListener 작동과 거의 유사하다.이벤트 발생시 해당 이벤트를 구독하는 곳에서 콜백을 실행한다.구현출처: https://github.com/DawChihLiou/eventbus-demo/blob/main/eventbus/eventbus.tstype EventKey = string | symboltype EventHandler = (payload: T) => voidtype EventMap = Recordtype Bus = Recordinterface EventBus { on(key: Key, handler: T[Key]): () => void off(key: Key, handler: T[Key]): void once(key: Key, hand..

Feature Sliced Design

https://feature-sliced.design/docs프론트엔드 아키텍처, 가독성 좋고 요구사항 변경에 쉽게 대응할 수 있는 구조사용자 앱에만 적용 가능 (디자인 시스템, 라이브러리는 적용 x)구조출처: https://feature-sliced.design/docs/get-started/overviewLayers프로젝트마다 동일한 계층 구조app: 공통 설정, 스타일, providerspages: 페이지, entities, features, widgets를 합쳐서 만듬widgets: 의미있는 블록 (e.g. IssuesList, UserProfile ) entities와 features를 합쳐서 만듬features: business와 관련 있는 유저 상호작용, actions (e.g. SendCo..

데이터 목록 ui 공통 컴포넌트, 훅으로 관리하기

관리자 웹, CMS를 개발할 때 데이터 목록을 많은 페이지에서 보여준다. (예시: shadcn/ui table)Next.js 에서 이 데이터 목록 ui를 공통 컴포넌트, 훅으로 따로 빼서 중복을 줄이고 개발 시간을 빠르게 해봤다.구성데이터 목록 ui는 크게 3가지 영역으로 나눌 수 있다.필터검색어, 상태, 기간, 목록 건수 등 데이터 필터링 액션테이블데이터를 목록 형태로 보여줌페이지네이션데이터 목록 페이지 이동 액션필터, 페이지네이션 영역에서 사용자 액션이 발생 시 테이블에서 보여주는 데이터가 변경되어야 한다.react만 사용한다면 context로 3개 영역을 묶고 데이터를 공유하는 식으로 구현할 수 있다.Next.js를 사용할 때는 다른 방식을 사용할 수 있다. 사용자 액션 발생시에 url search..

Tailwind 간단 정리

이번 프로젝트에서 tailwind를 사용했다.간단하게 정리해봤다.화면 너비에 따라 css 다르게 주기css, scss에 비해 간단하게 반응형 스타일링을 할 수 있다./* css */@media (max-width: 640px) { .gallery { color: 1fr 1fr; }}.gallery { display: grid; grid-templeate-columns: 1fr 1fr 1fr 1fr;}/* tailwind */위를 활용해 가장 많이 사용한 방법들은 다음과 같다.1) Sidenav 반응형일반적으로 cms 사이트에서 태블릿, pc는 sidenav가 보이지만, 모바일에서는 가로가 좁아서 숨기고 헤더에서 목록 버튼을 클릭해 볼 수 있게 한다.tailwind를 사용해 간단하게 처..

웹 접근성

웹 접근성 웹 접근성은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것 - 시각장애인이 보조기구(스크린 리더)로 웹 사용 출처: React 공식 문서 Semantic 태그 div만 쓰지 말고, 적절한 semantic 태그를 사용하자 ex) main, aside, header 등등 aria-role, onclick aria-role WAI-ARIA: https://www.w3.org/TR/wai-aria/#roles_categorization 보조기구가 각 요소의 역할을 알 수 있게 해줌 유효한 role (ex: button)만 줘야 함 aria-unsupported-elements: meta, html, script, style 태그들은 aria-role 미지원 onclick 태그에 onClic..