객체#

객체는 문자형으로된 키(key)와 모든 자료형을 사용할 수 있는 값(value) 쌍으로 구성된 여러 프로퍼티(property)의 집합이다. 프로퍼티의 값으로 함수가 될수 있는데, 이 경우 메소드(method)라고 불린다.

객체는 고유의 패키지에 정보를 안전하게 보호해주는 역할을 한다.

JavaScript에서 객체를 만드는 방법에는 크게 2가지가 있다. (추가적으로 Object.create()를이용하는 방법이 있다.)

let obj1 = new Object(); // '객체 생성자' 문법let obj2 = {}; // '객체 리터럴' 문법

두 방법은 차이가 없다.

Object가 아닌 다른 생성자 함수나 클래스를 사용해서 생성할 때, 차이가 발생한다. 이 차이의 핵심은 프로토타입 객체([[Prototype]])에 있다.

객체 정렬 방식#

"프로퍼티엔 순서가 있을까?"

정수 프로퍼티는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서대로 정렬된다. 참고

참고자료#

• JavaScript 객체 기본
• Working with objects
• 객체: 기본

프로퍼티 플래그#

객체 프로퍼티는 값(value) 와 함께 플래그(flag) 라 불리는 특별한 속성 세가지를 갖는다.

• writable : true 이면 값을 수정할 수 있다. 그렇지 않으면 읽기만 가능하다.
• enumerable : true 이면 for ... in 루프에서 열거할 수 있다. 그렇지 않다면열거할 수 없다.
• configurable : true 이면 프로퍼티 삭제나 플래그 수정이 가능하다. 그렇지않으면 프로퍼티 삭제와 플래그 수정이 불가능하다.

enumerable 플래그#

열거 가능(enumerable) 여부를 나타낸다.

반복 가능(iterable)은비슷하지만 다른 의미이다.

configurable 플래그#

configurable 플래그를 false 로 설정하면 돌이킬 방법이 없다.

defineProperty 를 써도 값을 true 로 되돌릴 수 없다.

configurable: false 가 만들어내는 구체적인 제약사항은 아래와 같다.

• configurable 플래그를 수정할 수 없음
• enumerable 플래그를 수정할 수 없음.
• writable: false 의 값을 true 로 바꿀 수 없음(true 를 false 로 변경하는것은 가능함).
• getter / setter 을 변경할 수 없음(새롭게 만드는 것은 가능함).

이런 특징을 이용하면 아래와 같이 “영원히 변경할 수 없는” 프로퍼티를 만들 수 있다.

관련 Object 메소드#

• Object.defineProperty : 객체에 새로운 속성을 정의하거나 수정하고 그 객체를 반환한다.

• Object.defineProperties : 객체에 하나 또는 그 이상의 새로운 속성을 정의하거나 수정하고 그 객체를 반환한다.

• Object.getOwnPropertyDescriptor : 주어진 객체 자신의 속성에 대한 속성 설명자(descriptor)를 반환한다.

• Object.getOwnPropertyDescriptors : 주어진 객체 자신의 모든 속성들의 설명자(descriptor)들을 반환한다.

• Object.preventExtensions(obj) : 객체에 새로운 프로퍼티를 추가할 수 없게 한다.

• Object.seal(obj) : 새로운 프로퍼티 추가나 기존 프로퍼티 삭제를 막아준다. 프로퍼티 전체에 configurable: false를 설정하는 것과 동일한 효과이다.

• Object.freeze(obj) : 새로운 프로퍼티 추가나 기존 프로퍼티 삭제, 수정을 막아준다. 프로퍼티 전체에 configurable: false, writable: false를 설정하는 것과 동일한 효과이다.

• Object.isExtensible(obj) : 새로운 프로퍼티를 추가하는 게 불가능한 경우 false를, 그렇지 않은 경우 true를반환한다.

• Object.isSealed(obj) : 프로퍼티 추가, 삭제가 불가능하고 모든 프로퍼티가 configurable: false이면 true를 반환한다.

