전체 글
Next.js의 캐시 전략
캐시 전략Next.js 공식문서의 caching 부분을 읽고 정리해봤다.https://nextjs.org/docs/app/building-your-application/cachingRequest Memoization컴포넌트 렌더링 중 fetch 요청의 결과 값을 캐싱, GET method만 허용렌더링 중에만 유지컴포넌트 트리에서 같은 fetch 여러 번 해도 실제로는 여러 번 요청 안하고 캐싱된 값을 사용리액트의 기능임Data Cachefetch 요청의 결과 값을 캐싱, 서버에서 들고 있고 여러 사용자의 동일한 요청에 대응하기 위함Next.js가 fetch 기능 확장해서 써서 가능한 기능revalidate, opt out 하기 전까지 계속 유지Revalidating시간 기반으로 Revalidation//..
CJS와 ESM
LLM과 토스 기술블로그 https://toss.tech/article/commonjs-esm-exports-field 포스팅을 활용하여 작성했다.CommonJS(CJS)와 ECMAScript Modules(ESM) 요약 및 비교CJS와 ESM은 자바스크립트에서 모듈을 관리하고 사용하는 두 가지 시스템입니다. 각각의 시스템은 서로 다른 장점과 단점을 지니고 있으며, 이로 인해 서로 호환되지 않는 경우가 많습니다.CJS와 ESM의 비교특성CommonJS (CJS)ECMAScript Modules (ESM)문법require / module.exportsimport / export로딩 방식동기적비동기적Top-level await 지원 여부지원하지 않음지원함Tree shaking 가능 여부어렵다가능파일 확장자..
AI Studio 개발 회고
개요AI 개발을 위한 플랫폼으로, RAG와 프롬프트 엔지니어링, llmops 기능 등을 제공하여 사용자가 AI 솔루션을 쉽게 구축하고 배포할 수 있도록 하는 앱기간: 2024.5 ~ 2024.12 (진행 중)인원: 프론트엔드 1명(나), 백엔드 2명, RAG 모듈 1명, PM 겸 기획자 1명, 디자이너 1명, 영업 1명내 역할: 프론트엔드 전체내가 사용한 기술:모노레포 - turborepo, pnpmSSR, SSG, CSR - Next.js 14 앱 라우터디자인 시스템, 스타일링 라이브러리 - shadcn/ui, tailwind상태 관리 - react query, zustand타입 안전성 - typescript폼 관리 - react hook form, zod테스트 - rtl, Jest개발모노레포 구축처음..
vscode 프론트엔드 개발에 유용한 익스텐션 모음
Auto Close TagHTML 태그를 쓰면 자동으로 닫아준다. 입력 -> Auto Rename TagHTML 태그 이름 변경시 닫는 태그 이름도 자동으로 변경Auto ImportImport 문 자동 완성ESLintvscode에 IDE 오류 표시, 저장시 자동 린트 기능 제공Error Lens코드 에러 발생 부분 옆에 무슨 에러인지 실시간으로 표시Git GraphSource Control 탭에서 상단 View Git Graph 클릭하여 깃 그래프 볼 수 있음GitLens -- Git supercharged코드 옆에 누가 언제 커밋했는지 내용 표시 - 내역 확인하기 좋음Import Costimport 문 옆에 패키지 용량 표기Prettier코드 포맷팅Tailwind CSS IntelliSensetail..
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..