React

react-vite-설치

작성자:

리액트 공식문서 불필요한 파일 삭제 – src 폴더에서 불필요한 파일들(.sh, .fcss, index.css 등) 삭제 – 이미지 파일들과 관련 에셋 파일들 제거 – 프로젝트 구조를 간소화하여 필수 파일만 남김 오류 메시지 해석 및 해결 방법 – 터미널의 오류 메시지에서 파란색 파일명 확인 (Ctrl+클릭으로 해당 위치로 이동) – 파일이 없는데 불러오려는 import 구문 제거 – 삭제된 이미지 … 더 읽기

Contact

작성자:

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

바이브코딩

작성자:

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

App

작성자:

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

CSS

작성자:

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

완성_정리

작성자:

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단계 … 더 읽기

AboutMe

작성자:

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

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 … 더 읽기

Header와 Footer 만들기

작성자:

Tip: Gemini CLI로 구현하기 — Header & Footer 컴포넌트 프롬프트: gemini "src/components/Header.jsx와 Footer.jsx를 작성해줘. Header는 fixed로 상단에 고정되고, [로고명] 텍스트 클릭 시 홈(/)으로 이동해야 해. Container 컴포넌트(./UI에서 import)를 사용해서 내용을 가운데 정렬해줘. Footer는 하단에 로고와 저작권 문구를 표시해줘. Tailwind CSS를 사용해줘." 사용 가이드: [로고명]을 서비스 이름(예: GOFLEX)으로 바꾼다. 네비게이션 메뉴가 필요하면 프롬프트 마지막에 "헤더에 [메뉴 … 더 읽기

JSX 문법과 컴포넌트

작성자:

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