• Object.isFrozen(obj) : 프로퍼티 추가, 삭제, 변경이 불가능하고 모든 프로퍼티가 configurable: false, writable: false이면 true를 반환한다.

참고자료#

• 프로퍼트 플래그와 설명자

class 작성 시에 TypeScript의 클래스 문법과 JavaScript의 문법을 비교해보자.

JS 클래스 문법#

JS에서 클래스는 다음과 같은 문법을 사용한다.

class MyClass {  publicProp = 'value'; // public 프로퍼티  #privateProp = 'value'; // private 프로퍼티. ES2019 부터 지원.  _protectedProp = 'value'; // protected 프로퍼티. 기능적으로 지원하지 않지만, 관례적으로 _를 사용하여 표현하고 약속하여 사용함.
  constructor(...) { // 생성자 메서드로 매개변수 값을 받아 프로퍼티를 설정하게 할 수 있다.    // ...  }
  static staticMethod(...) {} // static 메서드
  publicMethod(...) {} // public 메서드  #privateMethod(...) {} // private 메서드
  get publicProp(...) {} // getter 메서드  set publicProp(...) {} // setter 메서드
  get privateProp(...) {} // getter 메서드  set privateProp(...) {} // setter 메서드
  get protectedProp(...) {} // getter 메서드  set protectedProp(...) {} // setter 메서드}

클래스 상속#

JS에서도 클래스 상속을 지원하기 때문에, 기존 클래스를 확장하여 클래스를 생성할수있다.

class Animal {    constructor(name) {        this.speed = 0;        this.name = name;    }    run(speed) {        this.speed = speed;        alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);    }    stop() {        this.speed = 0;        alert(`${this.name} 이/가 멈췄습니다.`);    }}
let animal = new Animal('동물');
class Rabbit extends Animal {    hide() {        alert(`${this.name} 이/가 숨었습니다!`);    }}
let rabbit = new Rabbit('흰 토끼');
rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.rabbit.hide(); // 흰 토끼 이/가 숨었습니다!

클래스 Rabbit으로 만든 객체는 rabbit.hide()와 같은 Rabbit에 정의된 메서드에도 접근할 수 있고, rabbit.run()과 같은 Animal에 정의된 메서드에도 접근할수있다.

extends 키워드는 이렇게 프로토타입 기반으로 동작하여, 객체 rabbit -> Rabbit.prototype -> Animal.prototype 순으로 메소드를 찾아서 실행한다.

접근 제어자(Access Modifier)#

객체 지향 프로그래밍에서는 접근 제어자를 활용해 내부 인터페이스와 외부 인터페이스를 구분하여 캡슐화한다.

• public : 어디서든지 접근할 수 있으며 외부 인터페이스를 구성한다.
• protected : 클래스 자신과 자손 클래스에서만 접근할 수 있으며 내부 인터페이스를 구성한다.
• private : 클래스 자신에서만 접근할 수 있으며 내부 인터페이스를 구성한다.

JS에서는 public, protected 에 대한 문법적 지원이 없으며, 관습적으로 _ 접두사를 사용하여 protected 프로퍼티를 사용한다.

private 속성은 ES2019부터 지원하게 되었다.

static#

정적 프로퍼티와 메서드는 어떤 특정한 객체가 아닌 클래스에 속한 함수를 구현하고자할 때 주로 사용된다.

정적 멤버는 상속된다.

class Article {    constructor(title, date) {        this.title = title;        this.date = date;    }
    static createTodays() {        // this는 Article입니다.        return new this("Today's digest", new Date());    }}
let article = Article.createTodays();
alert(article.title); // Today's digest

TS 클래스 문법#

TS는 JS의 모든 클래스 문법을 지원하며, 그에 더해서 몇 가지 문법적인 지원을 추가해준다. 하지만 모든 문법은 컴파일 타임에 대해서만 적용되고, 런타임에는 결국 JS가지원하는 기능만을 사용해 동작한다는 것을 기억하자.

다음은 JS에서 지원하지 않지만, TS에서 사용할 수 있는 Class와 관련된 기능들이다.

readonly#

필드에는 readonly 제어자를 접두사로 사용할 수 있다. 이렇게 하면 생성자 함수가아닌 곳에서 할당을 방지할 수 있다.

class Greeter {    readonly name: string = 'world';
    constructor(otherName?: string) {        if (otherName !== undefined) {            this.name = otherName;        }    }
    err() {        this.name = 'not ok';        // Cannot assign to 'name' because it is a read-only property.    }}const g = new Greeter();g.name = 'also not ok';// Cannot assign to 'name' because it is a read-only property.

overload#

JS는 함수의 매개변수의 갯수와 자료형이 자유롭기 때문에, 오버로드에 대한 개념이사실상 없다. (단지, 매개변수의 조건에 따른 분기를 작성하는 정도)

TS에서는 다양한 방식으로 호출할 수 있는 함수에 대해 구체적으로 오버로드 signature를 작성할 수 있다.

class Point {    // Overloads    constructor(x: number, y: string);    constructor(s: string);    constructor(xs: any, y?: any) {        // TBD    }}
class Util {    // Overloads    len(s: string): number;    len(arr: any[]): number;    len(x: any) {        return x.length;    }}

override#

TypeScript에서는 파생 클래스가 항상 기본 클래스의 하위 유형이 되도록 한다.

class Base {    greet() {        console.log('Hello, world!');    }}
class Derived extends Base {    greet(name?: string) {        if (name === undefined) {            super.greet();        } else {            console.log(`Hello, ${name.toUpperCase()}`);        }    }}
const d = new Derived();d.greet();d.greet('reader');

파생 클래스가 기본 클래스의 규칙을 따르는 것이 중요한데, 기본 클래스가 파생 클래스 인스턴스를 참조할 수 있어야 한다.

// Alias the derived instance through a base class referenceconst b: Base = d;// No problemb.greet();

만약 파생 클래스가 기본 클래스를 따르지 않는다면 에러가 발생한다.

class Base {    greet() {        console.log('Hello, world!');    }}
class Derived extends Base {    // Make this parameter required    greet(name: string) {        // Property 'greet' in type 'Derived' is not assignable to the same property in base type 'Base'.        // Type '(name: string) => void' is not assignable to type '() => void'.        console.log(`Hello, ${name.toUpperCase()}`);    }}
const b: Base = new Derived();// Crashes because "name" will be undefinedb.greet();

접근 제어자(Access Modifier)#

Member Visibility

• public : 기본적으로 모든 멤버는 public으로 어디서나 접근할 수 있다.
• protected : 클래스 자신과 자손 클래스에서만 접근할 수 있다.
• private : protected와 유사하게 클래스 자신에서만 접근할 수 있지만, 자손 클래스에서도 접근할 수 없다.

Why No Static Classes?#

TS(JS)는 Java나 C#에서 사용하는 static class 라고 불리는 구조를 사용하지 않는다. (static class는 인스턴스화 할 수 없다.)

따라서, static class 문법을 사용하는 것은 불필요하다. 단지 단순 리터럴 객체를쓰는 것과 동일하다.

// Unnecessary "static" classclass MyStaticClass {    static doSomething() {}}
// Preferred (alternative 1)function doSomething() {}
// Preferred (alternative 2)const MyHelperObject = {    dosomething() {},};

abstract#

아직 구현하지 않은 메소드와 프로퍼티에 abstract 키워드를 사용할 수 있다. abstract 멤버를 가진 클래스는 반드시 abstarct class 여야 한다.

abstract class의 역할은 abstract 멤버를 구현할 서브 클래스의 기초 클래스가되는 것이다.

abstract class Base {    abstract getName(): string;
    printName() {        console.log('Hello, ' + this.getName());    }}
class Derived extends Base {    getName() {        return 'world';    }}
const d = new Derived();d.printName();

참고자료#

• Classes
• private, protected 프로퍼티와 메서드

JavaScript 객체 기본#

객체는 관련된 데이터와 함수의 집합이다. (프로퍼티와 메소드)

객체는 고유의 패키지에 정보를 안전하게 보호해주는 역할을 한다.

객체 리터럴 방식#

var person = {    name: ['Bob', 'Smith'],    age: 32,    gender: 'male',    interests: ['music', 'skiing'],    bio: function () {        alert(            this.name[0] +                ' ' +                this.name[1] +                ' is ' +                this.age +                ' years old. He likes ' +                this.interests[0] +                ' and ' +                this.interests[1] +                '.',        );    },    greeting: function () {        alert("Hi! I'm " + this.name[0] + '.');    },};

객체에 접근하는 방법에는 점 표기법(person.name)과 괄호 표기법(person['age']) 이 있다.

this는 무엇인가?#

this 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다.

Java에서의 this는 인스턴스 자신(self)를 가리키는 참조변수이다. 주로 매개변수와객체 자신이 갖고 있는 멤버변수명이 같을 경우 이를 구분하기 위해 사용된다.

public Class Person {
  private String name;
  public Person(String name) {    this.name = name;  }}

하지만 자바스크립트의 경우 Java와 같이 this에 바인딩되는 객체는 한가지가 아니라, 함수 호출 방식에 따라 달라진다.

1. 함수 호출 : 기본적으로 this는 전역객체에 바인딩 된다. 심지어 내부함수, 메소드의 내부함수, 콜백함수의 경우도 전역객체에 바인딩된다. 1-1. apply/call/bind 호출 : 원하는 this에 바인딩하여 함수를 호출한다.
2. 메소드 호출 : 메소드를 소유한 객체, 해당 메소드를 호출한 객체에 바인딩된다.
3. 생성자 함수 호출 :
   1. 빈 객체 생성 및 this 바인딩
   2. this를 통한 프로퍼티 생성
   3. 생성된 객체 반환

var foo = function () {    console.dir(this);};
// 1. 함수 호출foo(); // window// window.foo();
// 2. 메소드 호출var obj = {foo: foo};obj.foo(); // obj
// 3. 생성자 함수 호출var instance = new foo(); // instance
// 4. apply/call/bind 호출var bar = {name: 'bar'};foo.call(bar); // barfoo.apply(bar); // barfoo.bind(bar)(); // bar

OOP#

OOP의 기본 컨셉은 실 세계의 일들을 객체를 사용해서 모델링하고, 객체를 사용하지 않으면 어려울 일들을 쉽게 처리하는 것이다.

용어 정리

데이터를 감싸다 : encapsulate 객체를 참조하기 위한 이름 : namespace 추상화 : 중요한 것들만 뽑아서 단순한 모델로 변환하는 작업인스턴스 : 클래스를 통해 만들어진 실제 객체 (클래스는 청사진, 도면, 틀. 인스턴스는 찍어져 나온 결과물) 다형성 : polymorphism. 여러 객체 타입에 같은 기능을 정의할 수 있는 능력

생성자와 객체 인스턴스#

1. 일반적인 함수를 사용해서 객체 생성: 객체를 만들기 위해 굳이 빈 객체를 만들고내용을 채워서 리턴해야 하는가?

function createNewPerson(name) {    var obj = {};    obj.name = name;    obj.greeting = function () {        alert("Hi! I'm " + this.name + '.');    };    return obj;}
var salva = createNewPerson('Salva');salva.name;salva.greeting();

2. 생성자 함수

new 키워드를 사용하여 함수를 실행하면 다음과 같은 알고리즘이 동작한다.

function Person(name) {    // this = {};  (빈 객체가 암시적으로 만들어짐)
    // 새로운 프로퍼티를 this에 추가함    this.name = name;    this.greeting = function () {        alert(`Hi! I'm ${this.name}.`);    };
    // return this;  (this가 암시적으로 반환됨)}
var salva = new Person('Salva');salva.name;salva.greeting();

각각은 서로 다른 namespace에 저장되어있다. 객체의 프로퍼티와 메소드들을 사용하려면, person1 또는 person2로부터 호출하여야 한다. 두 객체의 기능은 따로 패키징되어서로 충돌하지 않을 것이다. 그리고 두 Person 객체는 각각 고유의 name 프로퍼티와 greeting() 메소드를 사용할 수 있다. 이 둘이 생성될 때 부여받은 자신의 name 값을사용한다는 것에 주목하자. 이것이 this를 사용하는 매우 중요한 이유 중 하나이다. 객체들은 다른 값이 아니라, 그들이 가진 고유의 값을 사용한다.

객체 리터럴과 생성자 함수 방식의 차이#

// 객체 리터럴 방식var foo = {    name: 'foo',    gender: 'male',};
console.dir(foo);
// 생성자 함수 방식function Person(name, gender) {    this.name = name;    this.gender = gender;}
var me = new Person('Lee', 'male');console.dir(me);
var you = new Person('Kim', 'female');console.dir(you);

객체 리터럴 방식과 생성자 함수 방식의 차이는 프로토타입 객체([[Prototype]])에있다.

객체 리터럴 방식의 경우, 생성된 객체의 프로토타입 객체는 Object.prototype이다.

생성자 함수 방식의 경우, 생성된 객체의 프로토타입 객체는 Person.prototype이다

참고자료#

JavaScript 객체 소개 함수 호출 방식에 의해 결정되는 this JavaScript: What is the meaning of this?

Nuxt.js의 View는 app template과 Layout, Page로 구성된다. SEO 최적화를 위해페이지 별로 meta 태그와 head 섹션을 구성할 수 있다.

Pages#

모든 페이지 컴포넌트는 뷰 컴포넌트이다. 하지만 Nuxt.js는 쉽게 개발할 수 있도록특별한 속성들과 함수들을 추가한다.

모든 페이지 속성을 보려면 Directory Structure를참고

Layouts#

레이아웃은 Nuxt.js 앱의 Look & Feel을 변경할 때 유용하다. (예를 들어 사이드바)

레이아웃은 layouts 디렉토리에 추가한다.

default.vue 파일은 기본 레이아웃을 정의한다.

<template>    <Nuxt /></template>

레이아웃에는 <Nuxt /> 컴포넌트를 반드시 추가해야 한다.

기본 레이아웃 외의 커스텀 레이아웃은 layouts 폴더에 다른 이름으로 파일을 생성하여 만들 수 있다.

<template>    <div>        <div>My blog navigation bar here</div>        <Nuxt />    </div></template>

이렇게 생성한 레이아웃을 사용하려면, page 컴포넌트에서 layout 속성에 파일 이름을 값으로 사용하면 된다.

<template>    <!-- Your template --></template><script>    export default {        layout: 'blog',        // page component definitions    };</script>

Error Page#

에러 페이지는 에러가 발생할 때(404, 500, 등등) 표시되는 페이지 컴포넌트이다.

에러 페이지는 레이아웃이지만, 에러가 발생할 때 표시되는 특별한 컴포넌트로 봐야한다. 따라서 다른 레이아웃 컴포넌트와 달리 <Nuxt /> 컴포넌트를 포함해선 안되고 , layouts 디렉토리에 위치해야 한다. 다른 페이지 컴포넌트처럼 다른 레이아웃을사용할 수 있다.

<template>    <div>        <h1 v-if="error.statusCode === 404">Page not found</h1>        <h1 v-else>An error occurred</h1>        <NuxtLink to="/">Home page</NuxtLink>    </div></template>
<script>    export default {        props: ['error'],        layout: 'error', // you can set a custom layout for the error page    };</script>

Document: App.html#

App 템플릿은 head와 body에 대한 컨텐츠와 변수를 주입하는 Nuxt.js 애플리케이션의실제 HTML 프레임을 만드는데 사용된다.

이 파일은 자동적으로 생성되고, 일반적으로 수정할 필요가 거의 없다.

한 가지 사용 예시는 IE에 대한 조건부 CSS 대응이다.

<!DOCTYPE html><!--[if IE 9]><html class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->    <head {{ HEAD_ATTRS }}>        {{ HEAD }}    </head>    <body {{ BODY_ATTRS }}>        {{ APP }}    </body></html>

참고자료#

Nuxt.js - Concept/Views

Nuxt.js 공식 문서의 Rendering과 Deployment Target 부분을 읽으면서 nuxt.config.js의 ssr: 'true'와 target: 'server'의 차이가 무엇인지 헷갈렸다.

static site를 만들기 위해서는 target: 'static'과 ssr: 'true'를 활성화 해야한다. mode: 'universal'는 같은 기능이지만, deprecated 되었다.

ssr: 'true'이 기본값이다.

ssr: 'false'는 mode: 'spa'와 같은 기능이지만 deprecated 되었다. ssr: 'false'는 target: 'static'과 함께 사용할 수 없다.

Nuxt.js에는 몇 가지 명령어가 있는데, target 값에 따라서 가능 여부가 달라진다.

아래의 표가 속성 값에 따른 명령어에 대한 기대 동작을 잘 설명해준다.

참고자료#

Demystify Nuxtʼs target, mode, and ssr properties Going Full Static

git-config - conditional includes

gitconfig의 conditional includes를 사용하면 로컬 컴퓨터의 디렉토리별로 gitconfig 을 관리하는 것이 가능하다.

다음과 같은 디렉토리 구조를 사용하고 있다고 가정해보자.

working-directory  ├── company # 회사 프로젝트  └── github # 개인 프로젝트

회사 프로젝트에서는 회사 메일인 me@company.com 를 git user.email로 사용하려고하고, 개인 프로젝트에는 me@gmail.com 을 git user.email로 사용하고 싶다고 하자.

전역 설정으로는 개인 계정을 설정한다.

git config --global user.name megit config --global user.email me@gmail.com

그리고 ~/.gitconfig 을 열어서 user 섹션 아래에 includeIf 섹션을 추가한다.

.gitconfig

[user]    name = me    email = me@gmail.com
[includeIf "gitdir:~/working-directory/company/"]    path = ~/working-directory/company/company.inc

gitdir: 은 glob 패턴을 따르는 문자열로, git directory 가 해당 패턴과 일치하면, path에 있는 파일을 include 한다.

gitconfig 파일은 아래의 설정이 위의 설정을 덮어쓰기 때문에 해당 경로의 파일에 user 설정을 해두면, user 설정이 덮어쓰여 해당 설정을 사용하게 된다.

~/working-directory/company/company.inc

[user]    email = me@company.com

이렇게 설정한 뒤에 ~/working-directory/company/ 하위에 새로운 git 레포지토리를생성하면, git 이메일이 회사 계정인 것을 확인할 수 있다.

유의할 점은 git이 설정된 레포지토리어야 한다는 것이다.

yarn run vs npm run#

yarn run [script] [\<args>]#

• scripts 에 등록된 명령어 실행
• node_modules/.bin/에 위치한 실행 가능 파일(executable) 실행
• run 은 생략 가능하다.

npm run-script \<command>#

• npm run <command> 로 alias
• scripts 에 등록된 명령어 실행

npm exec (npx)#

1. node_modules/.bin 에 위치한 실행 가능 파일(executable) 실행
2. remote npm package 실행

nuxt 프로젝트 생성#

yarn create nuxt-app# npx create-nuxt-app

create-nuxt-app 을 사용하면 cli를 통해 프로젝트에 관한 설정에 대한 질의를 한다 .

git-flow#

git-flow 는 Vincent Driessen의 브랜칭 모델을 적용하여 레포지토리를 작업할 수있도록 하는 git의 확장이다. 더 알아보기

git-flow vs git-flow-avh#

git-flow 설치 방법을 찾아보면, git-flow-avh를 설치하라는 가이드가 나오는데, git-flow 저장소가 있고, 이게원본인 것 같아서 약간의 혼란이 있었다.

다행히 git-flow-avh의 깃헙 위키의 Home과 FAQ에 간략한 설명이있다.

git-flow에서 hooks와 filter 구현이 필요했기 때문에 원본 git-flow에 대한 패치를작성했습니다. 5개월이 지나도, 패치가 구현되지 않았고 우리는 AVH Edition을 만드는 일에 집중하기로 결정했습니다.

AVH는 A Virtual Home이라는 작성자의 개인 웹사이트 이름에서 따왔다고 한다. 참고

AVH Edition이 git-flow의 기본 기능들을 포함하면서 hooks와 filter 기능을 제공하고 , cheatsheet 를 포함해서 AVH Edition으로 가이드하는 문서가 많아서 AVH Edition으로 설치를 진행했다.

설치하기#

Installation 에서 운영체제 별 설치 가이드를 볼 수 있다.

MacOS 기준으로는 brew를 사용하여 설치한다.

brew install git-flow-avh

1.7.0 버전에서 git flow init 시에 에러가 발생했는데, (이슈) ~/.gitflow_export 에 FLAGS_GET_OPT_CMD 환경 변수가 있는 것이 원인이었다. 버전이 업데이트 되면서 이를 삭제해야 한다고 한다. 참고

시작하기#

먼저, git 레포지토리를 생성한다.

git init hello-git-flow

git 레포지토리로 이동한 후, git flow를 시작한다.

cd hello-git-flowgit flow init

CLI의 질의에 따라 진행하여 브랜치 컨벤션을 정한다.

명령어#

git-flow 명령어 한짤 요약

느낀점#

평소 하나의 Origin 레포지토리를 두고, main, develop, feature/, fix/ ... 으로 브랜칭한 후, Pull Request -> Merge -> Pull (develop) 방식의 workflow를 사용했는데 git flow의 finish 명령어가 로컬에서 머지되는 방식이라, Pull Request와 함께 어떻게 사용하는 것이 가장 적절한지 고민이 들었다.

다행히, Stack Overflow에 비슷한 고민이있었다. 기존 워크플로우 대로 사용하려면, finish 명령어를 사용하지 않고, publish -> PR -> Merge -> Pull 식으로 진행하면 된다. 추가적으로 git-flow-avh의 hooks 기능을활용해 PR 작성 스크립트를 활용할 수 있다.

또는, 하나의 Upstream 레포지토리를 두고 fork하여 협업 대상자의 개인 Origin 레포지토리에서 PR하는 방식으로 진행하는 방식도 있다. 참고

이러한 방식을 사용하면, 각자의 Origin repo에서 부담없이 다양한 실험들을 해볼 수있는 장점도 있을 수 있다고 한다.

Reference#

git-flow cheatsheet

우린 Git-flow를 사용하고 있어요

빈 브랜치 생성하기#

git checkout --orphan empty-branch

git rm -rf .

# 빈 커밋 생성하기git commit --allow-empty -m "Initial commit"

Git Pull 전략#

git pull 을 별도 옵션 없이 실행했을 때 경고 문구가 나타났다.

warning: Pulling without specifying how to reconcile divergent branches isdiscouraged. You can squelch this message by running one of the followingcommands sometime before your next pull:
git config pull.rebase false  # merge (the default strategy)git config pull.rebase true   # rebasegit config pull.ff only       # fast-forward only
You can replace "git config" with "git config --global" to set a defaultpreference for all repositories. You can also pass --rebase, --no-rebase,or --ff-only on the command line to override the configured default perinvocation.

• default (merge) : 로컬 브랜치와 리모트 브랜치의 Head가 다른 위치에 있을 때, pull 받으면, Merge 커밋을 생성함.

• rebase : 로컬 브랜치와 리모트 브랜치의 Head가 다른 위치에 있을 때, pull 받으면, 리모트 브랜치를 rebase 하여 history를 정리함.

• fast-forward only : fast-forward 관계에 있을 때만 pull 을 허용함.

Git - git-pull Documentation

[GIT] Git pull 전략 (default, --ff -only, --rebase)

GitHub 환경에서의 실전 Git 레시피 : NHN Cloud Meetup

Conventional Commit#

Conventional Commits

Git commit 메세지 규약 - Conventional Commits