드디어 진짜 링크가 생겼다 (Day 8)

도로의 이것저것·2026년 7월 30일

AI에이전트

목록 보기
8/15

지금까지는 "터미널 켜고 npm run dev를 실행해야만 볼 수 있는" 사이트였어요. 오늘은 두 가지를 했어요. 소개·연락처 섹션을 채우고, Vercel로 실제 배포해서 클릭 한 번에 열리는 진짜 링크를 만들었어요.

1. About/Contact 섹션 추가

About - 자기소개 문단 + Day 1~ 7을 압축한 하이라이트 타임라인이에요.

  • Day 1~2: 코드 리뷰 도우미 CLI + VS Code 확장 뼈대
  • Day 3~4: 블로그 학습 RAG 완성 + 확장 화면 통합
  • Day 5: 기능 6개 추가 + 마켓플레이스 정식 배포
  • Day 6~7: 포트폴리오 사이트 제작 + 디자인 폴리시

Contact - "같이 이야기 나눠요" 문구 + 이메일 버튼 (mailto) + GitHub·벨로그·인스타 링크. Nav에도 두 섹션 앵커를 추가했어요.

2. Vercel로 실제 배포

GitHub 레포를 따로 안 만들고, Vercel CLI로 폴더를 바로 배포하는 방법을 썼어요.

npm install -g vercel
cd kodex-portfolio-site
vercel

vercel 명령을 실행하면 브라우저로 로그인창이 뜨고(디바이스 코드 방식이라 브라우저에서 코드확인 후 승인), 로그인하고 나면 터미널에서 몇 가지 질문이 이어져요.

  • "Which project?" → 처음이니까 Create a new project
  • "Customize settings?" → 자동 감지된 설정(Next.js, next build)을 그대로 쓰면 되니까 아무것도 선택하지 않고 그냥 Enter

이 과정을 거치면 https://kodex-portfolio-site-xxxx.vercel.app 같은 실제 URL이 바로 나와요. vercel --prod까지 실행하면 고정된 프로덕션 링크가 생겨요.

3. 배포하면서 발견한 것

배포 직전에 Contact/Hero의 인스타그램·이메일 링크가 플레이스홀더로 남아있던 걸 발견했어요. 실제 계정·이메일로 바꾸고 다시 배포했어요 — 사이트를 실제로 열어봐야만 눈에 띄는 디테일이었어요.

오늘까지 진행 상황

포트폴리오 사이트가 이제 로컬이 아니라 실제 URL로 열려요. Phase 3(포트폴리오 사이트)가 사실상 마무리 단계예요.

다음 계획

GitHub 레포와 Vercel 프로젝트를 연결해서, 앞으로는 코드를 푸시할 때마다 자동으로 재배포되게 만들 예정이에요. 그다음은 로드맵 Phase 4, 디스코드 봇 차례예요.

profile
AI 서비스 기획•개발자 취업 준비생 입니다

0개의 댓글