1. Props (속성) 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법. 1.1. Props의 개념 Props는 Properties(속성)의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방법이다. None: 컴포넌트를 함수라고 생각하면, Props는 그 함수에 전달하는 매개변수(파라미터)다. // 일반 자바스크립트 함수 function greet(name) { // name은 매개변수 return `안녕, ${name}!`; } greet(“철수”); // “철수”는 인자 // React 컴포넌트 … 더 읽기
06. Projects.jsx — 프로젝트 섹션 이번 단계에서 할 일 프로젝트 목록을 데이터 배열로 관리하고, map으로 화면에 출력하는 방법을 배웁니다. 피그마 디자인 분석 │ ─── Projects ──────────────────────────────────── │ │ │ │ ┌──────────────────────┬───────────────────────┐ │ │ │ ● Project 01 │ │ │ │ │ │ │ │ │ │ 동대문구청 │ 이미지 영역 │ │ │ │ … 더 읽기
React Router 공식사이트 1. 라우터 이해 1.1. 라우터란 네트워크에서 데이터를 목적지까지 연결하는 장치다. 리액트에서는 URL 주소에 따라 다른 컴포넌트를 보여주는 역할을 한다. 1.2. 라우팅이란 데이터의 최단·최적 경로를 찾는 과정이다. 1.3. MPA란 MPA(Multi Page Application) — 여러 HTML 페이지를 각각 만들어 연결하는 방식이다. 페이지 이동 시 전체 페이지가 새로 로드된다. 1.4. SPA란 SPA(Single Page Application) — … 더 읽기
08. Footer.jsx — 하단 푸터 이번 단계에서 할 일 SNS 아이콘 링크와 저작권 정보가 담긴 푸터를 만듭니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ │ │ Thanks X IG YT LI │ │ │ │ copyright All right │ │ │ └──────────────────────────────────────────────────┘ 높이: 324px 요소 값 "Thanks" 폰트 20px, #1e1e1e SNS 아이콘 크기 24px × 24px 아이콘 … 더 읽기
1. Swiper란? Swiper(스와이퍼)는 터치 슬라이드/캐러셀(Carousel, 회전목마형 슬라이드)을 쉽게 만들어주는 라이브러리이다. 넷플릭스, 유튜브, 쿠팡 같은 서비스에서 콘텐츠를 좌우로 넘기는 UI가 바로 이것이다. 이번 편에서는 6편에서 만든 Section.jsx의 그리드 레이아웃을 Swiper 캐러셀로 업그레이드한다. 순서 만들 기능 핵심 개념 1단계 Swiper 기본 적용 Swiper, SwiperSlide, 모듈 import 2단계 반응형 설정 breakpoints 3단계 자동 재생 Autoplay 모듈 2. Swiper … 더 읽기
03. Nav.jsx — 네비게이션 바 이번 단계에서 할 일 상단 네비게이션 바를 만듭니다. 클릭한 메뉴가 회색 pill 배경으로 바뀌는 기능도 구현합니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ [로고] ┌──────┐ │ │ │ Home │ AboutMe Projects │ 높이: 99px │ └──────┘ │ └──────────────────────────────────────────────────┘ 요소 값 전체 높이 99px 배경색 #ffffff 활성 메뉴 배경 #f5f5f5, 둥근 pill … 더 읽기
gemini "React 19 + Vite + Tailwind CSS 4 프로젝트를 생성해줘. 프로젝트 이름은 [프로젝트명]이야. react-router, axios, @fortawesome/react-fontawesome, @fortawesome/free-solid-svg-icons, swiper 패키지도 함께 설치해줘. .env 파일 예시와 vite.config.js도 작성해줘." 터미널을 열고 프로젝트를 생성할 폴더로 이동한다. [프로젝트명]을 원하는 이름으로 바꾼 뒤 실행한다. 1. GOFLIX 프로젝트 소개 이번 시리즈에서는 GOFLEX라는 넷플릭스 스타일의 영화 웹 애플리케이션(애플리케이션)을 처음부터 끝까지 직접 만든다. … 더 읽기
1. 시작하기 전에 완성코드 완성화면 1.1. 이 교안으로 만들 것 피그마 디자인을 보고 포트폴리오 웹사이트를 React로 직접 만들어봅니다. ┌──────────────────────────────────────────────┐ │ [로고] Home AboutMe Projects │ ← 네비게이션 ├──────────────────────────────────────────────┤ │ │ │ Title │ ← 히어로 │ Subtitle │ │ [Github] [Resume] │ │ │ ├──────────────────────────────────────────────┤ │ ABOUT ME │ ← 소개 │ 학력 / 자격사항 … 더 읽기
gemini "React 19 + Vite 프로젝트에서 main.jsx와 App.jsx를 작성해줘. main.jsx에는 createBrowserRouter와 RouterProvider로 라우터를 구성하고, App.jsx에는 Outlet을 구성해줘. 페이지 컴포넌트는 Home, MovieDetail, Category, ErrorPage이고, 경로는 각각 /, /movie/:id, /category/:type, * 야. [파일 경로: src/]" [파일 경로]를 실제 src 폴더 경로로 바꾼다. 생성된 파일을 src/ 폴더에 저장한다. 1. React 앱은 어디서 시작될까? 브라우저가 웹사이트를 열면, 가장 먼저 … 더 읽기
gemini "src/api/axios.js 파일을 작성해줘. axios.create()로 TMDB API 전용 인스턴스를 만들어야 해. baseURL은 https://api.themoviedb.org/3/, api_key는 import.meta.env.[API 키 환경변수명], language는 ko-KR, region은 KR로 설정해줘." .env 파일에 VITE_TMDB_API_KEY=본인의키를 저장한다. [API 키 환경변수명]을 VITE_TMDB_API_KEY로 바꾼다. 1. API란 무엇인가? API(Application Programming Interface, 에이피아이)는 프로그램끼리 데이터를 주고받는 약속된 통로이다. 레스토랑에 비유하면 이렇다. 손님(우리 앱)이 웨이터(API)에게 주문서(요청)를 전달하면, 주방(서버)이 음식(데이터)을 만들어서 웨이터가 … 더 읽기
