Vive Coding으로 웹페이지 만들기 + GitHubPage

개발자가 생성형 AI의 도움을 받아 코드를 작성하는 것.

결과물을 만들어내는 주체와 주도건이 사람보다 생성형 인공지능에 있다.

도구

github Copilot: gitHub와 OpenAI가 공동 개발한 AI 코딩 도구

• https://github.com/features/copilot?locale=ko-KR

Cursor: 코파일럿을 통해서 AI기반 코드 생성기가 핫하니 다른 여러 회사들이 코파일럿과 유사한 AI코드생성기를 만들었는데 이중 하나

Codex: OpenAI에서 개발한 AI코딩 에이전트

Gemini, Calude Code, ChatGPT….

진행단계

HTML 뼈대 작성

• Index.html : 로그인 버튼, 회원가입 버튼, 메인페이지
• signup.html: 회원가입 폼
• login.html: 로그인 폼

CSS 스타일링

• 색상, 위치, 반응형 카드 레이아웃, 정렬 요청…

JS이벤트 처리

• 회원정보를 확인할 수 있는 이벤트(입력이 다 되지 않았을 경우 아래쪽에 빨간 글씨 띄우기)
• 버튼 위에 마우스를 올렸을 때 색상 변경

페이지 연결

• 회원가입 완료 버튼 클릭 > 로그인 페이지로 이동
• 로그인 버튼 클릭시 > 메인페이지로 이동
• 로그아웃 버튼 클릭시> 로그인 페이지로 이동

바이브 코딩 시에 주의점

내가 원하는 내용을 상세히 설명해야 ai가 제대로 구현해준다.

• 관련 지식이 필요

GitHub Pages(정적페이지 구현)

깃허브에서 제공하는 무료 정적 웹사이트 호스팅 서비스

html, css, javascript로 만든 정적 웹 사이트를 깃허브 저장소에 올리면 바로 인터넷 공개 URL로 접근할 수 있게 해주는 기능

• 정적 웹사이트만 지원하므로, 서버(데이터베이스, 백엔드코드)는 실행할 수 없다.
• 프로젝트 사이트: https://사용자명.github.io/저장소이름/

동작원리

github에 레포지토리를 만든다

index.html 웹파일을 올린다

Settings > Pages 에서 GitHub Pages를 활성화한다

GitHub 브랜치의 파일들을 읽어 정적 웹사이트

git 관리

내가 원하는 폴더 들어가서 마우스 우클릭 git bash here클릭

$ git config --list

• user.name, user.email내것인지 확인

$ git status

• 현재 .git이 관리하는 폴더가 아니므로 fatal발생

$ git init.

$ git branch -m master main

• 브랜치명변경

$ git status

• 내가 원하는 폴더들 나온것을 확인

$git add myPage/

해당 폴더만 깃이 관리하도록 staging

래포지토리 만들고 푸쉬까지 마무리

- 이후 Settings탭에서 Pages에 Branch를 main/root로 만들고 save

index.html은 MyPage바로 앞에 있어야 한다.

**업로드 이후 404 오류가 뜰때가 많았는데, 나의 경우 index가 상대 위치를 찾지 못하는 경우가 있었다. 이때문에 절대 경로로 변경해주었고, 문제를 해결할 수 있었다.**

https://sucheoli.github.io/MyPage/

회원 인증 시스템 - 메인

위처럼 깃허브에 페이지를 생성해 정적 페이지를 만들어줄 수 있다.

이를 이용해 개인 포트폴리오 페이지를 만들어 주는 것도 좋은 방법이다.