Project 검색 결과

해당 글 9건

[GitHub Pages] 리액트(Vite) 프로젝트 GitHub Pages 기본 도메인 배포하기

커스텀 도메인을 사용하지 않고 GitHub에서 제공하는 기본 도메인으로 배포할 때는 '경로(Path)' 설정이 가장 중요합니다. 최신 표준인 Vite를 기준으로 설명합니다.1. gh-pages 패키지 설치배포를 도와주는 gh-pages 패키지를 프로젝트에 설치해야 합니다. 터미널에 아래 명령어를 입력하세요.Bash npm install gh-pages --save-dev2. package.json 설정 수정프로젝트의 루트에 있는 package.json 파일을 열어 두 가지를 추가/수정합니다.homepage 주소 추가: 맨 위에 내 사이트의 전체 주소를 적어줍니다.scripts 수정: 배포용 명령어를 추가합니다.JSON { "name": "my-project", "homepage": "https://내..
Project 2026. 1. 19. 15:14

[GitHub Pages] 리액트 사이트 GitHub Pages 배포, 404 에러 해결까지 완벽 가이드

1. 프로젝트 초기 생성 (Terminal)가장 먼저 Vite를 이용해 리액트 타입스크립트 환경을 구축합니다. Vite는 기존 Webpack보다 빌드 속도가 압도적으로 빨라 최근 표준으로 자리 잡고 있습니다.💡 터미널 입력:# 1. 프로젝트 생성 (원하는 프로젝트명을 입력하세요)npm create vite@latest sjdev-portfolio -- --template react-ts# 2. 프로젝트 폴더로 이동cd sjdev-portfolio# 3. 필요한 기본 의존성 설치npm install2. GitHub 레포지토리 연결 및 소스 업로드로컬에서 만든 프로젝트를 GitHub에 먼저 올려야 합니다. GitHub Desktop보다는 터미널을 이용하는 것이 협업과 자동화 측면에서 더 유리합니다.💡 터..
Project 2026. 1. 19. 13:46

[GitHub Pages] 커스텀 도메인 연결 및 www 설정 완벽 가이드

Vite로 만든 포트폴리오를 가비아에서 구매한 한글 도메인에 연결하고, GitHub Actions로 자동 배포 환경을 구축하는 과정에서 겪은 시행착오와 해결 방법을 공유합니다.1. 가비아(Gabia) DNS 설정 (A 레코드 & CNAME)가비아 DNS 관리 툴에서 아래와 같이 총 5개의 레코드를 등록해야 합니다.A 레코드 (@): 루트 도메인(박성진.com)을 GitHub 서버로 연결합니다. GitHub에서 제공하는 4개의 IP를 모두 등록하는 것이 안정적입니다.185.199.108.153185.199.109.153185.199.110.153185.199.111.153CNAME (www): www가 붙은 주소로 접속해도 잘 연결되도록 설정합니다.호스트: www값/위치: 내아이디.github.io. (마..
Project 2026. 1. 19. 13:41

[프롬프트] 포트폴리오의 한 끝 차이: AI와 함께 엔지니어링 디테일(수치, 터미널, API) 한 스푼 더하기

Step 5. 데이터로 증명하는 성능 (Engineering Metrics)성능 최적화 경험을 단순 텍스트가 아닌 '지표'로 시각화하여 신뢰도를 극대화합니다.Prompt 5: Visualization of Optimization Results "나의 최적화 성과를 시각적으로 증명할 수 있는 'Engineering Metrics' 섹션을 구현함.[지침]시각화: recharts 혹은 CSS를 활용해 MySQL 인덱스 적용 전/후 응답 속도(0.5s → 0.1s) 비교 차트 생성.지표 대시보드: Lighthouse 점수, API 성공률, 테스트 커버리지 등의 핵심 지표를 담은 카드 배치.디자인: 테마 컬러(에메랄드)를 활용하고 유리창 효과(Glassmorphism)를 적용해 고급스러운 느낌 부여."Step 6..
Project 2026. 1. 14. 18:44

[프롬프트] GitHub Copilot과 함께하는 데이터 중심 포트폴리오 설계: Vite + Tailwind v4 구축기

단순히 "예쁜" 포트폴리오가 아니라, 데이터의 흐름을 이해하고 시스템의 무결성을 고민하는 엔지니어로서의 정체성을 보여주고 싶었습니다. 이를 위해 GitHub Copilot을 단순한 코드 생성기가 아닌 '아키텍트 파트너'로 활용하여 프로젝트를 설계했습니다. 제가 사용한 단계별 프롬프트와 전략을 공유합니다.🛠 Tech StackFrontend: Vite, React, TypeScriptStyling: Tailwind CSS v4 (Alpha/Latest), Framer MotionFocus: Data-Centric Design, Scalability, System Architecture🚀 Step-by-Step Prompt RoadmapStep 1. 아키텍처 및 데이터 중심 디자인 시스템기초 설정 단계부..
Project 2026. 1. 14. 18:19

[프로젝트] React 를 이용한 프로젝트 만들기

1. vite 기본 불러오기npm create vite@latestreact , javascript 선택cd adra-react-app 경로 설정 npm install npm run dev같이 뜨는 주소 접속해보면 확인가능하다.ctrl + c 누르면 나와진다. 2. 라우팅 설정하기 리액트 라우터 돔 : 사용자가 각 페이지로 이동할 수 있도록 길을 만들어주는 작업npm install react-router-dom App.jsx 작성: App.jsx 파일을 열고, react-router-dom의 , , 컴포넌트를 사용하여 각 페이지에 경로를 연결합니다.import React from 'react';import { BrowserRouter, Routes, Route } from 'react-rout..
Project 2025. 8. 18. 14:46