깃허브에 main폴더와 dev폴더가 만들어져 있다고 가정하에, 내가 맡은 부분을 올려야하는 브랜치 폴더를 생성하는 과정을 정리해보자.

 

① 기본 세팅 및 main 파일 혹은 dev파일 내려받기

작업 순서 명령어
깃허브 push용 이름 및 이메일 세팅 $ git config --global user.name "username"
$ git config --global user.email "email@email.com"
git init 이후 원격저장소와 연결 세팅 $git remote add origin [REPOSITORY ADDRESS]
원격저장소 확인 $ git remote -v
main 혹은 dev 파일 pull 하기 $ git pull origin main
정보 업데이트 $ git fetch
브랜치 목록보기 $ git branch  
remote까지 확인 $ git branch -a

 

② 내 코드 작성 후 깃헙에 브랜치 파일 만들기

작업 순서 명령어
브랜치만 생성 $ git branch (브랜치명)
해당 브랜치로 이동 $ git checkout (브랜치명)
현재 커밋에서 브랜치 생성하고 이동 $ git checkout -b (브랜치명) 
해당 커밋으로 이동 후 브랜치 생성 $ git checkout (커밋아이디) -b (브랜치명) 
현재 및 하위 디렉토리 모든 파일 index 추가 $ git add . 
local repository에 추가
 $ git commit -m "(설명)"
설정한 브랜치로 업로드 $ git push origin 브랜치이름

 

※ 추가로 알고 있음 좋을 명령어

작업 순서 명령어
로컬 저장소에서 브랜치 삭제 $ git branch -d (브랜치명)
원격저장소에서도 삭제 $ git push origin --delete (브랜치명)
.gitignore 파일 목록 검색 $ git ls-files -o -i --exclude-standard
원격 저장소 코드 로컬에 복제하기 $ git clone (url) (저장할 폴더 이름)

 

③ 이제 브랜치 파일을 만들어 줬으니 업로드를 해보자.

작업 순서 명령어
깃허브에 있는 메인파일을 최신버전으로 업데이트 해준다 $ git remote update
push 전 최종파일 내려 받기 $ git pull origin main(파일명은 다를 수 있음)
현재 및 하위 디렉토리 모든 파일 index 추가 $ git add . 
파일 상태 보기 $ git status
local repository에 추가 $ git commit -m "(설명)"
remote repository에 추가 $ git push origin main

 


아 Github 사용은 코딩을 하는 것 만큼이나 어렵다. 많이 사용해서 익숙해지는 방법밖엔 없는 것 같다.

사전토이프로젝트를 하면서 코딩만큼이나 고생했던 깃사용. 그래도 해본것과 안해본 것은 다르기 때문에, 아직 완전히 숙지가 되지 않았어도 사용을 해본 것에 의의를 두려 한다. 모두 고생하셨습니다 !!

 

[출처]

https://velog.io/@augus-xury/github-%EC%82%AC%EC%9A%A9%EB%B2%95-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC

1. Command 명령어(터미널 명령어)

 

분류  기능 명령어
관리자 권한 관리자 권한으로 실행 $ sudo 명령어
디렉토리 위치 이동 홈 디렉토리로 이동 $ cd ~
  디렉토리로 이동 $ cd 디렉토리이름
  상위(부모) 디렉토리로 이동 $ cd ..
디렉토리 정보 출력 현재 위치 출력 $ pwd
  디렉토리 안의 파일 출력 $ ls
  상세정보까지 출력 $ ls -l
  숨김파일까지 출력 $ ls -a
  숨김파일/상세정보까지 출력 $ ls -al
생성 및 옮기기/삭제 디렉토리 생성 $ mkdir 디렉토리이름
  파일 생성 $ touch 파일이름
  파일 생성 및 수정 $ echo 파일내용 > 파일이름
  파일이나 디렉토리 옮기기 $ mv 옮길파일 옮겨질위치
  파일 이름 변경 $ mv 바꿀파일 바꿀이름
  파일이나 디렉토리 복사 $ cp 복사할파일/폴더이름 복사할경로or이름
  파일 삭제 $ rm 파일이름
  디렉토리 삭제 $ rm -r 디렉토리이름
