한땀한땀

Node.js 환경에서 개발을 해본 사람이라면 대부분 알고 있을 법한 기본 중 하나는, process.env.NODE_ENV와 같은 환경 변수를 직접 사용하는 것에 대한 이해이다. 하지만 나는 그 기본을 잠시 망각했고, 그로 인해 꽤 많은 시간을 디버깅에 허비하게 되었고, 그 과정에서 중요한 교훈을 얻었다. 당시 나는 Module Federation을 적용해 마이크로 프론트엔드 구조를 구성하고 있었고,개발 환경에서는 Hot Reload 이후 변경 사항 반영이 느려지는 문제가 있었다.그래서 로컬 환경에서는 Module Federation이 아예 동작하지 않도록 조건 분기를 만들고자 했다. 문제는 그 조건 분기에서 비롯되었다.process.env.NODE_ENV === 'development' 같은 구문을 ..

웹 애플리케이션에서 JWT(JSON Web Token)를 사용한 인증은 널리 채택된 방식입니다.그러나 실제 프로덕션 환경에서는 토큰 만료, 갱신, 에러 핸들링 로직에서 다양한 문제가 발생할 수 있습니다. 최근 회사 프로젝트에서는 로그인이 자주 풀리는 문제가 보고되었습니다.확인 결과, 인증 로직이 제대로 동작하지 않아 사용자가 빈번하게 로그아웃되는 현상이 발생했습니다. 401 에러 핸들러를 개선하면서 로그인이 풀리는 문제를 해결하였고,이 과정에서 인증 관련 로직을 수행하는 커스텀 프로바이더(AuthProvider) 내의 useEffect 의존성 문제로 인해 토큰 갱신 요청이 중복 발생하는 현상도 발견했습니다.토큰 갱신 중복요청 문제는 구글 크롬 DevTools의 Network 탭을 통해 확인되었으며, 의존..

현재 회사의 프로젝트는 Next.js 13을 기반으로 개발되었으며, 최신 버전인 Next.js 15로 마이그레이션을 결정하였다. 왜 진행했는가?최신 기능 및 성능 개선최신 React 및  Next.js의 최적화 기능을 활용할 수 있다.더 빠른 빌드 및 서버 렌더링 속도를 기대할 수 있다.Hydration error 관련 개선이 이루어져, 구체적인 소스 코드 및 해결 방법을 제시해주기 때문에 디버깅에 좀 더 수월해질 것 같다.App Router 정식 지원 및 서버 컴포넌트 활용Next.js 13에서 실험적으로 도임된 app 디렉토리 기반의 라우팅이 Next.js 15에선 더욱 안정적으로 지원되고, 서버컴포넌트를 활용하여 코드를 좀 더 직관적이고 간결하게 유지할 수 있을 것 같다. 기존 Pages 라우터에서..

컨벤션을 기록하게 된 이유프로젝트가 커지면서 유지보수가 어려워지는 문제를 경험하였습니다. 코드 스타일이 일관되지 않으면 협업 시 혼란이 발생하고, 코드의 가독성과 확장성이 떨어질 수 밖에 없습니다.이러한 문제를 해결하기 위해 명확한 컨벤션을 정하고 이를 문서화하기로 결정했습니다. 이를 통해 개인 및 협업 프로젝트에서 유지 보수를 더욱 원활하게 할 수 있으면 좋겠습니다. 1. React 코드 작성순서리액트 컴포넌트는 특정한 순서로 작성하는 것이 가독성을 높이고 유지보수를 쉽게 한다권장 코드 작성 순서import: 라이브러 -> 내부 모듈 순서컴포넌트 내부 변수 및 상태 선언useEffect 등 훅 사용핸들러 함수렌더링 로직꼭 위와 같은 순서를 따를 필요는없고 관심사별로 그룹화하는 것이 중요 import {..