기초부터 시작하는 개발일지

Git Merge 란? 3-way-merge에 대하여

해새채 — Thu, 21 Aug 2025 16:59:23 +0900

평소 git을 써본 사람이라면 merge를 당연히 사용해 봤을 거고

merge를 하면서 발생하는 충돌을 겪어본 사람이 많을거다 ~~그게 바로 나예요~~~

다시는 실수 없도록 merge에 대해 공부해봤다

Merge 란?

브랜치와 브랜치를 합치는 과정을 말한다.

Merge과정에서 왜 충돌이 일어나는가?

merge할 브랜치가 동일한 코드를 수정했을 경우 발생한다.

Fast Forward Merge란?

브랜치 간 병합 시 현재 브랜치의 Head Commit이 병합하려는 브랜치의 Head Commit으로 이동하는 병합 방식이다.

3-way-merge 란?

내가 작업하는 브랜치의 커밋, 다른 개발자가 작업하는 브랜치의 커밋, 두 브랜치의 공통 분기점이 되는 공통 커밋 세 가지의 커밋이 남게 된다. 이런 경우의 병합을 세 브랜치들을 종합해서 병합한다하여 3-way-merge 라고 한다.

3-way-merge 는 특히나 협업 때 많이 사용하는 merge방법이니 꼭 공부해두자

3-way-merge 방법

 git merge [merge할 브랜치 명]

실습을 해보자면

'gitignore 생성' 이라는 커밋에서 main 브랜치에서 내용 수정 후 html 기본구조라는 커밋을 작성하고

docs 브랜치로 이동 후 ff병합이라는 커밋으로 내용을 수정 하고 main브랜치에서 docs 커밋을 merge 시켜봤다.

main브랜치에서 입력한 명령어는 아래와 같다.

git merge docs

이 과정을 bash에서 확인해보면 다음과 같이 나온다.

docs에서 변경한 내용을 main브랜치에 merge

그래프를 확인해보면 merge가 잘 된 것을 확인 할 수 있다.

Git checkout 과 switch의 차이

해새채 — Mon, 18 Aug 2025 17:46:07 +0900

옛날에는 checkout으로 브랜치 변경을 했는데 요즘은 switch로 변경한다더라..

일단 checkout 과 switch가 어떤 건지에 대해 알아보자

git checkout

1. 브랜치 변경

git checkout [branch name]

2. 파일 복원: 수정된 파일을 이전 상태로 되돌리기

git checkout -- filename

3. 커밋 간 이동

git checkout <commit-hash>

checkout하나로 여러 기능을 사용할 수 있는데 왜 switch를 만들었나 했더니

명령어의 기능을 분리하여 브랜치 전환 및 복원 작업을 더 명확하고 직관적으로 수행하기 위해 도입되었습니다. 즉, git checkout이 너무 많은 역할을 수행하여 혼란을 야기할 수 있다는 문제점을 해결하기 위해 등장했습니다.

라고 한다.. ~~응..그렇구나..~~

git switch

말 그대로 브랜치를 변경하는데 쓰인다

git switch [branch]

switch가 생겼다고 checkout으로 브랜치 변경하면 안 되나??

답은 아니다. checkout으로 변경해도 된다.

하지만 어느 한 기능만 집중적으로 하는 명령문이 있다면 혹시 모를 충돌을 대비해

브랜치 이동에는 switch를 쓰자

그럼 어떤 경우에 checkout 쓰는가??

바로 커밋 간 이동에 쓴다. 파일 복원은 restore라는 명령어가 있다고 한다,,

결론

1. 브랜치변경: switch

2. 파일 복원: restore

3. 커밋 간 이동: checkout

기억하자

[자바스크립트] push 함수에 대해

해새채 — Fri, 3 May 2024 15:43:58 +0900

자바스크립트 내에는 특정 함수가 있는데 그중 push 함수에 대해 말해보고자 한다

push는 이름 그대로 새로운 요소를 배열로 push한다 즉 목록에 새로운 요소를 더해준다

자바스크립트에서 가장 확인하기 좋은 console.log로 자세히 알아보자