기타 자주쓰는 명령어 파일 내용 확인하기 $ cat 파일이름
  터미널 정리하기 $ clear
  이전 명령어 확인 $ history
  종료 $ exit

 

2. Git 명령어

분류 기능 명령어
시작 및 설정 설치된 git 버전 확인 $ git --version
  .git 하위 디렉토리 생성 $ git init
  사용자 이름 설정 $ git config --global user.name "사용자이름"
  사용자 이메일 설정 $ git config --global user.email "사용자이메일"
  상태 확인 $ git status
저장소 원격 저장소 연결 $ git remote add origin [github 저장소 주소]
  저장소 확인 $ git remote -v
  로컬 저장소 복제 $ git clone /로컬/저장소/경로
  원격 저장소 복제 $ git clone 이름@호스트:/원격/저장소/경로
commit 명령어 커밋에 변경사항 올림 $ git add 파일명
  수정한 전체파일 올림 $ git add .
  커밋 생성(변경사항 저장) $ git commit -m "메세지"
  커밋 내역 확인 $ git log
  파일 상태 확인 $ git status
branch 명령어 브랜치 목록 확인 $ git branch
  브랜치 생성 $ git branch 브랜치명
  브랜치로 이동 $ git checkout 브랜치명
  브랜치만들고 이동 $ git checkout -b 브랜치명
  master 브랜치로 돌아옴 $ git checkout master
  브랜치 삭제 $ git branch -d 브랜치명
  한 커밋씩 출력 $ git log --oneline
  커밋을 그래프로 표시 $ git log --branches --graph
push 명령어 원격 저장소에 업로드 $ git push origin master
  커밋을 원격 저장소에 업로드 $ git push 저장소주소 브랜치이름
  커밋을 원격 저장소에 업로드 $ git push -u 저장소주소 브랜치이름
  클라우드 주소 등록 $ git remote add origin 저장소주소
  클라우드 주소 삭제 $ git remote remove 저장소주소
merge 명령어 원격 저장소 변경사항 가져오고 병합하기 $ git pull
  현재 브랜치에 다른 브랜치 병합 $ git merge 다른브랜치이름
  파일 병합 $ git add 파일이름
  병합 이전의 내용과 비교 $ git diff 브랜치이름 다른브랜치이름
로컬 명령어 변경 전으로 되돌림 $ git checkout --파일명
  현재 상태를 다운로드 $ git fetch origin

 

3. Github 용어 정리

  • Commit (커밋) : Git에 파일을 추가하거나 변경 내용을 저장하는 작업
  • Push (푸시) : Github에 파일을 추가하거나 변경 내용을 저장하는 작업
  • Pull (풀): Github에서 파일을 다운로드하는 작업
  • Repository (레포지토리) : 저장소, 모든 히스토리와 버전을 확인 가능
  • Local (로컬) : 인터넷 없이 접속되는 저장소, 보통 내 컴퓨터에 저장되는 곳
  • Remote (리모트) : 인터넷을 통해 접속해야 하는 것, Github라 생각해도 무방
  • Branch (브랜치) : 가지 또는 분기점, 현재 파일 바꾸는 게 아니라 가지를 쳐서 그 가지를 바꿀 수 있다.
  • Merge (머지) : 위에서 말한 다른 Branch(가지)를 현재 Branch(가지)로 가져와 합치는 작업
  • Head (헤드) : 현재 작업 중인 Branch(가지)

 

 

출처: https://nack1400.tistory.com/16 [TIL로 프로 개발자 되기:티스토리] 

자료를 제공해 주신 윗 블로그님께 너무 감사드립니다 ! 

 

자바스크립트란?

  • 프로그래밍이란 - 프로그래머들이 "어떤 도구"를 이용해 코딩
  • 이 때 이용하는 도구가 바로 프로그래밍 언어. 인간이 쓰는 언어와 마찬가지로 프로그래밍 언어도 정해진 문법이 있다.
  • 이 문법에 따라 코딩을 하면 컴퓨터는 이를 해석해 우리가 원하는대로 데이터를 입력받아 처리하고 출력해줄 수 있다.
  • 프로그래밍 언어도 인간이 쓰는 언어처럼 매우 다양하고 계속 발전하고,
  • 언어 고유의 특성과 장단점이 있지만 좀 더 많이 쓰이는 언어들이 존재
  • 자바스크립트는 이러한 언어들 중에서 몇 손가락 안에 들만큼 많이 쓰이는 언어이고, 많은 프로그래머들로부터 사랑받고 있는 언어

