Frontend14
- DOMMatrix is not defined: Next.js SSR 에러 하나 잡은 이야기
Next.js 프로젝트에 PDF 뷰어(react-pdf)를 붙였더니, 페이지를 열 때마다 콘솔에 이런 에러가 찍혔다. PDF 미리보기 화면을 아직 열지도 않았는데 왜 홈 화면만 들어가도 에러가 났을까. 원인을 따라가 보니 SSR(서버 사이드 렌더링)의…
- Next.js Server Function 에러 메시지가 프로덕션에서 사라지는 이유
개발 환경에서는 "이미 사용 중인 아이디입니다" 같은 에러 메시지가 잘 뜨는데,프로덕션에 배포하면 갑자기 이런 메시지로 바뀐 경험이 있을 것이다. An error occurred in the Server Components render.The spec…
- 서버가 호출하는 API와 브라우저가 호출하는 API는 다르다 : NEXTJS
Next.js로 개발하다 보면 이런 상황을 마주친다. 분명히 서버에서 API를 잘 호출하고 있는데, 같은 주소를 클라이언트 컴포넌트에서 쓰면 요청이 실패한다. 로컬에서는 둘 다 되던 코드가, 배포하고 나면 클라이언트 쪽만 망가진다. 이 글은 그 원인 …
- Next.js 캐싱의 기본값과 동적 렌더링 전환 조건
Next.js 공식 문서(Glossary)는 다음과 같이 명시한다. 즉, Request-time API를 사용하지 않는 컴포넌트는 기본적으로 빌드 시점에 HTML을 생성해 캐싱한다. dynamic 옵션의 기본값인 'auto'에 대한 설명도 같은 방향이…
- Next.js의 redirect() vs router.push() — nginx 리버스 프록시 + basePath 환경에서의 함정
Next.js App Router에서 로그인 후 대시보드로 이동시키는 코드를 작성할 때, 가장 먼저 떠오르는 방법은 Server Action에서 redirect()를 호출하는 것이다. 로컬에서는 잘 동작한다. 그런데 nginx 리버스 프록시 뒤에 배포…
- Vue 개발자가 Next.js를 배우며 겪은 혼란: Server Component와 Client Component 이해하기
Vue와 Nuxt에 익숙한 개발자로서 Next.js를 처음 접했을 때, 가장 혼란스러웠던 부분은 "왜 데이터를 fetch 했는데 화면이 업데이트되지 않는가?"였습니다. Vue에서는 당연하게 작동하던 반응형 시스템이 Next.js에서는 전혀 다른 방식으…
- JavaScript this 바인딩 이해하기
JavaScript에서 this는 함수가 어떻게 호출되느냐에 따라 결정됩니다. 함수를 작성할 때가 아니라, 실행될 때 결정된다는 게 핵심입니다. 함수를 그냥 호출하면 this는 undefined가 됩니다 (strict mode/모듈 환경). 객체의 메…
- JavaScript 이벤트 루프: Task Queue vs Microtask Queue
JavaScript는 싱글 스레드 언어입니다. 그런데 어떻게 비동기 작업을 처리할 수 있을까요? **이벤트 루프(Event Loop)**를 사용할 수 있습니다. 이벤트 루프는 JavaScript 엔진이 비동기 작업을 처리하는 메커니즘입니다. 코드 실행…
- TypeScript 인터페이스 확장: Declaration Merging과 Module Augmentation
Next.js에서 NextAuth를 사용하여 인증 시스템을 구축하던 중, 다음과 같은 TypeScript 에러를 만났습니다. session.user에 id 속성을 추가하려고 했지만, TypeScript는 이 속성이 존재하지 않는다고 불평합니다. Nex…
- Vue3 Carousel에서 화면 줄어들 때 이전 슬라이드가 겹쳐 보이는 문제 해결하기
프로젝트에서 Vue3 Carousel을 사용하다 보면, 해상도가 작아지거나 브라우저 창 크기를 줄였을 때 이전/다음 슬라이드가 화면에 겹쳐서 보이는 문제가 발생할 수 있습니다. 처음에는 캐러셀 자체 버그인가 싶었는데, 원인은 뷰포트 영역이 슬라이드 밖…
- Vue + Tailwind에서 반응형 메뉴 구현 시 흔히 겪는 문제와 해결법
웹사이트에서 상단 메뉴를 구현할 때, PC에서는 hover로 메뉴가 열리고, 모바일에서는 클릭으로 메뉴가 열리는 방식을 자주 사용합니다. Vue 3 + <script setup> + TailwindCSS 환경에서 반응형 디자인이 아닌 PC와 동일한 디…
- 모바일에서도 PC처럼 보이게 만드는 웹사이트 뷰포트 설정 방법
요즘 대부분의 웹사이트는 반응형 웹을 채택하고 있어, 화면 크기에 따라 레이아웃이 자동으로 조정됩니다. 하지만 경우에 따라서는 모바일에서도 PC와 동일한 고정 해상도로 보여주고 싶을 때가 있습니다. 예를 들어, 이 글에서는 HTML, CSS, 그리고 …
- 😲 “((” 이게 다르다고? — 괄호의 숨겨진 정체
어느 날, ((와 같은 괄호가 텍스트 치환이 안 되는 이상한 상황을 마주했습니다. 분명 코드에서는 "("를 잘 인식하고 있었는데, 현실에서는 작동하지 않더군요. 왜 그럴까요? 우리가 흔히 쓰는 괄호 (와 )는 키보드에서 쉽게 입력할 수 있습니다. 그런…
- Vue 3 컴포넌트 간 데이터 전달 방법 총정리 (props, emit, Pinia)
Vue 3는 컴포넌트 간 통신을 위한 다양한 방법을 제공합니다. 오늘은 부모 컴포넌트와 자식 컴포넌트 사이에서 데이터 변동을 감지하는 주요 방법들에 대해 알아보겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식에서 부모로 이벤트를 전…