f12를 눌러 검사 창에서 console을 누르면

값을 넣었을 때 내가 어떤 값을 넣었는지 배열로 보여주는 것을 확인할 수 있다

[자바스크립트] 문자열을 숫자로 변환해주는 방법

해새채 — Fri, 3 May 2024 14:25:58 +0900

계산기 코드를 사용하여 예를 들어보자

분명 10+10을 입력했는데 위 결과를 보면 01010이다

코드를 확인해보면 입력값이 다 문자열로 입력받아 숫자로 인식을 못하고 더하지 않는 것이다

이럴때는 parseInt 함수를 적으면 된다

const defaultResult = 0;
let currentResult = defaultResult;

function add(num1, num2) {
    currentResult = currentResult + parseInt(userInput.value);
    outputResult(currentResult, '');
    
}


addBtn.addEventListener('click', add);

똑같이 10+10을 했을 때 결과

자바스크립트 백틱과 따옴표 차이에 대해 알아보자

해새채 — Tue, 9 Jan 2024 17:10:22 +0900

문자열을 작성할 때 보통은 큰따옴표나 작은따옴표를 사용할 것이다.

const defaultResult = 0;
let currentResult = defaultResult;

currentResult = (currentResult + 10) * 3 / 2 -1

let calculationDescription  = '(defaultResult + 10) * 3 / 2 -1';

outputResult(currentResult, calculationDescription);

위 코드를 보면 6번째 줄에 작은 따옴표로 묶으면 안에 들어가있는 defaultResult값이 문자열로 출력된다.

하지만 defaultResult값을 출력하고 싶다면 이런 방법이 있다.

let calculationDescription  = '(' + defaultResult + ' + 10) * 3 / 2 -1';

위 코드를 보면 따옴표로 감싸지 않고 +defaultResult+ 로 적어 자바스크립트가 해당 변수를 찾아 볼 수 있게 만들었다.

+defaultResult+ 에서 + 연산자는 문자열이 아니라 일반적인 연산자로 취급하기 위해서 +를 따옴표 사이에 넣지 않았다.

위 방법을 써도 되지만 조금더 깔끔하게 출력하는 방법이 있다. 바로 백틱을 사용하면 된다.

let calculationDescription  = `( ${defaultResult} + 10) * 3 / 2 -1`;

백틱 (``) 즉 ESC키 아래에 보면 물결버튼을 shift누른상태로 누르면 백틱을 쓸 수 있다.

원하는 문자열을 백틱으로 감싼 후 원하는 변수 또는 상수 등 결과 값을 출력하고 싶은 부분을 ${}로 감싸면 좀더 간단하게 출력할 수 있다.

프로필

해새채 — Mon, 8 Jan 2024 18:26:31 +0900

깃허브: https://github.com/realchainjul

자바스크립트에서 사용 가능한 변수명과 불가능한 변수명에 대해 알아보자

해새채 — Mon, 8 Jan 2024 18:15:40 +0900

사용가능한 변수명은 아래코드를 확인

let userName

이름을 정할 때 소문자로 시작되고 단어 내에 공란이 없는 한 단어로만 이루어지는 camelCase표현 방식을 추구한다.

위 userName 에서 Name은 가독성을 높이기 위해 대문자로 시작한다. 이렇게 하면 허용되는 변수의 이름이 된다.

이는 또한 변수 내에 무엇이 있는지 알려주기 때문에 매우 사용하기 좋은 이름이다. 위에는 아마도 사용자의 이름을 저장하게 될것이다.

따라서 변수의 이름으로는 변수 내에 어떤 종류의 데이터가 저장되는지를 묘사해준게 좋다.

또한 자바스크립트는 대소문자를 구분한다. 그래서 대소문자 처리 여부가 실제로 중요하다.

즉 위에 적힌 userName의 경우 소문자 u 로 시작하고 중간에 대문자 N이 오는데 이는 대문자 U로 시작하는 이름과는 다르게 취급된다. 이렇게 이름 내에서의 대소문자 구분이 굉장히 중요하다는 점을 항상 기억해야 한다.

또한 이런 이름도 가능하다.

