Jin's Study

✅ 문제 상황Next.js로 메인 페이지를 개발 중이었고,페이지 구조는 대략 이렇게 구성돼 있었다:TopCarousel브랜드 소개 영역찾아오시는 길 (여기 안에 iframe으로 지도 삽입)문제는 여기서 발생했다.🔥 페이지를 새로고침하면,👉 스크롤이 TopCarousel을 건너뛰고 갑자기 아래쪽 섹션으로 쭉 내려가버리는 현상이 발생!처음엔 Swiper 캐러셀이 원인인가 싶어서 화살표부터 클릭 이벤트까지 다 확인했지만…범인은 iframe이었다. ✅ 원인 분석이런 식으로 iframe을 삽입했을 때 브라우저는 다음과 같이 반응:페이지 렌더링 시 iframe이 DOM에 나타나면브라우저가 iframe에 자동으로 포커스를 주는 경우가 있음그러면 scrollIntoView() 효과가 자동 발생하면서스크롤이 ifra..

1. Layout 시스템Layout은 우리가 페이지를 만들 때 반복적으로 사용되는 UI 요소(예: 네비게이션 바, 푸터 등)를 재사용할 수 있게 해줌.App Router 기반 프로젝트에서는 페이지가 렌더링될 때 다음과 같이 중첩 구조로 layout이 구성됨:Root Layout → 상위 Layout → 페이지 콘텐츠특징Layout은 서로를 대체하지 않고 중첩됨.프레임워크는 현재 페이지에 가장 가까운 Layout부터 적용하려고 시도.페이지가 이동되어도 공통 레이아웃은 유지되고, 콘텐츠 영역만 바뀌므로 전환 속도와 사용자 경험이 향상.2. Route GroupsRoute Groups는 URL 구조에 영향을 주지 않으면서 내부적으로 라우팅을 그룹화할 수 있게 해주는 기능.📌 사용 목적Layout을 공유하지..

1. Hydration이란?📌 정의Hydration은 서버에서 전달된 정적인 HTML에클라이언트에서 JavaScript를 연결하여인터랙션이 가능한 웹 페이지로 만드는 과정(이벤트 처리나 상태 변경이 가능하게 만드는) 과정 요약서버가 HTML을 브라우저에 전달브라우저는 정적인 HTML을 먼저 표시React의 JS가 실행되어 이벤트 핸들러, useState 등이 작동함 → 이게 hydration 2. use client란?📌 정의**use client**는 해당 컴포넌트를 클라이언트 컴포넌트로 지정한다는 선언기본적으로 Next.js는 모든 컴포넌트를 서버 컴포넌트로 취급-> Next.js에서 해당 컴포넌트를 클라이언트에서 실행해야 함을 명시하는 선언문 항목설명기본값모든 컴포넌트는 서버 컴포넌트(Serv..

1. Next.js란?📌 React (UI 라이브러리)React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리라이브러리는 내가 사용하는 도구원하는 폴더 구조, 함수 방식, 객체 방식 등 내 마음대로 개발할 수 있음React 자체는 UI를 컴포넌트화해서 만들 수 있도록 도와줄 뿐,라우팅이나 데이터 처리, SSR 기능은 직접 구현📌 Next.js (프레임워크)Next.js는 React를 기반으로 만들어진 프레임워크프레임워크는 반대로 내 코드를 호출하는 주체내가 코드를 작성하면, Next.js가 적절한 타이밍에 그 코드를 찾아서 실행따라서 정해진 폴더 구조, 파일 이름, 컴포넌트 위치를 따라야 합니다.예: app/page.tsx는 반드시 그 이름 그대로 위치해야 Next.js가 인..