1. 컴퓨터에서 파일을 만드는 도구
- 파일
- 글, 사진, 코드처럼 컴퓨터에 저장되는 하나의 자료입니다.
- 폴더
- 파일을 담아 정리하는 상자입니다.
- 메모장
- 글이나 간단한 HTML 파일을 만들 수 있는 기본 프로그램입니다.
- VS Code
- 코드와 파일을 보기 좋게 열고 수정하는 프로그램입니다.
- 파이썬(Python)
- 컴퓨터에게 일을 시키기 위해 쓰는 프로그래밍 언어입니다.
- 터미널 / PowerShell
- 명령어를 글자로 입력해서 컴퓨터에게 일을 시키는 창입니다.
- 명령어
- 터미널에 입력하는 짧은 지시문입니다.
cd- 터미널에서 “이 폴더로 이동하세요”라는 명령어입니다.
- 로컬(Local)
- 인터넷에 올리기 전, 내 컴퓨터 안에서만 파일을 만들고 확인하는 상태입니다.
2. 웹페이지를 만드는 방식
- 웹페이지
- 브라우저에서 보는 한 화면입니다.
- 브라우저
- 웹페이지를 여는 프로그램입니다. Edge, Chrome 등이 있습니다.
- HTML
- 웹페이지에 무엇을 보여 줄지 적는 방식입니다. 제목, 문장, 사진 등을 넣습니다.
- CSS
- 글자체, 색, 크기, 위치처럼 웹페이지를 꾸미는 방식입니다.
index.html- 웹사이트의 첫 화면으로 가장 흔히 쓰는 파일 이름입니다.
styles.css- CSS 꾸미기 내용을 따로 저장할 때 흔히 쓰는 파일 이름입니다.
- < >
- 브라우저에게 하는 지시문 표시입니다. 예를 들어
<h1>은 “큰 제목을 시작하세요”라는 뜻입니다. - 글자체(Font)
- 글자가 보이는 모양입니다. 맑은 고딕, 하나금융그룹체 등이 있습니다.
- 새로고침
- 수정한 웹페이지를 다시 불러오는 일입니다. 보통
Ctrl + R을 누릅니다.
3. 내 컴퓨터에서 웹페이지 보기
- 로컬 웹페이지
- 내 컴퓨터에서만 열리는 웹페이지입니다.
public폴더- 웹페이지로 공개할 파일을 넣어 두는 폴더 이름으로 자주 사용합니다. 폴더 이름일 뿐, GitHub 저장소 자체가 공개된다는 뜻은 아닙니다.
4. Git과 GitHub
- Git
- 파일이 언제 어떻게 바뀌었는지 기록하는 도구입니다.
- GitHub
- Git으로 관리하는 파일을 인터넷에 보관하는 서비스입니다.
- 저장소(Repository)
- GitHub 안에서 프로젝트별로 파일을 담아 두는 독립된 공간입니다.
- 폴더와 저장소의 차이
- 폴더는 내 컴퓨터 안의 정리 상자이고, 저장소는 GitHub 안의 프로젝트 보관함입니다.
- README
- 저장소가 무엇을 위한 곳인지 설명하는 소개 문서입니다.
- Public
- 누구나 GitHub에서 볼 수 있는 상태입니다.
- Private
- 허락된 사람만 GitHub에서 볼 수 있는 상태입니다.
- Commit
- 바꾼 내용을 GitHub에 하나의 기록으로 확정하는 일입니다.
- Push
- 내 컴퓨터에서 만든 Git 기록을 GitHub로 보내는 일입니다.
- Pull
- GitHub에 있는 최신 파일을 내 컴퓨터로 받아오는 일입니다.
5. GitHub CLI와 로그인
- GitHub CLI
- 터미널에서 GitHub를 다룰 수 있게 해 주는 도구입니다.
- HTTPS
- 내 컴퓨터와 GitHub가 파일을 주고받는 방식입니다. 처음에는 이것을 선택하면 됩니다.
- SSH
- 파일을 주고받는 다른 방식입니다. 별도의 열쇠 설정이 필요할 수 있습니다.
- 토큰(Token)
- GitHub CLI가 내 계정 권한을 갖고 있다는 것을 보여 주는 비밀 열쇠입니다.
- Token scopes
- 그 토큰이 할 수 있도록 허락받은 일의 범위입니다.
6. Codex
- Codex
- 말로 요청하면 파일을 만들고 수정하는 일을 도와주는 AI입니다.
- 자연어 요청
- 명령어 대신 “제목을 80%로 줄여 주세요”처럼 평소 말로 요청하는 방식입니다.
- 로컬 파일 생성
- Codex가 내 컴퓨터의 작업 폴더에 HTML, CSS, README 같은 파일을 만들어 주는 일입니다.
- 리뷰(Review)
- 바뀐 파일과 내용을 확인하는 과정입니다.
7. Cloudflare Pages와 배포
- Cloudflare
- 웹사이트를 인터넷에 빠르게 공개하고 운영할 수 있게 해 주는 서비스입니다.
- Cloudflare Pages
- GitHub의 웹파일을 실제 웹사이트 주소로 만들어 주는 Cloudflare 기능입니다.
- 배포(Deploy)
- 만든 웹페이지를 다른 사람도 인터넷에서 볼 수 있게 만드는 일입니다.
- 프로젝트(Project)
- Cloudflare에서 배포할 웹사이트 하나를 부르는 이름입니다.
- GitHub 연결
- Cloudflare가 GitHub 저장소의 파일을 읽을 수 있게 연결하는 일입니다.
pages.dev주소- Cloudflare가 배포 뒤에 만들어 주는 실제 공개 웹사이트 주소입니다.
- 자동 배포
- GitHub에 새 파일을 올리거나 수정하면 Cloudflare가 알아서 새 버전을 배포하는 기능입니다.
Wrangler와 설정 파일
- Wrangler
- 터미널에서 Cloudflare를 다룰 때 사용하는 도구입니다.
wrangler.toml- 프로젝트 설정을 적어 두는 파일입니다.
name- Cloudflare 프로젝트 이름입니다.
pages_build_output_dir- 배포할 웹페이지 파일이 있는 폴더입니다. 예:
./public compatibility_date- Cloudflare 기능이 작동하는 기준 날짜입니다.