변수 이름에는 어떤 글자나 숫자도 사용이 가능하다. 특수 문자 $도 사용할 수 있다. 변수의 이름이 $로 시작해도 괜찮다.

비슷하게, 변수 이름의 맨 처음 또는 어느 위치에도 _를 상요할 수 있다.

불가능한 변수명은 아래 코드 확인

let user_name

사실 사용 가능하기는 하지만 추천하는 변수명이 아니다. 꼭 소문자로 시작하고 단어내의 단어 구분은 대문자로 시작하는 것이다. 위 user_name은 snake case라고 불리는 표기법이다. 이는 Python등의 프로그래밍 언어에서 사용되지만 자바스크립트에서는 아니다.

또한 숫자로 시작해서는 안된다. 그리고 특수 문자에 관한 특수 규칙도 있다. 변수 이름의 맨 앞 또는 어느 위치에든 $와 _를 사용 할 수 있지만 그 외의 모든 특수 문자는 맨 처음에서든 어느 위치에서든 사용이 불가능하다. 즉 - 나 공란 등은 허용되지 않는 것이다. 그리고 let을 변수 명으로 써서는 안된다 이게 키워드인지 변수명이지 모르기 때문에 안된다.

정리하자면

사용가능한 변수명

1.camelCase표기법을 사용

2.변수명에 숫자 들어가기 가능

3. 특수문자 $ 사용가능

4. _ 사용가능

불가능한 변수명

1.snake case 표기법(다른 언어에서 사용가능하지만 자바스크립트에서는 불가)

2. 숫자로 시작해서는 안됨

3.$,_가 아닌 다른 특수문자 사용 안됨

4.키워드를 변수명으로 사용하면 안됨

자바스크립트 상수에 대해 알아보자

해새채 — Mon, 8 Jan 2024 17:21:34 +0900

2024.01.08 - [언어/JavaScript] - 자바스크립트 변수에 대해 알아보자

자바스크립트 변수에 대해 알아보자

자바스크립트에서는 이런 식으로 변수를 정의한다. let userName = 'Max'; 변수는 일종의 데이터 컨테이너 또는 저장소라고 볼 수 있다. 예를 들어, 계산기를 사용할때 값이 2개가 있어야 계산이 가능

computerstory.tistory.com

위 글에 이어 특별한 형태의 변수가 존재하는데 이를 상수라고 한다.

const totalUsers = 15;

예를 들어 애플리케이션이 전체 사용자 숫자가 있고 이 값은 고정되어 있다고 생각해보자

이 또한 마찬가지로 데이터 컨테이너지만 let 키워드 대신에 const키워드를 사용해 생성했다.

const 키워드를 사용해 생성된 상수의 특별한 점은 값을 변경할 수 없다는 것이다.

바꾸려고 하면 오류가 발생할 것이다.

변수는 변경 가능한 숫자를 일컫는 말인데 변수라고 할 수도 없는 변수에 왜 값을 저장해야 하는지 의문이 들꺼다.

이에 대한 답은 우리 코드에는 절대 변하지 않는 값이 있을 수 있는데 이런 값을 데이터 컨테이너에 저장하는 것은, 이런 값 또한 중앙에서 일괄적으로 초기화를 하기 위함이다. 우리가 한 상수를 파일 초반부터 프로그램 전체에 걸쳐 사용했다고 하자. 여러 다른 위치에서 동일한 상수를 여러 번 사용한 것이다. 그럼 동일한 하나의 상수를 항상 참조하게 될 텐데 코드를 작성할 때 그 값을 변경하고 싶다면 열 곳의 다른 위치 모두에서가 아닌 단 한 곳에서만 변경을 할 수 있을 것이다.

정리하자면 let으로 생성한 변수는 변할 수 있고 const로 생성한 변수는 변할 수 없다.

일반적인 구문은 키워드와 이름을 적고 값을 바로 저장하고 싶다면 = 기호 뒤에 값을 적으면 된다.

