완성_정리

작성자:

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

CSS

작성자:

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

App

작성자:

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

시작하기

작성자:

1. 시작하기 전에 완성코드 완성화면 1.1. 이 교안으로 만들 것 피그마 디자인을 보고 포트폴리오 웹사이트를 React로 직접 만들어봅니다. ┌──────────────────────────────────────────────┐ │ [로고] Home AboutMe Projects │ ← 네비게이션 ├──────────────────────────────────────────────┤ │ │ │ Title │ ← 히어로 │ Subtitle │ │ [Github] [Resume] │ │ │ ├──────────────────────────────────────────────┤ │ ABOUT ME │ ← 소개 │ 학력 / 자격사항 … 더 읽기

Nav

작성자:

03. Nav.jsx — 네비게이션 바 이번 단계에서 할 일 상단 네비게이션 바를 만듭니다. 클릭한 메뉴가 회색 pill 배경으로 바뀌는 기능도 구현합니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ [로고] ┌──────┐ │ │ │ Home │ AboutMe Projects │ 높이: 99px │ └──────┘ │ └──────────────────────────────────────────────────┘ 요소 값 전체 높이 99px 배경색 #ffffff 활성 메뉴 배경 #f5f5f5, 둥근 pill … 더 읽기

Footer

작성자:

08. Footer.jsx — 하단 푸터 이번 단계에서 할 일 SNS 아이콘 링크와 저작권 정보가 담긴 푸터를 만듭니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ │ │ Thanks X IG YT LI │ │ │ │ copyright All right │ │ │ └──────────────────────────────────────────────────┘ 높이: 324px 요소 값 "Thanks" 폰트 20px, #1e1e1e SNS 아이콘 크기 24px × 24px 아이콘 … 더 읽기

Projects

작성자:

06. Projects.jsx — 프로젝트 섹션 이번 단계에서 할 일 프로젝트 목록을 데이터 배열로 관리하고, map으로 화면에 출력하는 방법을 배웁니다. 피그마 디자인 분석 │ ─── Projects ──────────────────────────────────── │ │ │ │ ┌──────────────────────┬───────────────────────┐ │ │ │ ● Project 01 │ │ │ │ │ │ │ │ │ │ 동대문구청 │ 이미지 영역 │ │ │ │ … 더 읽기

Hero

작성자:

04. Hero.jsx — 히어로 섹션 이번 단계에서 할 일 페이지 상단의 인상적인 소개 영역(히어로 섹션)을 만듭니다. 피그마 디자인 분석 ┌──────────────────────────────────────────────────┐ │ │ │ Title ← 폰트 72px, 색상 #0c0c0d │ │ Subtitle ← 폰트 32px, 색상 #0c0c0d │ │ │ │ [Github] [Resume] │ │ ↑ 밝은버튼 ↑ 어두운버튼 │ │ #e3e3e3 #2c2c2c (흰 텍스트) … 더 읽기

GOFLEX Gemini CLI 바이브코딩 프롬프트 템플릿

작성자:

GOFLEX Gemini CLI 바이브코딩 프롬프트 템플릿 프로젝트 루트(최상위 폴더)에서 gemini 명령을 실행한 후 아래 프롬프트를 사용한다. @파일경로 문법으로 파일을 명시적으로 주입(직접 지정)하면 AI의 정확도가 높아진다. Tip: –approval-mode=default 옵션을 사용하면 파일을 변경하기 전에 항상 확인을 요청한다. 처음 작업하는 기능에는 이 옵션을 사용하는 것을 권장한다. 1. 프로젝트 최초 세팅 GEMINI.md는 프로젝트 전체에 적용되는 AI 지침 파일이다. 한 … 더 읽기

AI 챗봇 연동하기

작성자:

Tip: Gemini CLI로 구현하기 — AI 챗봇 컴포넌트 프롬프트: gemini "src/components/Chatbot.jsx를 작성해줘. 화면 우하단에 고정된 플로팅 버튼을 클릭하면 채팅창이 열리는 컴포넌트야. useState로 열림/닫힘, 메시지 목록, 입력값, 로딩 상태를 관리하고, useRef로 새 메시지가 오면 자동 스크롤해줘. 메시지 전송 시 [백엔드 URL]/chat 엔드포인트에 fetch로 POST 요청을 보내줘. Tailwind CSS를 사용해줘." 사용 가이드: [백엔드 URL]을 배포된 서버 주소로 … 더 읽기