> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/learning-history/preparing-for-class/preparing.md). # 학습 준비 Git, GitHub을 사용해 학습 준비를 합니다. ([Git](https://git-scm.com/), [Node.js](https://nodejs.org/en/), [NPM](https://www.npmjs.com/) 설치 | [GitHub](https://github.com) 계정 필요) {% hint style="success" %} **\[CLI]** / **\[GitHub]** / **\[INSTALL]** / **\[VSCode]** 각 플래그(flags)에 맞춰 실습을 진행합니다. {% endhint %} * [x] **\[CLI]** 로컬 저장소 생성 * [x] **\[CLI]** 생성된 로컬 저장소로 이동 * [x] **\[CLI]** [버전 관리 시스템 초기화](https://bit.ly/3krG8EU) (❖ Git 사용이 처음 경우, [최초 설정](https://bit.ly/3pZ0IxC) 필요) * [x] **\[CLI]** `README.md` 문서 작성 * [x] **\[CLI]** 변경 사항 추가(add) & 커밋(commit) {% hint style="info" %} Branch 이름이 master 인 경우, **main** 으로 변경합니다. ```bash git branch -M main ``` {% endhint %} {% hint style="info" %} **Git 브랜치 main 수동 변경 방법** 기존의 원격 저장소 master 브랜치 대신, main으로 이름을 변경할 경우, 다음과 같이 수행합니다. ```bash # master 브랜치로 체크아웃 (현재 브랜치가 master인 경우 생략 ) $ git checkout master # 브랜치 이름 master → main 변경 $ git branch -M main # 원격 저장소 최신 커밋(변경 이력) 가져오기 $ git fetch # origin/master 연결 해제 $ git branch --unset-upstream # origin/main 여결 $ git branch -u origin/main # 기본 브랜치를 origin/main으로 업데이트 $ git symbolic-ref refs/remotes/origin/HEAD refs/remotes/origin/main ``` {% endhint %} * [x] **\[GitHub]** 온라인 저장소 생성 * [x] **\[CLI]** 로컬 저장소 → [온라인 저장소 연결](https://bit.ly/3kwqQyH) {% hint style="info" %} [git-open](https://www.npmjs.com/package/git-open) 패키지를 글로벌 설치하면 CLI 환경에서 바로 GitHub 저장소를 열 수 있습니다. ```bash git open ``` {% endhint %} {% hint style="info" %} [Git LFS](https://git-lfs.github.com/)를 설치하면 대용량 파일(약 2GB) 또한 제한 없이 버전 관리할 수 있습니다. ([참고](https://newsight.tistory.com/330)) ```bash git lfs install git lfs track "*.psd" ``` {% endhint %} * [x] **\[CLI]** [`code`](/learning-react-app/tip-and-references/visual-studio-code/visual-studio-code-command.md#code-command) 커맨드 → VS Code 저장소 열기 ## 구성 파일 추가 프로젝트를 Visual Studio Code 에디터에서 연 다음 이어서 진행합니다. * [x] **\[VSCode]** 프로젝트 구성 파일 작성 {% hint style="info" %} 프로젝트 루트 위치에 구성해야 할 파일 목록은 다음과 같습니다. * [.gitignore](https://www.toptal.com/developers/gitignore) * [.gitattributes](https://git-scm.com/book/ko/v2/Git%EB%A7%9E%EC%B6%A4-Git-Attributes) * [.editorconfig](https://editorconfig.org/) * [.htmlhintrc](https://htmlhint.com/) * [.prettierrc](https://prettier.io/docs/en/configuration.html#basic-configuration) * [.prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore) * [.vscode/settings.json](/learning-react-app/tip-and-references/visual-studio-code/backup-repair-extensions.md) {% endhint %} ## Git 에디터 등록 Git 기본 에디터를 Visual Studio Code로 설정합니다. * [x] **\[VSCode]** [Git 클라이언트 설정](https://bit.ly/2NC1TpD) 기본 에디터 → `"code --wait"` {% hint style="warning" %} Git 기본 에디터로 VS Code가 설정되지 않을 경우, **bin** 위치를 직접 찾아 설정해줘야 합니다. "**/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code --wait**" {% endhint %} ## Commit 규칙 Commit 작성 [규칙 50/72](https://chris.beams.io/posts/git-commit/)에 맞춰 Visual Studio Code를 설정합니다. ([참고](https://velog.io/@haejung/Git-%EC%BB%A4%EB%B0%8B-%EB%A9%94%EC%8B%9C%EC%A7%80-5072-%EA%B7%9C%EC%B9%99-%EC%86%8C%EA%B0%9C)) * [x] **\[VSCode]** **커밋 메시지 에디터 규칙 50/72 설정** * [ ] 제목은 50자 내외 ( 마침표(`.`) 사용 ✘ ) * [ ] 제목과 본문은 빈 줄로 구분 * [ ] 본문은 한 줄에 72자 안으로 작성 * [ ] 본문은 "무엇"을, "왜", "어떻게" 작성했는 지 기술 {% tabs %} {% tab title="settings.json" %} ```javascript "[git-commit]": { "editor.fontFamily": "D2Coding", "editor.rulers": [50, 72] } ``` {% endtab %} {% endtabs %} * [x] **\[VSCode]** 변경 사항 추가 & 커밋 | 커밋 플래그 | 내용 | | ---------------------- | --------------------- | | **추가 (Added)** | 새로운 내용이 추가된 경우 | | **변경 (Changed)** | 기존 기능이 변경된 경우 | | **중단 예정 (Deprecated)** | 더 이상 지원 예정이 없어 제거될 경우 | | **수정 (Fixed)** | 버그가 발견되어 수정된 경우 | | **취약점 (Security)** | 취약점이 발견된 경우 | ![](/files/-MUg8vFEC4GNkktyBM9p) ## GitHub 푸시 GitHub 온라인 저장소에 프로젝트를 푸시합니다. (최초 푸시일 경우, `-u` 옵션 플래그 사용 필요) * [x] **\[VSCode]** GitHub 원격 저장소에 푸시([push](https://bit.ly/3sF31aV)) ```bash # Git pull/status에 대한 업스트림 설정 # -u, --set-upstream git push -u origin main ``` ![](/files/-MUgQp1b_hJxfs28GO35) ## Git 별칭 등록 손쉬운 Git 명령어 실행을 위해 원하는 별칭을 등록합니다. * [x] **\[VSCode]** Git 별칭([alias](https://bit.ly/3r0YFu1)) 등록 ## Git 글로벌 구성 Git 글로벌 설정 파일을 열어 보다 편하게 설정할 수 있습니다. * [x] **\[VSCode]** [Git 글로벌 설정](https://bit.ly/2ZWVs2N) 작성 ```bash code ~/.gitconfig ``` {% tabs %} {% tab title="\~/.gitconfig" %} ```bash [user] name = 사용자 이름 email = 사용자 이메일 [core] precomposeunicode = true quotepath = false editor = code --wait [filter "lfs"] clean = git-lfs clean -- %f smudge = git-lfs smudge -- %f process = git-lfs filter-process required = true [init] defaultBranch = main [alias] l = log --all --graph --oneline --decorate unstage = reset HEAD -- last = log -1 HEAD ``` {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://yamoo9.gitbook.io/learning-react-app/learning-history/preparing-for-class/preparing.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.