[Next.js] AI 에이전트가 Vercel 엔지니어처럼 코드 리뷰를 해준다면? (프론트엔드 성능 최적화 가이드, react-best-practices)
·
Front-End/Next
들어가며클로드 코드를 처음 사용하고 3달이 지난 2026년 현재, 개발하는 방식이 또 완전히 달라졌습니다.챗GPT에게 질문하고 답변을 받아 직접 코딩하던 ‘AI 어시스턴트’ 방식에서커서나 클로드 코드 같이 스스로 판단하고 행동하며 작업을 자율적으로 수행하는 ‘AI 에이전트 방식’으로 발전했습니다. 많은 기업과 개발자들이 AI 에이전트에 관심을 갖고, 실제 업무에 적극적으로 도입하고 있습니다.실제로 AI를 잘 다루는 개발자와 그렇지 않은 개발자의 생산성 차이는 매우 큽니다. 저는 앞으로 “코딩을 얼마나 잘하는가?”보다, “AI 에이전트를 얼마나 더 잘 다루고 활용할 수 있는가?”가중요한 핵심 역량이 될 것이라고 생각합니다. 최근 Vercel에서 React/Next.js 개발 10년의 노하우가 담긴 reac..
[Next.js] 이전 페이지 뒤로 가기 구현하기 (세션 스토리지, 히스토리 스택)
·
Front-End/Next
📝 문제 상황Next.js 14버전을 사용하던 중router.back() 함수에서 이슈가 발생했습니다. { router.back(); // 문제 코드 ! }}>router.back()은 그냥 사용하면 문제없이 동작하지만새로고침 후 실행되면 RSC가 무한히 pending 되면서 결국 웹사이트가 터져버렸습니다. 🤔 router.back()을 계속 사용하면서,해결할 수 있는 방법은 없나 찾아봤지만 마땅한 방법을 찾지 못했습니다.저희 프로젝트만 그런가요?? 댓글로 알려주세요 그래서 결국 세션 스토리지에 히스토리를 직접 저장하고goBack() 함수를 구현하기로 했습니다. 😀 📝 해결 방법 ⦁1. 히스토리 저장을 위한 HistoryTracker 컴포넌트const STORAGE_KEY = 'pageH..
[Next.js] next-intl 자바스크립트 프로젝트에서 다국어 메시지 자동완성 구현하기 (부분 타입스크립트 활용)
·
Front-End/Next
신규 프로젝트의 다국어 적용을 마치고기존 프로젝트에도 다국어 적용이 필요한 상황이었습니다.하지만 문제는 기존 프로젝트는 자바스크립트 프로젝트라는 것입니다. 신규 프로젝트는 타입스크립트로 진행했기 때문에어려움 없이 자동완성의 혜택을 누릴 수 있었지만,자바스크립트 프로젝트에서는 다국어 메시지 자동완성이 불가능했습니다. 자동완성 없이 다국어 메시지를 적용한다고? 🤔이건 여러모로 좋지 않을 것 같아서방법을 찾아봤습니다. 📝 JavaScript 프로젝트에서 .d.ts 파일 생성하기 ⦁1. 타입스크립트를 devDependencies로 설치yarn add -D typescript.d.ts 파일을 생성하기 위해선 타입스크립트를 설치해야 합니다. -D는 --dev의 줄임말로, 개발에만 필요한 패키지를 설치할 때 사용..
[Next.js] 구글 스프레드시트로 i18n 메시지 관리하기 (Apps Script json 추출)
·
Front-End/Next
https://hyunki99.tistory.com/124 [Next.js] Next 15 국제화라이브러리 비교 + 적용하기 (i18n, next-intl)요즘의 모던하고 글로벌한 웹에는 국제화(i18n)와 지역화(i10n)라는 개념이 등장합니다.쉽게 정리하면 다음과 같습니다.✅ 국제화(i18n, Internationalization): → 다국어 지원을 위해 코드 구조를 준비hyunki99.tistory.com지난 시간에 next-intl 라이브러리를 사용해서다국어 지원을 구현했습니다. 이제 더 중요한 숙제가 남았는데요, 바로 다국어 메시지 관리입니다.프로젝트의 규모가 커지고 지원하는 언어가 늘어나면다국어 메시지를 관리하기 복잡해집니다. 코드를 수정할 때마다 각각의 언어 파일의 Json을 찾아 수정하..
[Next.js] Next 15 국제화라이브러리 비교 + 적용하기 (i18n, next-intl)
·
Front-End/Next
요즘의 모던하고 글로벌한 웹에는 국제화(i18n)와 지역화(i10n)라는 개념이 등장합니다.쉽게 정리하면 다음과 같습니다.✅ 국제화(i18n, Internationalization): → 다국어 지원을 위해 코드 구조를 준비하는 과정→ 예: 문자열을 하드코딩하지 않고 번역 파일을 사용✅ 지역화(l10n, Localization):→ 특정 언어와 문화에 맞게 UI와 콘텐츠를 변경하는 과정→ 예: 날짜/시간 형식 변경, 통화 기호 적용 ($, ¥ 등) , 번역된 텍스트 사용🚀 쉽게 말하면 i18n은 "준비", l10n은 "적용"하는 과정이다.이번에 저희 회사에서 신규 백오피스 프로젝트에 일본어 지원이 필요해국제화를 적용하게 되었습니다. Next.js 15의 앱라우터에서 국제화를 도입한 경험을 공유합니다..
[Next.js] 넥스트 빌드파일 html id="__next_error__" 해결방법 (useSearchParams)
·
Front-End/Next
Next.js 14버전으로 개발한 웹사이트를 구글 서치 콘솔에 등록하려고 했지만,robots 메타태그에서 noindex에 의해 제외되었다는 메시지가 표시되었습니다. 🤔 문제를 확인해 보니, 웹사이트는 정상적으로 동작하는 것처럼 보였지만next build를 통해 생성된 빌드 파일이 Next.js 에러 페이지를 출력하고 있었습니다. html id="__next_error__" 해결과정 함께 알아봅시다 😀 📝 문제 상황  ⦁__next_error__Next.js의 에러 페이지는 기본적으로 메타태그를 포함합니다.따라서 noindex 메타태그가 자동으로 삽입되었기 때문에 구글의 검색엔진이 색인 작업을 하지 않았습니다. 해당 현상은 next dev를 통해 개발환경에서 실행했을 경우에는 재현되지 않습니다.따..
[Next.js] TypeError: jsxDEV is not a function 해결 방법 (캐시 에러)
·
Front-End/Next
// 에러 로그⨯ Internal error: Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error. digest: "3212179931"TypeError: (0 , react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV) is not a ..