[GitHub 100일 챌린지] Day 19 - 웹에서 파일 관리하기
[GitHub 100일 챌린지] Day 19 - 웹에서 파일 관리하기
100일 챌린지 Day 19 - GitHub 웹 인터페이스로 파일을 편집합니다
배울 내용
- 파일 추가, 수정, 삭제하기
- 폴더 만들고 관리하기
- 여러 파일 한번에 업로드
Topic1. 파일 추가, 수정, 삭제
GitHub 웹에서 파일을 관리하는 기본 작업입니다.
새 파일 만들기
해보기:
1
2
3
4
5
6
7
8
9
10
11
1. Repository 메인 페이지
2. "Add file" 버튼 클릭
3. "Create new file" 선택
4. 파일명 입력: docs/guide.md
5. 내용 작성:
# 사용 가이드
이 프로젝트는...
6. Commit message: Add user guide
7. "Commit new file" 클릭
폴더와 함께 만들기:
1
2
3
4
파일명에 / 입력:
docs/guide.md
↑
자동으로 docs 폴더 생성
파일 편집하기
해보기:
1
2
3
4
5
6
7
8
1. 파일 클릭 (예: README.md)
2. 연필 아이콘 (Edit) 클릭
3. 내용 수정
4. "Preview" 탭으로 확인
5. 하단 "Commit changes" 섹션:
- 제목: Update README
- 설명: Add new section
6. "Commit changes" 클릭
단축키:
1
2
3
파일 보기 화면에서:
- E 키: 편집 모드
- . 키: github.dev 에디터 열기
파일 삭제하기
해보기:
1
2
3
4
1. 삭제할 파일 클릭
2. 휴지통 아이콘 클릭
3. Commit message: Remove old file
4. "Commit changes" 클릭
주의:
1
2
3
4
5
⚠️ 삭제 후 복구:
git log에서 찾을 수 있지만
웹에서는 어려움
⚠️ 신중하게 삭제
파일 이름 변경
해보기:
1
2
3
4
1. 파일 편집 모드 (연필 아이콘)
2. 파일명 클릭해서 수정
old-name.md → new-name.md
3. Commit changes
폴더 이동:
1
2
파일명 수정으로 폴더 이동:
guide.md → docs/guide.md
결과: 웹에서 파일을 자유롭게 생성, 수정, 삭제할 수 있습니다
Topic2. 폴더 만들고 관리하기
GitHub에서 폴더를 관리하는 방법입니다.
폴더 생성
방법: 파일과 함께 만들기
1
2
빈 폴더는 생성 불가!
파일을 포함한 폴더만 가능
해보기:
1
2
3
4
5
6
7
8
1. "Add file" → "Create new file"
2. 파일명: src/main.js
↑
폴더명/파일명
3. 내용 입력:
console.log('Hello, World!');
4. Commit new file
여러 단계 폴더:
1
2
3
src/components/Button.js
↑ ↑
폴더 하위폴더
폴더 구조 예시
프로젝트 구조 만들기:
1
2
3
4
5
6
7
8
my-project/
├── src/
│ ├── index.js
│ └── utils.js
├── docs/
│ └── README.md
└── tests/
└── test.js
생성 순서:
1
2
3
4
1. src/index.js 생성
2. src/utils.js 생성
3. docs/README.md 생성
4. tests/test.js 생성
README.md로 폴더 설명
각 폴더에 README.md 추가:
1
2
3
4
5
6
7
8
9
src/README.md:
# Source Code
메인 소스 코드 폴더입니다.
docs/README.md:
# Documentation
프로젝트 문서 폴더입니다.
폴더 이동/삭제
폴더 이름 변경:
1
2
3
4
❌ 직접 불가능
✅ 파일 하나씩 이동
old-folder/file.js
→ new-folder/file.js
폴더 삭제:
1
2
3
❌ 직접 불가능
✅ 내부 파일을 모두 삭제하면
폴더 자동 삭제
해보기: 프로젝트 구조 만들기
1
2
3
4
1. src/index.js 생성
2. src/components/Button.js 생성
3. docs/guide.md 생성
4. README.md에 구조 설명 추가
결과: 체계적인 폴더 구조를 만들 수 있습니다
Topic3. 여러 파일 한번에 업로드
로컬 파일을 Repository에 업로드하는 방법입니다.
파일 업로드
해보기:
1
2
3
4
5
6
1. "Add file" → "Upload files"
2. 파일 드래그 앤 드롭
또는 "choose your files" 클릭
3. 여러 파일 선택 가능
4. Commit message: Upload assets
5. "Commit changes" 클릭
업로드 가능한 것:
1
2
3
4
5
✅ 이미지 (.png, .jpg, .gif)
✅ 문서 (.pdf, .md, .txt)
✅ 데이터 (.csv, .json, .xml)
✅ 압축 (.zip, .tar.gz)
✅ 코드 (.js, .py, .java)
크기 제한:
1
2
3
⚠️ 파일: 최대 100MB
⚠️ Repository: 1GB 권장
⚠️ 대용량: Git LFS 사용
폴더째 업로드
해보기:
1
2
3
4
5
6
1. 로컬에서 폴더 압축
images/ → images.zip
2. GitHub에서 Upload files
3. images.zip 업로드
4. 압축 해제는 수동
더 나은 방법:
1
2
3
Git CLI 사용 (나중에 배움)
- 폴더 구조 유지
- 대용량 처리
이미지 파일 관리
추천 구조:
1
2
3
4
5
6
7
8
repository/
├── images/
│ ├── logo.png
│ └── screenshot.png
├── docs/
│ └── images/
│ └── diagram.png
└── README.md
README에서 사용:
1
2
드래그 앤 드롭 팁
Issue/PR에서도 가능:
1
2
3
4
1. Issue 작성 중
2. 이미지 드래그
3. 자동으로 업로드 + 링크 생성
README 편집 중에도:
1
2
3
1. README.md 편집
2. 이미지 드래그
3. Markdown 링크 자동 생성
해보기: 이미지 업로드하기
1
2
3
4
5
1. 스크린샷 1장 준비
2. Upload files로 업로드
3. README.md 편집
4.  추가
5. Preview로 확인
결과: 이미지와 파일을 쉽게 관리할 수 있습니다
정리
완료 체크:
- 웹에서 파일을 생성, 수정, 삭제할 수 있다
- 폴더 구조를 만들 수 있다
- 여러 파일을 업로드할 수 있다
웹 파일 관리 요약:
1
2
3
4
5
생성: Add file → Create new file
수정: 파일 클릭 → 연필 아이콘
삭제: 파일 클릭 → 휴지통 아이콘
폴더: 파일명에 / 사용
업로드: Add file → Upload files
단축키:
1
2
3
E: 편집 모드
.: github.dev 에디터
T: 파일 검색
한계점:
1
2
3
4
5
❌ 여러 파일 동시 편집
❌ 대용량 파일 (>100MB)
❌ 복잡한 Git 작업
→ 다음 Phase에서 Git CLI 배움
다음: Day 20 - Repository Settings 최적화 →
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.