너와 나의 프로그래밍

App Router NestedLayout?🤔 기존 12버전 아래의 Page Router의 정보는 많은데 아직 13버전의 App Router의 대한 NestedLayout의 정보가 많이 없었다. 물론 Next.js의 공식문서를 읽으면 되긴 하는데 읽어도 이해가 잘 안가기도 하고... 그래서 결국 찾던 도중에 App Router의 Nested를 알게 되었고 방법을 소개하려고 한다. Next.js 13 😳 "RootLayout에는 Layout Component를!! Children Layout에는 NestedLayout Component와 page를!!" 1. 디렉토리 최상단 layout.jsx(tsx)에 Layout Compoent를 적용하자. 2. 실제 사용할 Layout Component를 구성. 대부..

NestedLayout?🤔 거의 모든 웹 어플리케이션에서 SideBar나 NavBar를 구현해 Layout은 그대로 두되 안에있는 페이지만 바꾸는 SPA 방식을 많이 채택한다. React.js에서는 SPA 방식의 구현이 당연하지만 Next.js는 SSR의 렌더링 방식이라 조금 다른데 이걸 Next.js도 알고 있는지 여러가지 방법을 제시해주고 공식문서에도 아주 잘 설명이 되어있다. 하지만 그것보다 더 간단하게 기존 13버전 위/아래 버전의 두가지 방법을 소개해볼까 한다. Next.js 13 ↓😳 "getLayout"을 사용하는 방법이 가장 편하고 깔끔했다. 1, _app.jsx(tsx)에 getLayout을 적용하자. 2. 실제 사용할 Layout Component를 구성. 3. NestedLayout ..

API를 호출해서 Blob 타입의 Response 값을 받을 때 다운로드 기능을 구현하는 과정을 설명하려고 한다. 예를들어 "엑셀" 다운로드를 할 때 서버에서 만들어진 Excel을 클라이언트단에서 즉시 다운로드 기능을 구현하려면 아래와 같이 작업하면 된다. // API를 호출하는 코드 const getExcel = useCallback(async () => { try { const blob: Blob = await api.getExcel(); // 타입 명시 const url = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.setAttribute("download", "mem..

Pagination 기능은 정말 프론트엔드 개발에 있어서 피할 수 없는 개발중에 하나라고 생각한다. 항상 개발을 할 때 마다 페이징 처리가 은근히 어렵다는걸 항상 느끼는데 구글링을 해봐도 각자 방식이 너무 다를뿐더러 너무 코드도 뒤죽박죽이라 최대한 깔끔하게 최대한 쉽게 구현을 해봤다. 개발 환경은 React.js와 Typescript를 기본적인 디자인은 Styled Component를 사용했다. 조건 🤔 다양한 페이지네이션의 조건들이 있지만 이번에 구현해본 조건은 아래와 같다. 한 페이지 안에 10개씩 보여주기 페이지의 번호는 5개씩 보여주기 페이지 번호를 눌렀을 때 해당 페이지를 보여주기 페이지 번호의 양 옆에 뒤로 건너뀌기, 뒤로 가기 / 다음 페이지로 가기, 앞으로 건너뛰기 첫 시작과 맨 끝으로 갔..

문제😳 Next.js에서 지원하는 Link를 활용하여 getServerSideProps를 실행하는 페이지로 이동을 했을 때 getServerSideProps에서 API가 정상적으로 호출되지 않는 문제가 발생했다. 분명 Next.js 공식문서에서는 getServersideProps는 next/link와 next/router로 호출한 페이지에서 정상적으로 실행된다고 나와있었다. next/router로 이동한 페이지에서는 getServerSideProps가 정상적으로 동작했고 이동한 페이지에서 새로고침을 해도 정상적으로 API를 호출했지만 next/link로 이동한 페이지에서는 이동했을 때는 최초 페이지를 호출 했을 때는 정상적으로 동작했지만 뒤로가기를 눌러 다시 페이지를 이동했을 때는 API가 제대로 호출되..

JWT 방식과 NextAuth 라이브러리를 활용한 로그인 기능을 개발하면서 Cookie를 통해 Refresh Token을 재발급해 로그인을 하는 기능을 구현하는 과정에서 Cookie가 브라우저에 제대로 박히기 않는 문제가 발생했다. 문제😳 1. Server-Side로 로그인 API 호출 -> Repsonse 값으로 Access Token 값과 Cookie에 Refresh Token을 브라우저에 삽입. 2. Response Header에 Refresh Token의 Cookie 값이 정상적으로 들어온 것을 확인. 3. 하지만 실제 브라우저에는 Cookie가 Setting되지 않는 문제가 발생. 4. 혹시 몰라 Client-Side에서 로그인 API를 호출 -> Cookie에 Refresh Token이 정상적..