브랜치는 이미 프로덕션에 있는 코드를 함부로 변경하지 않으면서 작업할 수 있도록 해주는 깃의 필수적인 부분입니다.

다른 브랜치에서 작업을 마친 후 main 브랜치에 병합(merge, 이하 머지)하여 방금 통합한 기능이나 버그 수정을 반영하고자 할 것입니다.

만약 작업을 더 해야 했다는 사실을 머지 완료 후 알아차렸다면, 혹은 실수로 머지를 했다면 어떻게 해야할까요?

깃에서는 거의 모든 것을 되돌릴 수 있습니다. 이 글에서는 마지막으로 커밋한 상태로 되돌릴 수 있도록 머지를 실행 취소하는 방법을 보여드리겠습니다.

깃에서 머지 커밋을 실행 취소하는 방법

깃의 reset command to undo a merge.

우선, 커밋 hash (혹은 id)를 확인해야 이전의 커밋으로 돌아갈 수 있습니다.

hash를 확인하기 위해서는 git log 혹은 git reflog를 실행하세요. 더 읽기 쉬운 git reflog가 더 나은 옵션이 될 수 있습니다.

되돌리려는 커밋의 hash를 얻었다면, git reset --hard commit-before-the-merge를 실행하세요:

명령을 실행하면 코드 에디터에서 몇 가지 항목이 제거되는 것을 보게 될 것입니다.

마지막 커밋의 hash가 명확하지 않다면, git reset --hard HEAD~1을 실행하여 머지 이전 커밋으로 돌아갈 수 있습니다:

유의해야 할 점은 --hard 플래그를 사용하여 머지 실행 취소할 경우, 커밋되지 않은 모든 변경 내용이 되돌려진다는 것입니다.

깃에서 머지를 되돌리는 더 좋은 방법

깃에서는 커밋되지 않은 변경 사항을 되돌리는 위의 방법을 보완하여 더 안전한 --merge 플래그를 제공합니다.

--merge 를 사용하여 머지를 실행 취소하려면 git reflog 를 실행하여 커밋의 hash를 확인한 다음 git reset --merge previous-commit을 실행하세요:

--merge 플래그와 더불어 HEAD 키워드를 사용한 git reset --merge HEAD~1 명령어도 쓸 수 있습니다:

참고: --merge 플래그를 쓸 때 해당 명령에 대한 응답을 받지 못하더라도 걱정하지마세요. 작동은 제대로 합니다.

마치며

지금까지 깃을 더 효율적으로 사용할 수 있도록 실수로 혹은 원치 않은 머지를 실행 취소하는 방법을 배웠습니다.

--hard 플래그는 커밋되지 않은 변경 사항을 제거하고, --merge 플래그는 커밋되지 않은 변경 사항을 유지한다는 것이 머지 되돌리기의 요점입니다.

읽어주셔서 감사합니다!

ES2015(ES6)에서 반짝이는 새로운 기능들이 많이 등장했습니다. 2020년이 된 지금, 많은 JavaScript 개발자들이 그 기능들을 사용하기 시작했을 것이며 또 익숙해졌을텐데요. 여전히 그 중 몇몇은 일부 개발자들에게 미스터리로 남아있을 수 있습니다.

ES6에 포함된 기능 중 하나는 변수 선언에 사용할 수 있는 let 및 const의 추가입니다. 지금껏 애용해온 var와 다른 점은 무엇일까요? 이 글은 여전히 명확히 이해하지 못 한 당신을 위한 것입니다.

Var

ES6의 등장 이전에는 문제점들이 있음에도 불구하고 var로 변수를 선언하는 것이 지배적이었는데요. 따라서 새로운 변수 선언 방식이 등장할 수밖에 없었습니다. 우선, 문제점에 대해 논의하기 전에 var 자체에 대해 더 이해해봅시다.

Scope of var

범위는 기본적으로 변수를 사용할 수 있는 위치를 의미합니다. var 선언은 전역 범위 혹은 함수 범위로 지정됩니다.

var변수가 함수 외부에서 선언될 때의 범위는 전역입니다. 즉, 함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 전체 윈도우 상에서 사용할 수 있는 것이죠.