Node.js 란 ? "Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser"

조금 더 쉬운 말로 얘기하자면 Node.js 는 우리가 자바스크립트 언어의 문법에 맞게 코딩을 했을 때 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 일종의 전용번역기

 


var vs let vs const

  • 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.
  • 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.
  • 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.
  • 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다.

그렇다면 let  const 의 차이점은 무엇일까?

  • 이 둘의 차이점은 immutable 여부이다.
  • let 은 변수에 재할당이 가능하다. 그렇지만, const는 변수 재선언, 변수 재할당 모두 불가능하다.
//var
var name = 'bathingape'
console.log(name) // bathingape

var name = 'javascript'
console.log(name) // javascript
    
    
//let
let name = 'bathingape'
console.log(name) // bathingape

let name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'react'
console.log(name) //react


//const
const name = 'bathingape'
console.log(name) // bathingape

const name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'react'
console.log(name) 
//Uncaught TypeError: Assignment to constant variable.

 

클래스 vs 메소드

 

클래스는 여러 함수와 변수들을 한 번에 묶어서 관리하기 위해 사용한다. 이때 클래스에 포함되는 변수를 속성(attribute)이라고 부르며, 클래스에 포함되는 함수를 메소드(method)라고 한다.

  • 클래스 : 자바에서 모든 코드는 반드시 클래스 안에 존재해야 하며
                서로 관련된 코드들을 그룹으로 나누어 별도의 클래스 구성
                클래스들이 모여 하나의 Java 애플리케이션 구성
  • 매소드 : 클래스의 기능(동작)에 해당하는 구현 부분으로
                 해당 메소드 호출 시 메소드의 블럭( { } )에 해당하는 부분 실행
public class 클래스명 {
	public void 메소드명() {
		// 실행될 문장
	}
}

 

while vs for

  • for문을 사용하는 경우 → 반복횟수가 정해진 경우, 주로 배열과 함께 많이 사용
  • while문을 사용하는 경우 → 무한루프나 특정 조건에 만족할 때까지 반복해야 하는 경우, 주로 파일을 읽고 쓰기에 많이 사용
//for문
let sum=0;
for(let i=0; i<10; i++){
  sum +=i;
}
console.log(sum);

//while문
let sum=0;
i=1;
while(i<=10){
  sum +=i;
  i++
}
console.log(sum);

일반적으로는 반복 횟수를 아는 경우 for, 모르는 경우 while을 쓰라고 말하는데, 반복 횟수를 아는 경우는 무조건 for을 쓰는 게 좋은가?

반드시 그렇지는 않다. 

 

1) for문의 구조를 보면 시작 조건을 입력할 때 반드시 변수를 초기화시킨다. 즉 for 문 안에서 변수의 초기화가 이루어지는 것이다. 따라서 루프를 시작하기 전에 이미 변수가 초기화되어있다면 while을 쓰는 것이 더 직관적이다. 반복 횟수가 정해져있다고 하더라도, 굳이 다시 초기화를 하면서 for문을 사용할 필요는 없다. 

2) 또, 가독성 측면에서 while문이 더 나은 측면도 있다. for (int i=0; i<num; i++) 보다는 while (i<num) 이 더 간단하고 직관적이다. 변수 이름이나 코드의 길이가 길어질수록 더욱 그렇다. 한 줄에 내용을 집약해서 넣느냐, 여러 줄에 나눠 넣느냐의 차이이다.

3) 이 외에도 무한 루프를 구현하고 싶은 경우 while (true) 로 쉽게 작성 가능하므로 while을 쓴다. 

 

다만 파이썬에서는 for문 더 편한 경우가 많다. 프로그래밍을 할 때는 다양한 곳에서 변수를 끌어오고 복잡한 요소를 고려하게 되기 때문에, 언제 써야할 지 명확하게 구분하려고 하고 정답을 정해놓는 것 보다는 둘 다 어떻게 쓰는지를 잘 알고 있고, 두 구문 간에 자유롭게 변환할 수 있도록 연습하는 것이 더 중요하다고 생각한다.

 

 

