개요LG유플러스 유레카 과정의 마지막 프로젝트인 융합 프로젝트가 마무리되었다. 사실 프로젝트는 벌써 3주 전에 끝났지만, 이제야 이렇게 회고를 정리해 본다. 이번 융합 프로젝트에서는 다시 한 번 팀장을 맡게 되었고, 지난 종합 프로젝트 이후 계속 마음속에 두었던 고민이 있었다. 바로 단순히 만드는 것에 그치지 않고, 사람들이 실제로 사용하는데 불편함이 없는 완성도 높은 서비스를 만들자는 것이었다. 다행히도 이러한 내 생각에 공감하고 같은 방향을 바라보는 팀원들을 만날 수 있었다. 이번 프로젝트의 주제는 지도 기반 LGU+ 멤버십 제휴처 안내 서비스 Uble 이다. 이 글에서는 프로젝트를 진행하며 마주했던 어려움, 그리고 그 과정에서 했던 고민들을 기록해 보려고 한다.팀원의 프로젝트 중도 하차이번 프로젝트..

개요지난 4월 node.js 18버전에서 22버전으로 버전 업그레이드를 한 후 npm이 실행되지 않는 문제를 겪은 적이 있습니다.버그에 대한 원인과 해결 과정은 다음 글에 상세히 적어뒀었습니다.2025.04.02 - [기타] - [Node.Js] npm error code ERR_INVALID_ARG_TYPE 해결하기 [Node.Js] npm error code ERR_INVALID_ARG_TYPE 해결하기개요기존에 Nodejs 18버전을 사용하다가 2025-04-02 기준 lts 버전인 22.14.0 버전으로 버전 업그레이드 후 React 프로젝트를 하려고 했는데 에러가 발생하였다.0 verbose cli C:\Users\koe73\AppData\Local\nvm\v22.14.0\nmk-develop...

개요경매 플랫폼 유유상종 프로젝트에서 JWT 방식이 아닌 세션 방식으로 로그인 기능을 구현했었다. 세션 방식은 로그인이 성공할 경우 클라이언트에 JSESSIONID라는 토큰을 전송한다. 클라이언트는 토큰을 쿠키에 저장하고 요청을 보낼 때 withCredentials : true 옵션으로 요청에 쿠키를 자동 전송한다. 서버는 요청과 함께 온 세션 토큰을 검증하는 방식으로 인증을 진행한다. 위 방식을 사용하기 위해선 서버와 클라이언트 둘 다 https를 사용해야 한다. 본 글에서는 Next.js 프로젝트를 개발 환경에서 https로 동작하게 하는 법과 저장된 쿠키를 확인하는 법에 대해 다룬다.Next.js 프로젝트를 https로 실행하기next.js 13.5.0버전부터 로컬 환경에서 https로 프로젝트를 ..

개요Next.js는 리디렉션을 처리하는 여러 방법이 있다. Next.js에서 지원하는 리디렉션 api는 다음과 같다.APIPurposeWhereStatus Coderedirect사용자 동작 또는 이벤트 후 리디렉션Server Components, Server Actions, Route Handlers307 (Temporary) or 303 (Server Action)permanentRedirect사용자 동작 또는 이벤트 후 영구 리디렉션Server Components, Server Actions, Route Handlers308 (Permanent)useRouter클라이언트 측 내비게이션 수행클라이언트 컴포넌트의 이벤트 핸들러N/Aredirects in next.config.js경로 기반으로 들어오는 요..

개요본 글은 Next.js에서의 에러 핸들링, 로딩 UI, 그리고 스트리밍을 활용한 성능 최적화와 사용자 경험 향상 방법을 다룬다. 애플리케이션을 개발하다 보면 사용자의 입력 실수나 네트워크 문제 등으로 예상 가능한 에러가 발생하거나, 코드 상의 문제로 인한 예상치 못한 에러가 발생할 수 있다. Next.js는 이러한 에러들을 효과적으로 처리하기 위해 명시적 상태 관리 기법과 에러 경계를 제공하며, 이를 통해 사용자에게 원활한 서비스를 제공할 수 있게 한다. 또한, 데이터를 가져오는 과정에서 사용자에게 빈 화면을 보여주는 대신 의미 있는 로딩 UI를 제공하고, 페이지 로딩 속도를 개선하는 스트리밍 기법을 사용할 수 있다. Next.js는 React의 Suspense를 기반으로 페이지를 점진적으로 렌더링하..

개요App Router는 라우팅 및 내비게이션에 하이브리드 접근 방식을 지원한다. 즉 Next.js는 라우팅 시 서버와 클라이언트를 적절히 섞어서 사용한다. 서버에서 애플리케이션 코드는 경로 세그먼트에 의해 자동으로 분할된다. 예를 들어 app 폴더에 있는 코드끼리 분할되고 dashboard 폴더에 있는 코드끼리 분할된다. 클라이언트에서 Next.js는 경로 세그먼트를 사전 로드하고 캐시한다. 즉 Next.js는 사용자가 다음에 갈 수도 있는 경로를 미리 받아서 캐시한다. 즉 사용자가 새 경로로 네비게이션할 때 모든 페이지를 다시 렌더링하는것이 아닌 바뀐 부분만 바꿔치기한다. 이를 통해 사용자 경험을 향상시킨다. 본 글에서는 Next.js의 코드 분할, 사전 로드, 캐싱, 부분 렌더링, 소프트 네비게이션..

개요이벤트는 프론트엔드 프로그래밍의 핵심이다.때문에 프론트엔드에서 이벤트가 어떻게 처리되는지 흐름을 정리해 보았다.내용을 이해하기 위해 사전에 이벤트와 이벤트 핸들러가 무엇인지 알아야 한다.✅ 이벤트(Event)사용자가 어떤 행동을 했을 때 발생하는 사건.예) 클릭(click), 키 누름(keydown), 마우스 움직임(mousemove), 입력(input) 등✅ 이벤트 핸들러(Event Handler)이벤트가 발생했을 때 실행되는 함수.예) 버튼을 클릭하면 어떤 코드를 실행하고 싶을 때, 그게 핸들러이다.Event interface우리가 웹에서 실행하는 이벤트는 자바스크립트의 Event interface에 맞춰서 생성된 객체이다. 자바스크립트에서 이벤트는 다음 코드로 정의된다.interface Even..

개요기존에 Nodejs 18버전을 사용하다가 2025-04-02 기준 lts 버전인 22.14.0 버전으로 버전 업그레이드 후 React 프로젝트를 하려고 했는데 에러가 발생하였다.0 verbose cli C:\Users\koe73\AppData\Local\nvm\v22.14.0\node.exe C:\Users\koe73\OneDrive\Desktop\cli1 info using npm@11.2.02 info using node@v22.14.03 silly config load:file:C:\Users\koe73\OneDrive\Desktop\cli\npmrc4 silly config load:file:C:\Users\koe73\OneDrive\Desktop\cli\.npmrc5 silly config ..