1강. React 개발 환경 이해 React 19와 Vite를 기반으로 개발 환경을 구축하고 기본 개념을 이해한다. 1. 웹 개발의 변화와 React SPA (Single Page Application)의 등장 과거의 웹은 페이지를 이동할 때마다 서버로부터 새로운 HTML을 받아오는 MPA(Multi Page Application) 방식이었다. 이는 화면 깜빡임이 발생하고 사용자 경험이 저하되는 단점이 있다. React는 SPA 방식을 채택한다. 하나의 HTML 페이지(index.html)만 로드하고, … 더 읽기
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 … 더 읽기
1. Scaffolding React Project 프로젝트 폴더를 최상위로 연다. 필요 없는 파일 삭제 (이미지에 표시된 파일을 삭제) 코드수정 – 표시된 부분을 삭제 App.tsx 코드 추가수정→표시된 부분 삭제 하고 코드작성 function App() { return <h1>HI</h1>; } export default App; 앱 실행 하기 npm run dev 터미널에 응답이 출력되면서 local 주소가 확인되면 브라우저 주소창에 해당 링크로 이동하여 렌더링 … 더 읽기