var가 함수 내에서 선언될 때는 함수 범위로 지정됩니다. 즉, 해당 함수 내에서만 사용하고 접근할 수 있습니다.

자세한 이해를 돕기위해 아래의 예제를 살펴봅시다.

    var greeter = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }

여기서 hello가 함수 범위인 반면에, greeter는 함수 밖에 존재하므로 전역 범위를 가지게 됩니다.

    var tester = "hey hi";
    
    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

hello는 newFunction() 함수 밖에서 사용할 수 없기 때문에 에러가 발생하게 됩니다.

var 변수는 재선언되고, 업데이트될 수 있습니다.

같은 범위 내에서라면 아래의 두 경우와 같이 수정이 가능하며 에러가 발생하지 않습니다.

    var greeter = "hey hi";
    var greeter = "say Hello instead";

    var greeter = "hey hi";
    greeter = "say Hello instead";

var의 호이스팅

호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘인데요. 아래와 같이 코드를 짜면:

    console.log (greeter);
    var greeter = "say hello"

자바스크립트는 다음과 같이 해석하기 때문에:

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

var변수는 범위 내에서 맨 위로 올려지고, 값은 undefined(정의되지 않음)으로 초기화됩니다.

var의 문제점

아래의 예제를 토대로 var를 사용할 시 따라오는 취약점에 대해 이야기해보겠습니다.

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }
    
    console.log(greeter) // "say Hello instead"

time > 3가 true를 반환하기 때문에 greeter는 "say Hello instead"로 재정의됩니다. 의도적으로 재정의한 것이라면 괜찮겠지만, 변수 greeter가 이미 정의되어 있다는 사실을 인식하지 못한 경우에는 문제가 됩니다.

만약 코드의 다른 부분에서 greeter를 사용한 적이 있다면 뜻밖의 출력 결과에 놀랄 수 있습니다. 그리고 많은 버그를 발생시킬 수 있기 때문에 let과 const가 필요하게 된 것이죠.

Let

var 선언에 대한 개선을 반영한 let이 현재 변수 선언에서 선호되고 있습니다. 방금 다뤘던 var의 문제점을 해결할 수 있었던 이유에 대해 살펴봅시다.

블록 범위 let

블록은 {}로 바인딩된 코드 청크인데요. 하나의 블록은 중괄호 속에서 존재하며, 중괄호 안에 있는 것은 모두 블록 범위입니다.

let으로 선언된 변수는 해당 블록 내에서만 사용가능합니다. 예를 들어 설명하자면:

   let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);// "say Hello instead"
    }
   console.log(hello) // hello is not defined

중괄호로 감싸진 hello 변수가 정의된 블록 외부에서 helllo를 사용했더니 에러가 반환되는 것을 확인할 수 있습니다. let 변수는 블록 범위이기 때문이죠.

let은 업데이트될 수 있지만, 재선언은 불가능하다.

var와 마찬가지로 let으로 선언된 변수는 해당 범위 내에서 업데이트될 수 있습니다. 하지만, var와 달리 let 변수는 범위 내에서 다시 선언할 수 없습니다. 아래의 기능이 작동하는 동안:

    let greeting = "say Hi";
    greeting = "say Hello instead";

이와 같은 에러가 발생합니다:

    let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

그러나 동일한 변수가 다른 범위 내에서 정의된다면, 에러는 더 이상 발생하지 않습니다.

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

오류가 없는 이유는 무엇일까요? 두 예제가 서로 다른 범위를 가지므로 서로 다른 변수로 취급되기 때문입니다. 따라서 var보다 let이 더 나은 선택이 될 수 있는 것이죠. let을 사용하는 경우라면, 변수가 범위 내에서만 존재하기 때문에 이전에 이미 사용한 적이 있는 변수 명에 대해서 더 이상 신경쓰지 않아도 좋습니다.또한, 범위 내에서 동일한 변수를 두 번 이상 선언할 수 없기 때문에 앞서 설명한 var의 문제가 발생하지 않습니다.

let의 호이스팅