한가지 작은 팁은 상수를 최대한 자주 사용하는게 좋다고 한다. 상수는 값을 변경할 수 없고 용도가 제한적이라 우리의 의도를 명확히 보여주기 때문에 자주 사용하라는 것이다. 만약 그 값을 사용하는 프로그램 전체, 혹은 일부 코드의 수명 주기 전반에 걸쳐 절대 변하지 않는 값이 있다면 이를 명확히 함으로써 다른 개발자가 우리의 코드를 읽게 될 경우 이 데이터는 절대 변하지 않는다는 것을 바로 알려 줄 수 있기 때문이다 이에 다른 사람이 내 코드를 더 쉽게 이해할 수 있도록 한다.

자바스크립트 변수에 대해 알아보자

해새채 — Mon, 8 Jan 2024 17:03:10 +0900

자바스크립트에서는 이런 식으로 변수를 정의한다.

let userName = 'Max';

변수는 일종의 데이터 컨테이너 또는 저장소라고 볼 수 있다.

예를 들어, 계산기를 사용할때 값이 2개가 있어야 계산이 가능해 새로운 결과 값을 나타낸다. 즉 이 두 변수를 사용해서

세 번째 변수인 현재의 결과를 얻게 된다. 그렇기에 변수는 데이터를 보관하는 데이터 컨테이너라고 할 수 있다.

자바스크립트에서는 왼편에 표시된 것처럼 let 키워드를 사용해 변수를 생성하고, 그다음에는 우리가 정한 이름을 적는다.

*작명 원칙도 있기에 관련 포스터 참고*

2024.01.08 - [언어/JavaScript] - 자바스크립트에서 사용 가능한 변수명과 불가능한 변수명에 대해 알아보자

자바스크립트에서 사용 가능한 변수명과 불가능한 변수명에 대해 알아보자

사용가능한 변수명은 아래코드를 확인 let userName 이름을 정할 때 소문자로 시작되고 단어 내에 공란이 없는 한 단어로만 이루어지는 camelCase표현 방식을 추구한다. 위 userName 에서 Name은 가독성을

computerstory.tistory.com

그 다음으로는 = 와 변수에 저장할 값('Max')을 입력한다. 일단 변수가 생성되면 언제든지 새로운 값을 변수에 재할당할 수 있다.

위에서는 기존에 존재하던 변수 userName에 새로운 값을 할당했다. 자바스크립트가 이해하는 let 키워드는 변수를 생성해 처음 도입할 때에만 사용된다. 이후에 새로운 값을 할당할 때는 키워드를 또 입력할 필요가 없다.

즉, let 키워드는 자바스크립트에게 '야, 여기 프로그램에 필요한 새로운 변수가 있어' 라고 알려줄 때만 필요한 것이다.

그 이후로 그 변수를 사용할 때는 let 없이 사용한다. 즉 변수는 값이 변할 수 있는 데이터 컨테이너인 셈이다.

자바스크립트 동적, 약형에 대해 알아보자

해새채 — Fri, 5 Jan 2024 20:19:53 +0900

자바스크립트는 동적 해석형 언어이지만 약형 프로그래밍 언어기도 한다.

먼저 동적 해석형 언어란 미리 컴파일되지 않았음을 의미한다.

c++와 같은 다른 언어는 개발 중 또는 개발 후에 컴파일 된다. 즉 최종 사용자와 공유하기 전이다.

반면 자바스크립트는 전송 중 컴파일링이기 때문 코드가 런타임에 평가되고 실행된다.

이는 또한 코드가 런타임에서 변경될 수 있음을 의미한다.

자바스크립트에서는 데이터 유형을 동적으로 전환할 수 있다.

처음에는 변수에 텍스트를 저장했다가 나중에는 동일한 변수에 텍스트가 아닌 숫자를 저장할 수 있다.

다른 언어와 다르게 자바스크립트에서 텍스트 데이터나 숫자와 같은 데이터로 작업을 할 때는, 자바스크립트에 텍스트 또는 숫자로 알려줄 필요가 없다. 그저 데이터를 저장하기만 하면 어떤 유형이든지 그대로 받아들인다.

따라서 데이터 유형은 고정되어 있지 않으며, 바뀔 수 있다는 게 약형이다.