초급

10. props

작성자:

1. 리액트 props 1.1. 데이터의 동적출력 리액트에서 컴포넌트를 생성하는 문법을 JSX(JavaScript XML: Javascript에 XML을 추가한 확장한 문법) 라고 합니다. jsx 에는 {} 기호 안에 자바스크립트 를 작성하면 자바스크립트 코드를 실행할수 있습니다. MemberItem 컴포넌트에서 사용하고 있는 데이터를 자바스크립트의 표현식으로 변경하여 작성해보겠습니다 1.1.1. 작성 components/MemberItem.js 를 수정합니다. //MemberItem.js import "./MemberItem.css"; const MemberItem = () => { const member = … 더 읽기

05. 컴포넌트

작성자:

1. 리액트컴포넌트 1.1. 리액트 앱 구조 1.1.1. 이미지 리소스 주소 수업에 사용할 이미지 파일의 주소 입니다. http://qwerew.cafe24.com/images/pet-1.jpg http://qwerew.cafe24.com/images/pet-2.jpg http://qwerew.cafe24.com/images/pet-3.jpg http://qwerew.cafe24.com/images/pet-4.jpg http://qwerew.cafe24.com/images/pet-5.jpg http://qwerew.cafe24.com/images/pet-6.jpg http://qwerew.cafe24.com/images/pet-7.jpg http://qwerew.cafe24.com/images/pet-8.jpg 1.1.2. 리액트 앱의 폴더 구성 리액트 앱의 폴더와 파일의 구성과 역할을 알아봅시다. react-test/ |-**node_modules**/ # 의존성 파일을 담은 폴더 |- **src**/ |- **App.js** # 최상위 컴포넌트 |- **index.js** # 앱 진입점 … 더 읽기

03. react-vite-설치

작성자:

1. React를 라이브러리로 설치 1.1.Vite 아래의 링크에서부터 시작한다. npm install npm run dev 2. React를 프레임워크로 설치 Next.jsRemixGatsbyExpo (for native apps)Bleeding-edge React frameworksNext.js (App Router) 리액트 프로젝트 생성 시 앱 네이밍 규칙은 다음과 같다. 3. 프로젝트명 규칙 4. 코칭프롬프 vite로 현재 폴더에 React 프로젝트를 생성해줘. 상태관리 라이브러리 없이, 타입스크립트도 사용하지 않고, 자바스크립트 기반의 최소 설정으로 … 더 읽기

08. Contact

작성자:

07. Contact.jsx — EmailJS로 이메일 전송 이번 단계에서 할 일 Contact 폼에서 입력한 내용을 실제 이메일로 전송한다. EmailJS — 백엔드 서버 없이 프론트엔드에서 바로 이메일을 보내주는 서비스이다. 피그마 디자인 분석 │ ─── contacts ──────────────────────────────── │ │ │ │ Name │ │ ┌────────────────────────────────────────┐ │ │ │ Value │ │ 높이: 40px │ └────────────────────────────────────────┘ │ │ │ … 더 읽기

02. App

작성자:

01. App.jsx — 전체 레이아웃 조립 이번 단계에서 할 일 만들 컴포넌트들을 App.jsx 에 미리 배치합니다. 지금은 빈 껍데기만 만들고, 다음 단계에서 하나씩 채워나갑니다. App.jsx 역할 App.jsx ├── <Nav /> ← 네비게이션 ├── <Hero /> ← 히어로 섹션 ├── <main> │ ├── <AboutMe /> ← 소개 │ ├── <Projects /> ← 프로젝트 │ └── <Contact … 더 읽기

03. CSS

작성자:

02. index.css — 기본 스타일 설정 이번 단계에서 할 일 모든 컴포넌트에 공통으로 적용되는 기본 스타일을 작성합니다. 왜 초기화가 필요한가요? 브라우저(Chrome, Firefox, Edge 등)마다 기본 스타일이 조금씩 다릅니다. 예를 들어 <h1> 태그의 기본 크기나 여백이 브라우저마다 다를 수 있습니다. 이 프로젝트는 reset-css 라이브러리로 초기화를 합니다. npm install 시 이미 설치되어 있으며, @import 로 불러옵니다. npm … 더 읽기

10. 완성_정리

작성자:

09. 완성 및 오류 정리 최종 파일 목록 src/ ├── main.jsx ✅ 라우터 연결 ├── router.js ✅ 라우터 설정 ├── App.jsx ✅ 01단계 ├── index.css ✅ 각 단계에서 추가 └── components/ ├── SectionTitle.jsx ✅ 05단계 ├── Nav.jsx ✅ 03단계 ├── Hero.jsx ✅ 04단계 ├── AboutMe.jsx ✅ 05단계 ├── Projects.jsx ✅ 06단계 ├── Contact.jsx ✅ 07단계 … 더 읽기

06. AboutMe

작성자:

05. AboutMe.jsx — 소개 섹션 이번 단계에서 할 일 학력, 자격사항, 인적사항을 보여주는 소개 섹션을 만듭니다. 재사용 컴포넌트를 만드는 방법을 배웁니다. 피그마 디자인 분석 │ ─── ABOUT ME ──────────────────────────────────── │ │ 끈기와 열정으로 성장하는 오성의입니다. │ │ │ │ ┌──────────────────────┬──────────────────────┐ │ │ │ 학력 및 교육사항 │ 인적사항 │ │ │ │ 22.10-22.10 | 수료 … 더 읽기

11. 메이크 바이브코딩

작성자:

1. 피그마(Figam Design) 피그마 디자인 파일을 Make로 전송한다. 2. 메이크(Figam Make) AI 크레딧: stater 플랜의 경우 매달 500크레딧 생성 일일한도 150 크레딧 소진 비용은 코드의 복잡도에 따라 다름 2.1. 생성하기 Make보기 피그마 디자인 파일의 프레임에서 우클릭하여 Make로 전송 선택 아래의 프롬프트 입력 후 메시지 전송 아래 요구사항에 맞게 구현해 [요구사항] React 순수한 css 외부파일(tailwind css … 더 읽기

13. 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) — … 더 읽기