var와 마찬가지로 let 선언은 맨 위로 끌어올려집니다. undefined(정의되지 않음)으로 초기화되는 var와 다르게 let의 키워드는 초기화되지 않습니다. 선언 이전에 let 변수를 사용하려고 시도한다면 Reference Error(참조 오류)가 발생할 것입니다.

Const

const로 선언된 변수는 일정한 상수 값을 유지합니다. const 선언은 let 선언과 몇 가지 유사점을 공유합니다.

블록 범위 const

let 선언처럼 const 선언도 선언된 블록 범위 내에서만 접근 가능합니다.

const는 업데이트도, 재선언도 불가능하다

const로 선언된 변수의 값이 해당 범위 내에서 동일하게 유지됨을 의미합니다. 업데이트하거나 다시 선언할 수가 없는 것이죠. const로 변수를 선언한 경우에는 다음과 같은 두 작업을 수행할 수 없습니다:

    const greeting = "say Hi";
    greeting = "say Hello instead";// error: Assignment to constant variable. 

    const greeting = "say Hi";
    const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

따라서 모든 const 선언은 선언하는 당시에 초기화되어야 합니다.

개체의 경우는 다소 다른 점이 있는데요. const 개체는 업데이트할 수 없지만, 개체의 '속성'은 업데이트할 수 있습니다. const 객체를 다음과 같이 선언했다면:

    const greeting = {
        message: "say Hi",
        times: 4
    }

아래와 같은 작업은 불가능하지만:

    greeting = {
        words: "Hello",
        number: "five"
    } // error:  Assignment to constant variable.

다음의 코드는 가능합니다:

    greeting.message = "say Hello instead";

오류를 반환하지 않고 greeting.message 값이 업데이트됩니다.

const의 호이스팅

let과 마찬가지로 const 선언도 맨 위로 끌어올려지지만, 초기화되지는 않습니다.

세 가지 변수 선언법의 차이점에 대해서 총정리하자면:

• var 선언은 전역 범위 또는 함수 범위이며, let과 const는 블록 범위이다.
• var 변수는 범위 내에서 업데이트 및 재선언할 수 있다. let 변수는 업데이트할 수 있지만, 재선언은 할 수 없다. const 변수는 업데이트와 재선언 둘 다 불가능하다.
• 세 가지 모두 최상위로 호이스팅된다. 하지만 var 변수만 undefined(정의되지 않음)으로 초기화되고 let과 const 변수는 초기화되지 않는다.
• var와 let은 초기화하지 않은 상태에서 선언할 수 있지만, const는 선언 중에 초기화해야한다.

Var, Let, Const에 대한 설명 영상

이게 전부랍니다. 질문 혹은 추가해야할 내용이 있다면 알려주세요.

읽어주셔서 감사합니다 :)

Git에서 코드 작업을 하고 있는데 계획대로 되지 않아서 가장 최근 커밋을 되돌려야 한다고 가정해봅시다. 어쩌면 좋을까요? 방법에 대해 알아봅시다!

마지막 커밋을 취소할 수 있는 두 가지 방법이 있습니다. 이 글에서는 이 두 가지를 모두 살펴보겠습니다.

revert 명령어

revert 명령어는 취소하고 싶은 특정 커밋의 내용을 되돌리는 새로운 커밋을 만듭니다. 이 명령어를 사용하여 다음과 같이 마지막 커밋을 되돌릴 수 있습니다:

git revert <되돌리고 싶은 커밋 이름>

git log를 사용하여 되돌릴 커밋의 이름을 찾을 수 있습니다. 여기에 설명된 첫 번째 커밋은 마지막으로 생성된 커밋입니다. 그런 다음, 찾아낸 영숫자 이름을 복사하여 revert 명령어에 사용할 수 있습니다.

reset 명령어

reset 명령어를 사용해 마지막 커밋을 실행 취소할 수도 있습니다. 그러나 주의해야할 점은 커밋 기록이 변경되기 때문에 거의 사용하지 않아야 합니다. 작업 지점인 HEAD를 지정된 커밋으로 이동하고, 그 이후의 모든 항목을 폐기합니다:

git reset --soft HEAD~1

--soft 옵션은 커밋되지 않은 변경사항이 손실되지 않음을 의미합니다.

