![]()
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..
![]()
개요오랜만에 개인적으로 진행하던 사이드프로젝트를 리팩토링 해볼겸 로컬에서 서버를 올려봤는데 .. 동적으로 Google Trends 데이터를 받아오기 위해 사용하던 npm 패키지(https://www.npmjs.com/package/google-trends-api)가 어느순간 먹통이 되어 디버깅을 해보니 response가 왠 404 에러가 .. 뭐지 .. 하는 기분으로 goole trends 에 먼저 접속해봤더니 UI가 대폭 업데이트 되었다.. npm 에서 설치하여 사용하던 패키지는 Google 에서 공식적으로 제공해주는 라이브러리가 아니기에 해당 소스 repository의 github issue 탭을 들어가보니 아니나 다를까 UI 가 업데이트 되면서 Google Trends 자체적으로 clientside..
![]()
근래 사내 프로젝트로 AWS Lambda 를 활용하여 on-the-fly 방식으로 동적 이미지 프로세싱 프로젝트를 진행하게 되었습니다. 프로젝트를 진행하며 겪었던 이슈와 과정들을 회고하며 간략하게 정리해보려 합니다. 배경저희 회사는 이커머스 업계 특성상 굉장히 많은 상품 이미지를 AWS S3로 관리하고 있습니다. 당시 이미 동적 이미지 프로세싱 및 캐싱 기능의 역할을 하는 외부 솔루션을 도입하여 Image 서버가 구축되어 있었고 월마다 고정 비용이 나가고 있었는데요. 클라이언트에서 이미지 요청의 경우 flow 를 자세히 보니 조금 의아한 부분이 있었습니다.기존 이미지 요청 flow 를 간략하게 도식화한 이미지입니다. 이미 AWS CloudFront가 제일 앞 단에서 url 을 key 값으로 캐싱을 잘해주..
![]()
나 필요할때 볼려고 만든 PHP 기초 문법 정리 글이다. 1. 화면 출력 echo 문을 사용하여 화면에 출력 ','를 구분자로 여러 인자를 출력 가능 2. 변수 선언 $ 표시를 변수 명 앞에 붙여서 변수를 선언 3. 변수 정보 확인 var_dump 함수를 사용하여 확인 가능. 4. 문자열 붙이기 '.' 을 사용하여 문자열끼리 붙여서 표출할 수 있다. 5. 상수 선언 define 함수를 사용하여 상수를 선언할수 있다. 첫번째 인자로 변수명, 두번째 인자로 값을 전달받는다. 이미 정의된 상수를 재선언시 오류 발생 6. 형변환 settype 을 사용하여 변수 값 자체를 형변환 하거나 (int), (string), (array), (object), (float) 등을 사용하여 일시적으로 형변환을 할 수 있다. ..
![]()
git 에서 브랜치간 merge(병합)시 confilct(충돌)이 발생했을때 해결하는 방법에 대해 간단하게 정리하는 글이다. 간단한 예시를 위해 main 브랜치와 o2 브랜치에서 같은 파일을 수정 후 merge 하여 일부러 충돌을 발생시킬 것이다. ======= 를 구분선으로 현재 HEAD(main 브랜치)의 파일과 o2 브랜치의 파일 에서 같은 라인에 어디가 충돌 났는지 보여준다. 이때 직접 수동으로 두 브랜치의 반영사항을 모두 반영할 지 한쪽만 반영할 지 정하고 수정한 뒤 저장한다. 두개다 반영하기 위해 위와 같이 수정하였다. 이후 아래 순서와 같이 충돌이 발생한 파일을 add 하고 status로 상태를 확인한 뒤 commit 으로 merge를 완료한다. git add 충돌이 발생한 파일 git st..
