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 문법📌 $(요소..

🔌 API(Application Programming Interface) :컴퓨터의 기능을 실행시키는 방법. 하나의 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법 ✏️ API가 가져야 할 내용예)(GET요청)comic.naver.com/webtoon/detail ?id=3189951. 요청방식이 들어가야(method) : 데이터 보내달라고 할 것임? 데이터를 보낼 것임?2. 무슨 자료를 요청할지(endpoint): 어떤 데이터를 요청할 것임.(웹툰? 댓글? 뉴스?) URL형식으로 저장. 3. 자료 요청에 필요한 추가 정보 : 파라미터. 내 아이디, 이름, 몇화보고 싶은지 이런거+ 웹의 경우 REST API라는 원칙에 따라 작성하면 좋음 public API : 누구나 사용가능한 공개 APIp..

🖥️ CSR(Client Side Rendering) : 클라이언트 사이드 렌더링 클라이언트에서 모든 것을 처리하는 방식JavaScript를 사용하여 클라이언트에서 웹 페이지를 렌더링하는 프로세스서버는 초기 HTML 파일을 전송하고, 클라이언트는 JavaScript로 동적으로 페이지를 업데이트.이를 통해 클라이언트가 전체 페이지를 다시 로드하지 않고도 페이지의 특정 부분을 업데이트 할 수 있음→ 상호 작용적이고, 반응성이 뛰어난 웹페이지를 만들 수 있음. 즉, 사용자가 웹사이트를 볼 수 있음(TTV)과 동시에 클릭하거나 인터랙션이 가능함(TTI) CSR의 대표적인 프레임워크 React👍🏻 장점:상호작용적이고 동적인 웹 어플리케이션매끄럽고 원할한 사용자 경험을 제공추가 서버 요청의 필요성을 줄임👎?..

🎭XSS (Cross Site Scripting)※왜 CSS가 아닌 XSS일까? 그 이유는 바로 기존의 CSS(Cascading Style Sheets)와 구분할 수 있도록 하기 위해서이다. 웹 사이트의 취약점을 이용해 악성 스크립트를 웹 페이지에 삽입하고, 이 스크립트가 사용자의 브라우저에서 실행되도록 하는 공격그 사이트를 마비시키거나 각종 정보를 취득하여 쿠키 탈취, 사용자 세션 하이재킹 등이 가능  1.  XSS의 유형1) Reflected XSS : 공격 스크립트가 삽입된 URL을 사용자가 클릭하도록 유도하는 방식. 클릭 요청이 발생하면 바로 스크립트가 반사되어 돌아온다고 해서 Reflected라는 이름이 붙음2) Stored XSS: XSS 공격 스크립트를 웹 사이트의 방명록이나 게시판에 삽입..