증감연산자 (Increment and Decrement operators) 

 

++i (전위증가) : i의 값이 1 증가된 후 증가된 값을 리턴한다

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

vs

i++ (후위증가) : 먼저 해당 연산을 수행하고 나서, i 의 값을 1 증가시킴.

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1

 

 

null vs undefinedundefined

  • null은 텅텅 비어 있는 값을 의미
  • undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것
let name1 = null
console.log(name) // null을 출력

let name2
console.log(name2) // undefined를 출력

 

 

⑥ 일치연산자 (Equality operators) == vs ===

  • 자바스크립트에는 두 가지의 일치연산자가 있다.
  •  === 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴
  • 반면 == 는 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있다.
  • 이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 쓰지 않고 있다. 
console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

 

[출처]

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://velog.io/@letthere/2.-%ED%81%B4%EB%9E%98%EC%8A%A4class-%EB%A9%94%EC%86%8C%EB%93%9Cmethod

https://chloe-ki.tistory.com/entry/java-for-while-loop

'Coding > Javascript' 카테고리의 다른 글

Javascript 특정 문자열 제거 함수  (0) 2022.11.11

Github 란?  깃허브 GitHub는 분산 버전 컨트롤 소프트웨어. 깃Git을 기반으로 소스 코드를 호스팅 하고, 협업 지원 기능들을 지원하는 마이크로소프트Microsoft의 웹서비스이다. 가장 인기 있는 소스 코드 호스팅 서비스이자 소프트웨어 개발 플랫폼.

 

Github의 사용 용도는 다음과 같이 3가지로 분류할 수 있다.

- 내 소스코드를 저장하는 곳 

- 소스코드 공유

- 협업의 공간

 

③ Github을 이용하려면 다음 3가지 사전 준비가 필요하다.

1. Github 회원가입 + 암호 토큰 발행

2. Git download 및 기본세팅

3. Terminal 창 or GUI (ex-Source Tree)


 

1. 깃허브 회원가입 및 토큰 발행

 

① 깃허브 사이트주소  : https://github.com/ 에 접속하여 회원가입을 진행한다.

 

② 토큰 발행하기 : [Setting] → [Developer setting] → [Personal access tokens] 

 

※ 깃허브에 코드를 올리는 과정에서 username 과 password가 필요하다. 근데 이때 password는 가입할 때 입력한 것이 아니라, 토큰을 따로 발행하여 복붙해서 써야 한다. 토큰은 발행 받을 때 메모장이나 다른 곳이 미리 복붙해서 저장해 놓기 ! 

 

 

오른쪽 상단 본인 아이콘 - 세팅 클릭 !

 

왼쪽 하단 Developer setting 클릭
화살표를 클릭하고 원하는 토큰을 발행한다.

 

 

2. Git 설치하기

 

① git 설치 사이트 : https://git-scm.com/

 

  • 윗 사진의 명령어를 복사하여 터미널창에 붙여넣기 하고 엔터 ! 하면 다운로드가 시작된다.
  • 그다음 터미널 창에 $ brew install git 입력 후 엔터
  • 설치가 끝나면 $ git help 를 터미널창에 입력해주고 마무리 한다.

③ 다운로드 완료 확인 하기 : 터미널 창에 git --version 쳤을때 버젼 정보가 잘 나오면 설치완료 ! 

 

 

3. Git 기본 세팅 하기

터미널창을 켜고 다음 명령어를 입력해 준다.

① user name 설정하기

git config --global user.name "your_name"

② user email설정하기.

git config --global user.email "your_email"

사진 출처 : 유튜브 <코딩알려주는 누나>

③ 확인하기

git config --list

 

다음 명령어를 입력 후 유저네임과 유저이메일이 제대로 설정되었는지 확인하면 끝 !

 


출처 : https://www.youtube.com/watch?v=lelVripbt2M

 

Github에 처음 코드 업로드하기 

1. 초기화

git init

2. 추가할 파일 더하기

git add .

.(점) 은 모든 파일이라는 뜻, 선택적으로 올리고 싶으면 add뒤에 파일 이름 붙여주면 됨 (예. git add index.html)

 

3. 상태 확인 (선택사항)

git status

 

4. 히스토리 만들기

git commit -m "first commit"

