Fe-Dev

Promise.all 의 익숙함의 속아 소중함을 잃지 말고 직접 구현해보기// 모든 Promise가 성공하면 결과 배열을 반환하고,// 하나라도 실패하면 즉시 reject const promiseAll = (promises) => { const result = []; return new Promise((resolve, reject) => { let completeLen = 0; // 완료된 Promise 개수 for (let i = 0; i { result[i] = res; // 인덱스 순서대로 결과 저장 completeLen += 1; // 완료 개수 증가 // 모든 Promise가 성공하면 resolve ..

개요개인 프로젝트를 App Rotuer 로 마이그레이션하면서 아키텍처의 중요성을 다시한번 깨닫고 FSD(Feature-Sliced Design)을 고민해보았다. 기존 프로젝트 구조는 Next.js Pages Router 의 공식 Docs 를 보고 큰 고민없이 확장해나간 모놀리식 구조였다.nextjs-keylog ┣ components ┣ config ┣ hooks ┣ pages ┃ ┣ [userId] ┃ ┃ ┣ posts ┃ ┣ api ┃ ┃ ┣ auth ┃ ┣ resetPassword ┣ public ┃ ┣ font ┃ ┣ icon ┣ reducer ┣ store ┣ styles ┣ utils[기존 Pages Router 기반 구조] 이런식의 구조를 구성하다보니 프로젝트가 커질수록 컴포넌트가 계속 늘어..

개요Next.js v15를 기반으로 개인 프로젝트를 진행하면서 게시물들을 블러올 때 무한 스크롤을 구현할 상황이 생겨서 IntersectionObserver 를 기반으로 무한 스크롤을 구현하였다. 근데 게시물을 클릭하여 상세 페이지로 이동 후 뒤로가기를 하니 이전 스크롤 위치가 아닌 최상단으로 스크롤이 올라가는 현상이 있었다. 이런 현상은 사용자 경험에 있어 매우 좋지 않다. 개선하기 위해 Next.js 에서 혹시 제공해주는 기능이 있는지 공식 Docs 를 먼저 뒤져봤다.// next.config.jsmodule.exports = { experimental: { scrollRestoration: true }}실험적 기능으로 scrollRestoration 옵션이 있었다. 해당 기능을 켜고 테스..

개요 기존에 next.js pages router 로 진행하였던 개인 프로젝트(https://github.com/alkalisummer/nextjs-keylog)를 v15.3으로 버전을 올리면서 app router 로 마이그레이션을 진행하였다. 전 직장에서 nuxt.js 를 next.js(v15.2.5)의 app router 로 마이그레이션 해본 경험을 토대로 진행하며 개선점을 정리해보려한다.크게 와닿았던 개선점은 app router에서 서버 컴포넌트와 스트리밍 SSR이 가능해지면서 data fetch가 끝나고 준비된 컴포넌트부터 순차적으로 렌더링하여 바로 사용자에게 보여줄 수 있다는 점이다. Pages Router - 기존 Data Fetch 패턴의 한계점pages router에서의 SSR 은 get..

이번 포스팅에서는 next.js 로 개인프로젝트를 진행하며 next-auth를 적용하여 로그인 기능을 구현했던 과정에 대해 공유해보려 한다. 왜 Next-Auth 였나 ? 무엇보다 Next Auth 를 사용한 가장 큰 이유는 쉽고 간단하게 구현할 수 있기 때문이였다. DB 통신을 하여 로그인을 직접 구현하는 것 이외에도 Oauth, Email 를 사용하여서도 쉽게 구현할 수 있도록 가이드가 잘 되어있고 발급받은 jwt 를 crsf 토큰을 활용해 매 사용자 요청을 검증하도록 안전하게 설계되어 있다.(자세한 정보는 next-auth 공식 레퍼런스(https://next-auth.js.org)를 참고) Oauth 소셜로그인 기능도 구현해보고 싶었지만 일단 제일 기본적인 로그인 부터 구현해보고 싶어서 이번 포스..

이번 포스팅에서는 리덕스 사가를 개인 프로젝트에 적용하면서 알게된 것들을 정리해보려 한다. 개인프로젝트로 next.js로 블로그를 만들고 있는데 특정 사용자의 블로그로 접속했을때 해당 블로그의 사용자 정보(계정, 블로그명 등)와 최근 게시글, 인기게시글, 최근 댓글등 과 같은 정보를 왼쪽 영역에서 공통 layout으로 표출해주고 있었다. 이 데이터들은 _app.tsx 파일에서 getInitialProps로 서버사이드에서 데이터를 가져와서 layout 파일에 props로 내려주고 있었는데 해당 레이아웃을 사용하는 파일이 여기저기 있다보니 같은 props 가 무분별하게 사용되는게 보기 좋지 않았다. 이번기회에 리덕스를 프로젝트에 적용해보고 싶기도 해서 리덕스를 사용하여 해당 데이터를 상태로 관리하되 서버사이..

이번 포스팅에서는 Redux Toolkit을 사용하여 보다 효율적으로 Redux를 사용하는 방법을 정리해보고자 한다. 목차 Redux Toolkit 이란? Redux Toolkit 설치 Redux Toolkit 기능과 사용 예시 1. Redux Toolkit 이란? Redux Toolkit은 리덕스의 복잡한 부분을 간소화하여 리덕스를 보다 쉽고 간편하게 사용할 수 있도록 만들어진 라이브러리이다. Redux Toolkit은 기존 Redux를 사용했을때 대비 아래와 같은 이점이 있다. - 초기 저장소를 설정을 기존 Redux 저장소 설정에 비해 간편하게 할 수 있음. - 기존 Redux 코드의 불필요한 반복을 줄이고 보다 간편한 코드로 작성할 수 있는 이점이 있음 - Redux 사용에 용이한 패키지(DevT..

이전포스팅에서 이어서 이번 포스팅에서는 리덕스에서 미들웨어의 기본 개념과 Redux Thunk에 대해서 정리해보려 한다. 목차 미들웨어(Middleware) 란? 미들웨어 함수 생성 비동기처리를 위한 미들웨어 : Redux Thunk 1. 미들웨어(Middleware) 란? Redux 미들웨어를 간단하게 요약하면 action을 dispatch로 전달하고 reducer에 도달하기 이전에 지정된 작업을 실행할 수 있게 해주는 중간자이다. reducer가 dispatch 받은 액션을 처리하기 전에 할 수 있는 작업들은 다양한데 예를 들면 로깅, API 비동기 작업, 라우팅 등이 있다. 2. 미들웨어 함수 생성 미들웨어의 사용 예시를 위해 리덕스 사용시 console 로그를 찍는 간단한 미들웨어 함수를 작성하였..