TIL - 21.06.14 👨‍💻 JS, Git

성훈·2021년 6월 14일

JavaScript TIL git

TIL

목록 보기

1/59

TIL - 21.06.14

생활코딩 JS ~22. 배열과 반복문

*변수 지정

// 변수 지정할땐 
name = 'examples'
// 이 변수를 값으로 가져올땐 
'+name+' 로 사용

*세가지 데이터 타입
Number, String, Boolean
Number는 말 그대로 숫자, String은 따옴표로 묶이는 문자열, Boolean은 참, 거짓 값
자바스크립트는 정해진대로 출력만 하는 HTML과 달리 반응형이기에 사칙연산과 수식계산이 가능하다.

<body>
<script>
	document.write(1+1);
</script>
// 상기 코드는 2로 출력되고,
<h1>1+1</h1>
// 상기 코드는 1+1로 출력된다.

// 단 하기 코드는 작은 따옴표로 감싸진 1이라는 문자열 두개가 더해지므로 11로 출력된다.
<script>
	document.write('1'+'1');
</script>
</body>

Boolean 타입은 참, 거짓으로 출력되는 데이터 타입으로 반복문과 조건문에서 필수적인 데이터 타입이다.

조건문에선

<script>
	if(boolean){ true-examples
	} else { false-examples
	};
// boolean 자리에 참의 값이 오면 true-examples가 출력되고
// 거짓의 값이 오면 false-examples가 출력된다.
</script>

반복문에선

<script>
// 변수 앞엔 알아보기 쉽게 var(variable)을 붙힌다.
	var i = 0;
    document.write('Apple<br/>');
    
// 카운터로 쓰인 i 값이 거짓이 될때까지 반복
// 부등호 자리에 <=는 되나 =<는 오류발생
    while(i<=3){
    	document.write('Banana<br/>');
    	document.write('Orange<br/>');
    	i = i + 1;
    }
    document.write('Peach<br/>');
    
</script>

다음과 같이 쓰이게 된다.

VS Code에서 Git 사용하는 법, Github와 연동하는 법

깃은 개발환경에서 다양한 시도를 할 수 있고 변경점에 대해 왜 변경 했었는지 확인하기 위해 사용하는 것.
~~이게 다는 아니지만 대략적으로~~

우선 필요한게 당연히 vs code가 설치되어야하고, Git 역시 설치되어야 한다.

Git은 터미널로 설치 할 수 있으며

sudo apt-get install git

명령어로 설치가능하다.

둘 다 설치되었으면 VS Code로 가서 Git을 이용할 폴더를 열고 Control+`키로 해당 위치에서 터미널을 연다.

터미널에서

git init

명령어를 이용해 빈 Git 저장소를 생성하고

git config --global user.name "이름"
git config --global user.email "이메일"
git config --list // 입력값 확인

상기 명령어로 이용자의 정보를 입력한다.
해당 정보는 Git을 이용해 자료를 저장하고 수정할때 로그에 남게된다.

주로 사용하게 될 기본적인 명령어는

git status #깃의 현재 상태 확인
git add x #git status로 확인한 코드파일을 Git에 저장 -A 를 사용하면 git status에 있는 변경점이 전부 저장된다.
git commit -m "comments" #git add 명령어로 변경된 git 파일에 주석을 다는 명령어
git log #이전 커밋들 확인
git reset XXXXXX --hard #수정했던 것들을 없던걸로 하고 과거지점으로 복원, XXXXXX는 git log에서 돌아가고 싶은 시점 커밋 앞 6자리
git revert YYYYYY #reset은 커밋들을 없애고 과거지점으로 복원되지만 revert는 커밋을 남기고 취소하길 원하는 커밋(YYYYYY)을 취소한다는 커밋을 남기고 그 직전 지점으로 돌아감.

Branch 명령어

git branch 모든 Branch 확인
git branch new-branch #new-branch라는 branch 생성
git branch -d new-branch #new-branch라는 branch 삭제
git checkout new-branch #new-branch로 이동
git merge new-branch#현재 있는 branch에 new-branch의 변경점을 반영(합병)

Github 연동
Github에 새로운 레포를 만들고 거기에 로컬 파일을 업로드 하는 경우

새로운 레포 생성하고 https//github.com/~~.git으로 끝나는 주소 확인
터미널에 하기 명령어 타이핑

git remote add origin https//github.com/~~.git #https 주소의 레포를 원격 저장소 origin으로 사용하겠다는 명령어
git push -u origin main #폴더의 내용을 origin 원격저장소의 main이라는 branch에 업로드 하겠다는 명령어

VS Code 는 디폴트 branch가 master이고 Github에서는 디폴트 branch가 main이니 유의하자.
빈 레포에 업로드하는데 충돌이 난다면 -force 옵션으로 강제로 push하면 된다.

Github 아이디와 Password 입력 -> 동기화 완료

Github에 있는 레포를 로컬로 다운로드하는 경우

터미널에 하기 명령어 타이핑

git clone https//github.com/~~.git
cd ./레포이름 으로 폴더 접근

git fetch # Github 변경사항 확인
git push # Github에 현재 branch 내용 푸시 동기화(업로드)
git push origin branch #Github에 origin 원격저장소 / branch 위치에 푸시 동기화
git pull # Github에 업데이트 된 내용 풀 동기화(다운로드)
// fetch 내용이 있다면 충돌을 막기위해 우선 pull 한 다음 변경내용을 확인하고 push
git branch -a #원격 저장소 branch들을 포함해 branch 확인
git checkout -b new-branch origin/new-branch #원격저장소/new-branch의 내용을 로컬 저장소 new-branch를 만든 다음 거기에 원격저장소/new-branch의 내용을 받아오고 새로만든 로컬 branch로 이동
git push -d origin new-branch # 원격 저장소의 new-branch 삭제

GOOD 😉

자바스크립트 입문해서 중요한 부분(조건문, 반복문)을 배웠다.
모호하게 알고 있던 Git이 조금 선명해진 것 같다.

BAD 😥

원래 생활코딩 JS부분을 오늘 끝내려고 했는데 Git에 꼽혀서 못했다.
내일 배울 변수, 타입, 함수 선행학습을 못했다.

TO DO 🔥

생활코딩 JS 섹션 클리어하고 가능하다면 구글 로그인까지 구현해보기.
코드스테이츠에서 배울 js/node 복습.
페어 분이랑 코플릿한 내용 복습.

Retrospect 🧐

TIL은 처음인데 너무 장황하게 세부적으로 작성한 것 같다.
조금 간략하게 핵심만 적어나가는 연습을 하자.
~~배운 것도 얼마 없는데 공부한 시간이랑 블로깅한 시간이 맞먹어~~

Reference 🙇

생활코딩 이고잉님 / WEB2 - JavaScript - https://opentutorials.org/course/3085
유튜브 얄팍한 코딩사전님 / 가장 쉬운 Git 강좌 - (상) 혼자작업편 - https://youtu.be/FXDjmsiv8fI
유튜브 얄팍한 코딩사전님 / 가장 쉬운 Git 강좌 - (하) Github편 - https://youtu.be/GaKjTjwcKQo

~~두분 사랑합니다~~

성훈

어떻게 이걸 풀어낼 수 있을까

다음 포스트