NextJS API 통신 관련 이슈 (with JWT)

0️⃣ INTRO해당 글은 Nextjs v14.2.4 기준으로 작성되었습니다.Nextjs App Router를 사용하였습니다.SSR(Server-Side Rendering)과 ISR(Incremental Static Regeneration) 방식을 활용하는 프로젝트에서 마주친 문제를 다룹니다.1️⃣ 문제 상황리액트에서는 로그인 시 백엔드에서 제공하는 두 가지 토큰(accessToken, refreshToken)을 대부분 웹 스토리지(LocalStorage, SessionStorage)에 저장하여 사용해 왔다. 웹 스토리지에 토큰을 저장하면, API 호출 시 간편하게 토큰을 참조할 수 있어 편리했기 때문이다.이번 프로젝트에서는 Nextjs 를 사용하였고, 초기 렌더링 성능을 높이기 위해 웬만하면 모든 페이..

• format_list_bulleted FE/Trouble Shooting
• · 2024. 12. 4.
• textsms

09. 모던 자바스크립트 Deep Dive (타입 변환과 단축 평가)

⛅️ 타입 변환의 종류명시적 타입 변환(타입 캐스팅): 개발자가 의도적으로 타입의 값을 변경하는 것var age = 25; var age2 = String(25); // '25'var age3 = (25).toString(); // '25'console.log(typeof age, age); // number 25console.log(typeof age2, age2, typeof age3, age3); // string 25 string 25암묵적 타입 변환(타입 강제 변환): 자바스크립트 엔진에 의해서 타입의 값이 변경되는 것// 🚨 암묵적 타입 변환이 기존 원시값을 직접 변경하는것은 아님! 기존 원시값을 사용해서 새로운 원시값을 생성 하는 것! // 10 + '25'를 평가하기 위해 문자열 '10'..

• format_list_bulleted FE/Javascript
• · 2024. 12. 3.
• textsms

정규식 예제

이전에 포스팅 했던 31. 모던 자바스크립트 Deep Dive (RegExp)에 이어서 확실하게 예제를 만들어 짚고 넘어갈 예정이다.1. YYYY-MM-DD 형식의 날짜사용된 패턴^: [] 외부의 ^는 문자열의 시작을 나타냄$: 문자열의 끝을 나타냄\d{N}: \d는 숫자를 의미하며, {N}은 정확히 N개의 숫자가 있어야 함을 나타냄const answer_inputs = ['2024-11-19', '1999-01-01', '2023-12-31'];const wrong_inputs = ['24-11-19', '2024/11/19', '2024-13-01', '2024-11'];const regexp = /^\d{4}-\d{2}-\d{2}$/;2. 영어와 숫자로만 이루어진 문자열사용된 패턴^: 문자열의 시작..

• format_list_bulleted FE/Javascript
• · 2024. 11. 20.
• textsms

31. 모던 자바스크립트 Deep Dive (RegExp)

⛅️ 정규 표현식이란?일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어문자열을 대상으로 패턴 매칭 기능을 제공반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크 가능const tel = '010-1234-567팔';// 정규식 리터럴로 휴대폰 전화번호 패턴 정의const regExp = /^\d{3}-\d{4}-\d{4}$/;regExp.test(tel); // false⛅️ 정규 표현식의 생성정규 표현식 객체를 생성하기 위해선 정규 표현식 리터럴, RegExp 생성자 함수 사용 가능정규 표현식 리터럴은 패턴과 플래그로 구성됨const target = 'Is this all there is?';// 패턴: is// 플래그: i => 대소문자를 구별하지 않고 검색한다co..

• format_list_bulleted FE/Javascript
• · 2024. 11. 19.
• textsms

NextJS 공식문서 파헤치기 (Caching)

0️⃣ Next.js의 캐싱 매커니즘 분류매커니즘설명위치목적지속 기간Request Memoization서버에서 함수의 반환 값을 메모이제이션 하여 저장한다.Server리액트 컴포넌트 트리에서 데이터를 재사용하기 위함요청 라이프 사이클 동안 (각 요청별로 유지)Data Cache서버에서 데이터 자체를 저장한다.Server사용자 요청과 배포 간에 데이터를 유지하여 불필요한 데이터 재요청을 줄인다.영구적이며, 필요에 따라 재검증(revalidation) 할 수 있다.Full Route Cache서버에서 HTML과 RSC Payload를 캐시한다.Server경로를 미리 렌더링하여 렌더링 비용을 줄이고 성능을 향상 시킨다.영구적이며, 필요에 따라 재검증(revalidation) 할 수 있다.Router Cache..

• format_list_bulleted FE/NextJS
• · 2024. 11. 15.
• textsms

NextJS 공식문서 파헤치기 (Linking and Navigating)

NextJS 에서 경로를 탐색하는 방법 컴포넌트 사용useRouter 훅 사용(클라이언트 컴포넌트)redirect 함수 사용(서버 컴포넌트)네이티브 Histroy API 사용1️⃣ 컴포넌트 컴포넌트는 HTML 태그를 확장하여 경로간 prefetching 과 클라이언트 측 탐색을 제공하는 내장 컴포넌트이다.NextJS에서 경로를 탐색하는 기본적이고 권장되는 방법next/link 에서 import 하여 사용할 수 있다.컴포넌트에 href prop을 전달하여 사용 가능 import Link from 'next/link'export default function Page() { return Dashboard}2️⃣ useRouter() 훅클라이언트 컴포넌트에서 useRouter 훅을 통해 경로를 변경할 수..

• format_list_bulleted FE/NextJS
• · 2024. 11. 14.
• textsms