Swiper_캐러셀_적용과_프로젝트_마무리

작성자:

1. Swiper란? Swiper(스와이퍼)는 터치 슬라이드/캐러셀(Carousel, 회전목마형 슬라이드)을 쉽게 만들어주는 라이브러리이다. 넷플릭스, 유튜브, 쿠팡 같은 서비스에서 콘텐츠를 좌우로 넘기는 UI가 바로 이것이다. 이번 편에서는 6편에서 만든 Section.jsx의 그리드 레이아웃을 Swiper 캐러셀로 업그레이드한다. 순서 만들 기능 핵심 개념 1단계 Swiper 기본 적용 Swiper, SwiperSlide, 모듈 import 2단계 반응형 설정 breakpoints 3단계 자동 재생 Autoplay 모듈 2. Swiper … 더 읽기

React 개발 환경 이해

작성자:

1강. React 개발 환경 이해 React 19와 Vite를 기반으로 개발 환경을 구축하고 기본 개념을 이해한다. 1. 웹 개발의 변화와 React SPA (Single Page Application)의 등장 과거의 웹은 페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아오는 MPA(Multi Page Application) 방식이었다. 이는 화면 깜빡임이 발생하고 사용자 경험이 저하되는 단점이 있다. React는 SPA 방식을 채택한다. 하나의 HTML 페이지(index.html)만 로드하고, … 더 읽기

React Router

작성자:

React Router 공식사이트 1. 라우터 이해 1.1. 라우터란 네트워크에서 데이터를 목적지까지 연결하는 장치다. 리액트에서는 URL 주소에 따라 다른 컴포넌트를 보여주는 역할을 한다. 1.2. 라우팅이란 데이터의 최단·최적 경로를 찾는 과정이다. 1.3. MPA란 MPA(Multi Page Application) — 여러 HTML 페이지를 각각 만들어 연결하는 방식이다. 페이지 이동 시 전체 페이지가 새로 로드된다. 1.4. SPA란 SPA(Single Page Application) — … 더 읽기

Props (속성)

작성자:

1. Props (속성) 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법. 1.1. Props의 개념 Props는 Properties(속성)의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방법이다. None: 컴포넌트를 함수라고 생각하면, Props는 그 함수에 전달하는 매개변수(파라미터)다. // 일반 자바스크립트 함수 function greet(name) { // name은 매개변수 return 안녕, ${name}!; } greet("철수"); // "철수"는 인자 // React 컴포넌트 … 더 읽기

CSS 리액트에 넣는 5가지 방법

작성자:

1. Inline Style(인라인 스타일) — 태그 안에 직접 쓰기 1.1 개념 HTML(에이치티엠엘)에서 style="color:red" 처럼 태그 안에 스타일을 직접 쓰는 방식이다. 리액트에서는 문자열이 아닌 객체(Object, 오브젝트) 형태로 작성한다. 리액트는 JavaScript(자바스크립트)를 기반으로 동작한다. JSX(제이에스엑스) 안에서 스타일을 표현할 때는 JS 문법을 따르기 때문에, `background-color` 처럼 하이픈(`-`)이 들어간 속성은 `backgroundColor` 처럼 카멜케이스(camelCase) 로 바꿔서 써야 한다. 1.2 기본 예제 … 더 읽기

useContext로 전역 상태 관리

작성자:

1. useContext로 전역 상태 관리 1.1. Context가 필요한 이유 리액트에서 데이터는 보통 부모 → 자식 방향으로 Props를 통해 전달한다. 그런데 컴포넌트가 깊게 중첩되어 있으면, 중간에 있는 컴포넌트들이 직접 쓰지도 않는 데이터를 계속 받아서 아래로 넘겨줘야 한다. 이 문제를 Prop Drilling(프롭 드릴링) 이라고 한다. Context를 사용하면 중간 컴포넌트를 거치지 않고, 필요한 컴포넌트가 직접 데이터를 꺼내 쓸 … 더 읽기

Hook

작성자:

1. Hook Hook은 함수형 컴포넌트에서 React 기능을 사용할 수 있게 해주는 특별한 함수다. 이름이 항상 use로 시작하는 것이 특징이다. 1.1. Hook 사용 규칙 Hook을 사용할 때 반드시 지켜야 할 두 가지 규칙이 있다. 규칙 설명 컴포넌트 최상위에서만 호출 if문, for문, 중첩 함수 안에서 호출하면 안 된다 React 함수에서만 호출 일반 JavaScript 함수에서는 사용할 수 없다 … 더 읽기

이벤트 처리

작성자:

1. 이벤트 처리 사용자의 행동(클릭, 입력, 마우스 이동 등)에 반응하는 인터랙티브한 웹사이트를 만들기 위해 React의 이벤트 시스템을 깊이 있게 학습한다. 1.1. React 이벤트 시스템 이해하기 1.1.1. 이벤트란? 이벤트(Event)는 사용자가 웹페이지에서 취하는 행동을 의미한다. 버튼 클릭, 키보드 입력, 마우스 이동 등 모든 상호작용이 이벤트다. Tip: 일상 생활의 비유: • 도어벨을 누르면(이벤트) → 초인종이 울린다(반응) • 리모컨 … 더 읽기

JSX 문법과 컴포넌트

작성자:

1. JSX 문법과 컴포넌트 React의 핵심인 컴포넌트를 만드는 법과, 이를 위해 사용하는 JSX 문법을 완벽히 익힌다. 1.1. 컴포넌트와 JSX의 관계 1.1.1. 컴포넌트란? 컴포넌트(Component)는 React에서 UI를 만드는 기본 단위다. 레고 블록처럼 작은 부품들을 조립해서 전체 화면을 만든다고 생각하면 된다. 자바스크립트 함수: React 컴포넌트는 그냥 자바스크립트 함수다 UI 반환: 이 함수는 화면에 그릴 내용을 반환한다 재사용 가능: … 더 읽기

React 소스 코드 수정, 배포 및 렌더링

작성자:

1. React 소스 코드 수정, 배포 및 렌더링 React 앱이 어떻게 화면에 그려지는지 이해하고, 코드를 직접 수정하며 배포까지 경험한다. 1.1. App 컴포넌트 렌더링 과정 React 앱이 브라우저에 표시되기까지의 흐름을 정확히 이해해야 한다. 흐름은 index.html에서 시작된다. 1.1.1. 1단계: index.html 진입 브라우저는 가장 먼저 index.html을 읽는다. 이 파일에는 <div id="root"></div>라는 텅 빈 공간이 있다. 1.1.2. 2단계: main.jsx … 더 읽기