git, github

[git, github] 협업 관리하기

note-for-development 2024. 1. 11. 21:49

[2024.01.11목요일]

 

협업에 좀 더 능숙하게 대처하기 위해 깃과 깃허브를 정리해보자.

 

1. git

VScode에서 대상 폴더를 연다.

현재 위치는 pwd를 입력하면 알 수 있다.

파일을 저장할 때는 올바른 위치에서 저장해야 하기 때문에 위치를 정확히 아는 것은 중요하다.

cd .. 는 상위파일로, cd 파일이름 은 하위파일로 이동한다. 붙여쓰지 않도록 주의한다.

ls 는 폴더 안의 폴더, 파일 내역을 보여준다.

 

*mkdir 폴더명 : 현재 경로에서 폴더 생성

*touch 파일명 : 현재 경로에서 파일 생성

 

2. 처음 프로젝트를 시작할 때

폴더를 하나 지정하고 VScode에서 폴더를 연다.

git init : .git 파일이 생기며 코드 추적을 시작한다.

코드 수정

git add 파일명 : git에 변경사항을 저장한다.

git commit -m "메세지 내용": 변경 내용에 대한 메세지를 남겨놓는다.

git status : 저장 여부를 확인한다.

 

*git add . : 변경한 모든 파일 저장. 띄어쓰기가 있음에 주의한다.

*git log : 변경되는 내용을 확인할 수 있는 로그.

 

3. 코드를 온라인 저장소(github repository)에 저장하기

업로드할 프로젝트 폴더 역할인 repository를 생성하고 주소를 확인한다.

터미널에 git remote add origin 주소 를 입력한다.

 

3-1. 팀 프로젝트로 브랜치를 사용할 때

git branch 브랜치명 : 브랜치를 생성한다.

git switch 브랜치명 : 브랜치로 이동한다.

git checkout 브랜치명 : 브랜치로 이동한다.

git switch -c 브랜치명 : 브랜치를 생성, 이동한다.

git checkout -b 브랜치명 : 브랜치를 생성, 이동한다.

 

*git branch 브랜치 생성 확인. 초록색인 것이 현재 위치다.

 

4. 코드 수정 후

git push origin 브랜치명 : 수정된 코드 올리기

git pull origin 브랜치명 : 온라인 저장소에 위치한 수정된 파일 받기

 

*git 브랜치 -M main : 메인과 합친다.

 

5. 코드의 부분들이 수정 완료되어 합쳐서 기능을 살펴봐야 할 때

github의 pull request을 요청한다.

코드 작성자는 검토할 사람을 지정할 수 있으며, 검토할 사람은 검토 후 리뷰를 전달할 수 있다.

 

 

오늘 javascript 협업에서 addEventListner에 대한 내용을 살펴봤다.


detailtitle.addEventListener('click', (event) => {
event.preventDefault();
detailcontainer.style.display = "block";
});

 

코드는 click 후 이벤트가 발생한다.

자동으로 submit 되는 상황을 preventDefault()로 잠시 멈춘다.

이후 detailcontainer.style.display를 실행시킨다.

detailcontainer은 DOM으로 불러온 id의 위치였다.

block은 해당하는 값을 보이라는 뜻이다.

 

즉, 클릭 후 이벤트가 발생하는데, 자동으로 새로고침이 되는 것이 아니라 멈추고 원하는 기능을 실현시킨다.

실현한 기능은 클릭했을 때 해당하는 값이 보이는 기능이다.

 


commenttitle.addEventListener('click', (event) => {
event.preventDefault();
document.querySelector(".comment").style.display = "none"
detailcontainer.style.display = "none";
});

 

유사한 코드.

none은 해당 값이 보이지 않게 처리하는 것이다.

<section class="detailed-container" style="display:block;">
 

 

style.display를 지정한 부분은 HTML에서 위와 같이 style 값을 지정해줘야 한다.

 

 

 

하루 회고

 

프로젝트로 정신이 없다.

오타나 id, class를 혼동하지 않고 경로를 잘 짜야 한다.

파인애플이 맛있다.