가장 최근 커밋으로 되돌리고 unstaged 상태의 변경 사항을 모두 제거하려면 --hard 옵션을 사용할 수 있습니다:

git reset --hard HEAD~1

이렇게 하면 최신 커밋뿐만 아니라 커밋되지 않은 변경 사항도 취소됩니다.

Git에서 언제 reset 또는 revert를 사용해야 할까요?

되돌려야 하는 커밋이 로컬에만 존재하는 경우에만 reset 명령어를 사용해야 합니다. 이 명령어는 해당 커밋을 아예 삭제하고 커밋 기록을 변경하기 때문에 같이 협업하고 있는 다른 팀원의 작업에도 영향을 끼치기 때문입니다. (협업하는 프로젝트 브랜치에 reset 을 실행하면 다른 팀원이 새로운 커밋을 push할 때 브랜치에 충돌이 납니다 --옮긴이 주석.)

revert는 변경 내용을 취소하는 새 커밋을 생성하므로, 되돌리려는 커밋이 이미 원격 저장소로 푸쉬된 경우에는 커밋 기록을 덮어쓰지 않는 revert 명령어를 사용하는 것이 가장 좋습니다.

마치며

마지막 커밋을 취소하는 두 가지 방법과 언제 어떤 방법을 사용하는 것이 가장 좋은지를 배웠습니다.

이제 마지막 커밋이 버그를 유발하거나 커밋하지 말았어야 하는 내용이 있다는 것을 알게 되면 어떻게 고치는지 아시겠죠?

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있습니다.

그 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공 Array.map() 메소드를 사용하면 됩니다.

이 Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다.

예를 들어 다음과 같은 배열 요소가 있다고 가정해 봅시다:

let arr = [3, 4, 5, 6];

이제 배열의 각 요소에 3을 곱해야 한다고 상상해 봅시다. 다음과 같이 for 루프 사용을 고려할 지도 모릅니다:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

그러나 사실 Array.map() 메소드를 사용한다면 이런 동일한 결과를 얻을 수 있습니다. 다음은 그에 대한 예시입니다:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

일반적으로 Array.map() 메소드는 위의 코드에서와 같이 특정 숫자를 곱하거나, 애플리케이션에 필요한 다른 작업을 수행하는 등 요소에 어떤 변경 사항을 적용하는 데 사용됩니다.

객체 배열에서 map()을 사용하는 방법

예를 들어, 당신의 친구들의 firstName 및 lastName의 값을 저장하는 객체 배열이 있습니다:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

다음과 같이 map() 메소드를 사용하여 배열을 순환하며 처리해서 firstName 및 lastName 값을 결합할 수 있습니다:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

map() 메소드는 단순히 하나의 요소만을 전달하는 것이 아닙니다. map()을 통해 콜백 함수에 전달되는 모든 인수를 살펴보겠습니다.

완전한 map() 메소드 구문

map()을 위한 구문은 다음과 같습니다:

arr.map(function(element, index, array){  }, this);

콜백함수 function()은 각 배열 요소에 대해 호출되며, map() 메소드는 언제나 현재의 element와 그것의 index, 그리고 전체 array 객체를 해당 요소에 전달합니다.

this인수는 콜백함수 내부에서 사용되게 됩니다. 기본적으로 이 값은 undefined입니다. 예를 들어, this값을 숫자 80으로 변경하는 방법은 다음과 같습니다:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);

console.log()를 사용하여 다른 인수들을 테스트해 볼 수도 있습니다:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

여기까지가 Array.map()방법에 대해 알아야 할 전부입니다. 대부분의 경우 나머지는 무시하고 콜백 함수 내부의 element 인수만 사용합니다. 저는 보통은 그렇게 많이 사용한답니다 :)

이 튜토리얼을 읽어주셔서 감사합니다

해결해야 할 가장 일반적인 자바스크립트 문제들 중 일부인 객체 배열을 합치는 방법 및 회문 문자열을 찾는 메소드를 포함한 제가 작성한 다른 JavaScript 튜토리얼에도 관심이 있을 수 있습니다.

웹 개발 튜토리얼(대부분 JavaScript 관련)에 대한 무료 뉴스레터도 있습니다.