Git 하는 방법(GIT, 터미널, 커서, 테일윈드)
수업페이지_url
Git을 왜 하나?)
- 퍼블리셔랑 개발자 사이 협업할 때 자주 사용하는 방식
- 서로 작업물 공유할 수 있음
# 1단계_Node.Js 설치
- node. js_사이트
Releases · coreybutler/nvm-windows
A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows
github.com
ㄴ세 번째 nvm-setup.exe 클릭 후 설치
ㄴ I accept the agreement 선택 후 next
ㄴ 터미널에 nvm 입력 후 Enter
ㄴ nvm list 입력 후 Enter
ㄴ nvm uninstall 20.18.0 입력 후 Enter
ㄴ nvm install 20.18.0 입력 후 Enter
ㄴ nvm list 입력 후 Enter(버전 연결 잘 됐나 확인)
nvm 명령어)
| nvm list | 현재 설치되어 있는 node.js 버전들 리스팅 |
| nvm install v20.9.0 | v20.9.0 설치 |
| nvm uninstall v20.9.0 | v20.9.0 삭제 |
| nvm install v20.18.0 | v20.18.0 설치 |
| nvm use v20.18.0 | 해당 node 버전 활성화 |
# 2단계_윈도우 터미널 설치(필수)
- 윈도우 터미널_url
Windows Terminal - Windows에서 무료 다운로드 및 설치 | Microsoft Store
Windows 터미널은 명령 프롬프트, PowerShell 및 WSL과 같은 명령 줄 도구 및 셸 사용자를 위한 최신의 빠르고 효율적이며 강력한 생산성의 터미널 응용 프로그램입니다. 주요 기능으로는 여러 탭, 창,
apps.microsoft.com
# 3단계_Git Bash 설치
- 설치방법_사이트
설치 이유)
1. CMD, POWER SHELL 로도 충분히 원하는 작업을 할 수 있다
2. 다만 CMD, POWER SHELL 등의 프로그램은 프로그램별로 명령어가 다르다.
3. 가장 범용적인 쉘인 BASH SHELL 을 설치하면 BASH 명령어만 학습하면 된다.
BASH SHELL을 설치하려는데 왜 GIT을 설치하는가?)
1. GIT에 GIT BASH라는 BASH SHELL이 포함되어 있다.
2. 그리고 추후에 GIT은 다른 용도로도 쓰이기 때문에 설치해두면 좋다.
GIT 설치 옵션)
ㄴ 체크박스가 없으면 넘어가도 됨
ㄴ 터미널에서 git bash를 쓸 수 있으면 성공
# 4단계_ 윈도우 터미널의 기본 프로필을 GIT BASH로 변경
ㄴ 꺽새 모양 눌러서 설정 선택 → 기본 프로필 git bash로 선택 → 저장 선택
ㄴ ls 검색 후 엔터(저장 된 파일 명 보기 위해서)
# 5단계_ 커서 가입, 커서 로그인, 커서 에디터 설치
- 설치방법_영상
- 커서 사이트 → 가입
ㄴ 우측 상단에 로그인을 Git-Hub 로그인 → 초록색 상자 선택 → 우측 상단에 다운로드 선택
- Git-Hub_사이트
ㄴ Git-Hub으로 로그인
커서 완전삭제 1 단계)
ㄴ 윈도우키 누른 후 제거 입력 후 프로그램 추가/제거
ㄴ 커서 삭제
커서 완전삭제 2 단계)
ㄴ 터미널 GIT BASH 접속 후 아래 명령어 입력
rm -rf "$USERPROFILE/AppData/Local/Programs/cursor"
rm -rf "$USERPROFILE/AppData/Local/Cursor"
rm -rf "$USERPROFILE/AppData/Roaming/Cursor"
rm -rf "$USERPROFILE/cursor"
ㄴ 첫 번째 상자 선택 / 로그인 선택
ㄴ 기본 세팅(언어를 한국어로 변경해줘야 함) / 마지막에 Install "cursor" 선택
ㄴ Start from Scratch 선택
# 6단계_ ~ 은 홈 디렉토리를 의미하고 디렉토리는 폴더를 의미한다.
- 참고 영상
명령어/팁)
- ~ : 홈 디렉토리
- 디렉토리 : 폴더
- rm 파일명 : 파일삭제
- cd 폴더명 : CHANGE DIRECTORY, 폴더 이동
ㄴ 사용자 폴더에 js_projects 폴더 생성 → js_projects 폴더 안에 site 3 파일 생성
ㄴ pwd 치고 Enter
ㄴ start . 치고 Enter 하믄 sbs 파일창이 열림
ㄴls. 치고 Enter
# 8단계_ 커서 에디터 터미널의 기본 프로필을 GIT BASH로 변경
- 참고 영상
ㄴpowershell을 → Confugure Terminal Settings 클릭 → git bash 클릭
ㄴ 우측에 bash창 종료 하려면 exit 입력 or 우측에 휴지통 모양 아이콘 누르면 종료됨
ㄴ 휴지통 모양이 삭제 / X 모양은 하단 창 닫기 / 하단 창 열기 Ctrl + `
# 9단계_Ctrl + K로 터미널에서 AI로 명령
- cursor에서 ctrl + K를 누르면 하단에 AI 입력 창 뜸
ㄴ 챗지피티랑 차이점 : 내 폴더 구조를 챗 GPT는 모르지만 커서는 폴더 구조를 알고 있다는 것이 차이점★
# 11단계_GIT HUB 가입, GITHUB 계정 세팅에서 디폴트 브랜치 이름을 master에서 main으로 변경
- 참고영상
디폴트 브랜치 이름을 왜 변경하는가?)
- master 라는 이름이 노예제도를 연상시킨다고 하여서 요새는 다 main 으로 바꾸는 추세임
# 12단계_git 사용자 정보 등록(필수)
- 참고 영상
git config --global user.name # 확인
git config --global user.name "깃허브아이디"
git config --global user.email # 확인
git config --global user.email "깃허브이메일"
왜 GIT 사용자 정보를 입력해야 하는가?)
- GIT에서 커밋이라는 과정이 있는데, 일종의 세이브 파일을 생성하는 것과 같다.
- 해당 커밋을 누가 남겼는지 자동으로 기록이 된다.
- 그런데 GIT 사용자 정보가 없다면 커밋을 진행할 수 없다.
ㄴ 터미널에서 git config --global 입력
ㄴ 터미널에서 git config --global user.name입력
ㄴ 터미널에서 git config --global user.email입력 / 터미널에서 git config --global user.email "juyoun5607@naver.com입력
ㄴ 이름하고 이메일 등록 잘 됐나 확인 터미널에 git config --global user.name입력 / 터미널에서
git config --global user.email 입력
# 13단계_프로젝트 폴더 생성, 해당 폴더에 로컬 저장소 생성, 로컬 저장소를 원격 저장소와 연결
- 참고 영상
ㄴ cd ~ 부터 시작
ㄴprojects_ju는 프로젝트를 모아놓은 폴더 - > site-2024-11-01로 파일 변경 후 code .로 커서 열기
햣
git)
- 폴더 → 로컬저장소 → 원격저장소(github 저장소)
git 로컬 저장소 생성)
# 프로젝트 폴더에서 수행
rm -rf .git # 이것은 로컬 저장소 삭제, 필요하다면 수행
git init
ㄴ git init입력하면 새로운 폴더 생성 / .git 파일에 대한 파일 탐색기가 열림 → 로컬 저장소 생성
ㄴ 로컬 저장소 삭제 기능
ㄴ main이 뜨면 파일이 잘 생성된 거(main이 없으면 일반 폴더임)
git 로컬 저장소를 원격저장소와 연결)
# 프로젝트 폴더에서 수행
git remote remove origin # 기존의 origin 삭제, 필요하다면 수행
git remote add origin 원격-저장소-주소
git remote -v # 연결정보 확인
ㄴ .git 저장소 파일 안에 연결 되어 있는 내부 저장소가 없다는 뜻
ㄴgit remote add orign + git-hub원격 저장소 주소
ㄴ git remote -v입력 후 파일 이름이 두개 뜨면 잘 연결 된 것임
git 작업 명령어)
git pull origin main # 내 소스코드 최신화, 만약에 충돌이 나면 해결
# 작업
git add . # 커밋을 위한 준비단계, 커밋할 파일들을 장바구니에 담는 단계
git commit -m "메세지" # 장바구니에 담긴 파일을 로컬 저장소(.git 폴더) 에 저장
git push origin main # 로컬 저장소(.git 폴더)의 커밋들을 원격 저장소에 업로드, 만약에 충돌이 나면 해결
ㄴ 동시에 여러명과 협업을 하려면 git pull origin main을 해야함
ㄴ 생성된 파일 터미널에 연결 후 code . 해서 새로운 커서 창 열기
ㄴgit add . / git commit -m "제목" → 지금까지 내가 작업한 작업물 저장
ㄴ git push origin main을 하면 hithub의 로컬저장소에 저장이 됨
ㄴ github 로컬 저장소에 작업한 파일들 저장
# 14단계_VS CODE, tab size, fromat on save, prettier, live sever 세팅
- 참고 영상
ㄴ 기본 tab 사이즈 4인데 tab 사이즈 2로 변경
ㄴformat : 소스 코드를 깔끔하게 만드는 것 → 첫번째 체크 표시로 설정함(ctrl + s 누를 때 마다 코드가 정리가 됨)
ㄴPreferences 선택 → Extensions 선택 → 검색 창에 prettier 입력 → Install 눌러서 다운
ㄴ F1을 누르고 format을 입력 → Format Document 선택(문서 정리하는 역할) / html, css, js도 처음에 다 설정
ㄴPreferences 선택 → Extensions 선택 → 검색 창에 live server 입력 → Install 눌러서 다운
ㄴOpen with Live Server 선택하면 작업하는 창 어떻게 나오고 있나 확인 할 수 있음 / live가 돼서 바꾸면 바로 보임
# 15단계_GITHUB PAGE 활성화 해서 동료 뿐만 아니라 고객도 결과물을 볼 수 있도록 허용
- 참고 영상
ㄴ 위쪽 중간에 Settings 선택
ㄴ 좌측 Pages 선택 후 Branch에서 none을 main으로 변경 후 Save를 누르면 페이지화됨
ㄴ Actions을 누르면 페이지 만드는 로딩 창이 나오고 다 되면 페이지 생성 완
=> commit을 하고 push를 하는 순간 마다 자동으로 웹 서버가 만들어짐
ㄴ 이렇게 나오면 성공
ㄴ Settings 선택 → Pages 누르면 사이트 url 생성됨
# 16단계_테일윈드 추가, 이미지 추가, 비디오 추가, 공통 header/footer 추가, about.html 페이지 추가
- 참고 영상
1단계: 프로젝트 폴더 생성)
cd ~
mkdir js_projects
cd js_projects
mkdir site3
cd site3
2단계: VSCODE)
code.
3단계: 터미널 열기)
ctrl + ~
4단계: 테일윈드 설정파일 생성)
: npx tailwindcss init
ㄴ 테일윈드 연결
ㄴ js에 테일윈드 파일 생성 완
5단계: 테일윈드 설정파일 커스터마이징)
- tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors: {
clifford: "#da373d",
},
screens: {
"3xl": "1600px",
"4xl": "1920px",
},
},
},
plugins: [
function ({ addVariant }) {
const groupVariantPrefixes = ["p1", "p2", "p3"];
function escapeClassName(className) {
return className.replace(/[\[\]\(\)\+\*\#\/\%]/g, '\\$&');
}
// group-on 변형 추가 함수
const addGroupOnVariant = (name = "") => {
const selector = name ? `group\\/${name}` : "group";
const variantName = name ? `group-on/${name}` : "group-on";
addVariant(variantName, ({ modifySelectors }) => {
modifySelectors(({ className }) => {
return `.${selector}.on .${escapeClassName(
variantName
)}\\:${escapeClassName(className)}`;
});
});
};
// peer-on 변형 추가 함수
const addPeerOnVariant = (name = "") => {
const selector = name ? `peer\\/${name}` : "peer";
const variantName = name ? `peer-on/${name}` : "peer-on";
addVariant(variantName, ({ modifySelectors }) => {
modifySelectors(({ className }) => {
return `.${selector}.on ~ .${escapeClassName(
variantName
)}\\:${escapeClassName(className)}`;
});
});
};
// 기본 group-on, peer-on 변형 추가
addGroupOnVariant();
addPeerOnVariant();
// 특정 그룹과 피어에 대한 변형 추가
groupVariantPrefixes.forEach((name) => {
addGroupOnVariant(name);
addPeerOnVariant(name);
});
// on 클래스에 대한 변형 추가
addVariant("on", ({ modifySelectors }) => {
modifySelectors(({ className }) => {
return `.on.on\\:${escapeClassName(className)}`;
});
});
},
],
};ㄴ 이 코드는 src 폴더 안에 html과 css가 있다고 가정 하에 만들어짐
ㄴNew Folder 클릭 해서 src 파일을 생성한 후
ㄴ ctrl + 클릭해서 src 폴더로 드래그 / src 안에 드래그 한 폴더가 들어감
ㄴ 미리보기 창 주소가 바뀜
ㄴ src에 input.css를 생성 → 밑에 하단 코드 소스 복붙
6단계: src/input.css)
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 커스텀 CSS(폰트, 기타 등등) */
.box-1 {
color: blue;
}
html > body {
font-family: "Pretendard Variable", sans-serif;
}
7단계: src/output.css 자동생성모드 시작)
- npx 명령으로 src/input.css 파일로 부터 src/output.css 파일 생성하도록 지시
| npx tailwindcss -i src/input.css -o src/output.css --watch |
ㄴ npx tailwindcss -i src/input.css -o src/output.css --watch 을 입력하면 output.css 파일 생성됨
ㄴ 터미널에 빨간색 문구가 뜨면 더 이상 명령어를 못침
ㄴ bash 창을 하나 더 띄어서 명령어 입력하면 됨
ㄴindex.html link태그에 input.css 연결