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에서 해당 컴포넌트를 클라이언트에서 실행해야 함을 명시하는 선언문 항목설명기본값모든 컴포넌트는 서버 컴포넌트(Server C..

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

크로스브라우징 문제를 해결하기 위해 제이쿼리가 등장. 편의성을 높임 *크로스브라우징: 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업. HTML5, CSS3, JavaScript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법. 브라우저마다 랜더링 엔진이 다르기 때문에 크로스브라우징 작업이 필요. *크로스브라우징 문제: 여러 웹 브라우저 간의 호환성 문제로 인해 발생.  ▶︎ jQuery 라이브러리 추가jQuery 문법 사용을 위한 2가지 방법둘 중 하나의 방식을 선택해서 하면 된다.1. jQuery 파일을 다운받아 로드 ▶︎ jQuery를 사용하는 방법jQuery 문법📌 $(요소..

🔎 Polymorphism :여러가지 다양한 형태객체 지향 프로그래밍(OOP)의 개념 중 하나.다양한 형태의 객체를 다룰 수 있는 능력을 의미다양한 타입의 객체들이 공통의 인터페이스를 통해 동일한 방식으로 처리될 수 있다.-> 코드의 유연성과 재사용성을 높일 수 있음.tyoe SuperPrint = { (arr: number[]):void (arr: boolean[]):void (arr: string[]):void (arr: (number|boolean)[]):void}const superPrint: SuperPrint = (arr) => { arr.forEach(i => console.log(i)}superPrint([1, 2, 3, 4])superPrint([true, false, ..

🔎 Call signatures: 함수의 형식을 정의하는 데 사용함. 함수의 타입을 명시하고 함수에 전달할 수 있는 매개변수의 타입과 반환 타입을 지정해야하는데 활용 함수 위에 마우스를 올렸을 때 보게 되는 것. 함수를 어떻게 호출해야하는 지 알려주며, 함수의 반환 타입도 알려줌. 함수를 구현하기 전에 함수가 어떻게 작동하는 지 서술해둘 수 있음 type Add = (a:number, b:number)=>number; //call signature const add:Add=(a,b)=>a+b type Add = (a:number, b:number)=>number; //call signature const add:Add=(a,b)=>{a+b} →이 경우에 오류가 발생하는데, 그 이유는 {}를 사용하면{a+..

🔎 작동방식 강력한 타입 지정 프로그래밍 : TypeScript는 강력한 타입 언어로 , 컴파일 중에 타입 안전성을 제공한다. JavaScript로 컴파일되며, 오류가 발생하면 컴파일 실패. 타입 안전성을 위한 TypeScript: TypeScript는 실행 전에 타입을 확인하여 일반적이 오류를 방지함으로써 타입의 안전성 제공 타입 추론을 통해 TypeScript는 명시적으로 선언하지 않고도 타입을 이해하고 추론할 수 있다. 타입 주석과 추론: 타입은 명시적으로 주석을 달거나 TypeScript에게 추론을 맡길 수 있다. 따라서 추가 코드없이 오류 확인 제공 let a:number[] = [1,2,3] let b:string[] = ["h","e","l","l","o"] let c:boolean[] = ..