-m 은 메세지의 준말로 뒤에 “” 안에 주고싶은 히스토리 이름을 주면 됨 (즉, 구지 first commit일 필요가 없다는 뜻^^)

 

5. Github repository랑 내 로컬 프로젝트랑 연결

git remote add origin (레파지토리 주소)

 

이 명령어는 github에서 복사해서 붙여와야함

 

6. 잘 연결됬는지 확인 (선택사항)

git remote -v

내가 연결한 주소값이 잘 뜨면 성공!

 

7. Github로 올리기

git push origin master

master 자리에는 branch이름이 들어가면 됨 branch이름이 main라하면 git push origin main 이라고 써야함

 

Github에 계속 업데이트 하는법 

1. 추가할 파일 더하기

git add .

2. 히스토리 만들기

git commit -m "first commit"

3. Github로 올리기

git push origin master

내 컴퓨터에 소스코드를 업데이트를 하고 싶으면 이 세개의 스텝만 계속 반복하면 됨.

 

Github로 팀프로젝트 하는법 

1. Github에서 소스코드 다운로드

git clone (레파지토리 주소)

주소는 깃허브에서 들고와야함

폴더이름은 선택사항이다 (즉 없어도됨) 폴더이름을 줄경우에는 그 폴더가 새로 생성이 되면서 그 안에 코드들이 다운로드가 되고, 폴더이름을 안줄경우엔 깃허브 프로젝트 이름으로 폴더가 자동으로 생기고 그안에 코드들이 다운로드된다.

 

 

2. Github에서 내 브렌치(branch)만들기

git checkout -b 브렌치이름

 

3. 내 브렌치에 소스코드 업데이트하기

git add . git commit -m "first commit" git push origin 브렌치이름

git add . 
git commit -m "first commit" 
git push origin 브렌치이름

 

4. 마스터 브렌치에 소스 가져오기(pull)

git pull origin master

pull을 하기전에는 기존에 소스코드들을 commit을 먼저 해놔야 한다

 

5. 브렌치끼리 이동하는 법

git checkout 브렌치이름

내 브렌치에서 마스터 브렌치로 이동을 하고 싶거나 다른 브렌치로 이동하고싶으면 해당 명령어를 쓰면 된다

 

 

 

 

 


[출처]

 

https://velog.io/@grinding_hannah/Git-Git-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%ED%84%B0%EB%AF%B8%EB%84%90-%EB%AA%85%EB%A0%B9%EC%96%B4-%EC%A0%95%EB%A6%AC

 

[Git] Git 사용법 및 터미널 명령어 정리

pwd Print working directory; 현재 작업 위치 알려줌. ls list files; 현재의 directory의 모든 파일들을 보여줌. cd .. 상위 디렉토리로 이동.cd ~ 사용자의 홈디렉토리(/Users/hannah)로 감.

velog.io

 

 

https://velog.io/@gpwls320/Git-%EC%9A%A9%EC%96%B4-%EB%AA%85%EB%A0%B9%EC%96%B4

 

# Git, GitHub 개념 정리

Git이란? 깃허브의 심장에서 작동되는 소프트웨어인 깃(Git: 재수없고 멍청한 놈, 자식!) 깃은 프로젝트의 어떤 부분도 겹쳐쓰지 않게 프로젝트의 변경을 관리하는 버전 분산 관리 시스템이다. Git

velog.io

 

https://tagilog.tistory.com/377

 

[GITHUB 사용법] 왕초보를 위한 깃허브사용법 (Git사용법)

코딩할 때 뺄래야 뺄 수 없는 서비스 중 하나가 GitHub (깃허브) 입니다. 현역 프로그래머에게는 너무나 친숙한 서비스지만, 코딩 초보자에게는 생소할 수도 있습니다. 그래서 이번에는 코딩 초

tagilog.tistory.com

드림코딩 깃허브 유튜브 강의 : https://www.youtube.com/watch?v=Z9dvM7qgN9s 

 

https://backlog.com/git-tutorial/kr/stepup/stepup1_1.html

 

누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

누구나 쉽게 알 수 있는 Git에 입문하신 것을 환영합니다. Git을 사용해 버전 관리를 할 수 있도록 함께 공부해봅시다!

backlog.com

 

+ Recent posts