초기화

깃 초기화 : 기존 디렉토리를 git 저장소로 만든다.

$ git init

깃 상태 확인 : 현재 작업중인 브랜치와 파일 상태를 알려준다.

$ git status

설정

전역 사용자 이름 생성

$ git config --global user.name "your name"

전역 사용자 이메일 생성

$ git config --global user.email "your_email@youremail.com"

저장소별 사용자 이름 생성

$ git config user.name "your name"

저장소별 사용자 이메일 생성

$ git config user.email "your_email@youremail.com"

사용자 설정이 되어 있지 않으면 깃허브의 저장소에 커밋 이력 및 작성자의 아이콘도 ? 로 표시된다. 웬만하면 사용자 설정을 해주도록 하자

저장소 복제하기

$ git clone "url"

저장소 추가하기

$ git remote add origin "url"

로컬저장소가 바라보고 있는 저장소의 정보 확인

$ git remote -v

전역 설정 정보 조회

$ git config --global --list

저장소 정보 조회

$ git config --list

파일 추가 및 업로드

스테이지에 수정된 파일 업로드

$ git add 'file name'

스테이지에 수정된 모든 파일 업로드

$ git add .

커밋하기

$ git commit -m 'message'

원격 저장소에 업로드

$ git push origin master

원격 저장소에서 다운로드

$ git pull origin master

되돌리기

스테이지에 올라간 파일 전부 내리기

$ git reset

이력

모든 이력 보기

$ git log

이력 나가기

$ q

이력과 변경사항을 함께 보기

$ git log -p

브랜치

지역 브랜치 목록 보기

$ git branch

원격 저장소 브랜치 목록 보기

$ git branch -r

지역 브랜치 및 원격 저장소 모든 브랜치 목록 보기

$ git branch -a

브랜치 생성하기

$ git branch "branch name"

해당 브랜치로 체크아웃 하기

$ git checkout "branch name"

브랜치를 생성하고 생성된 체크아웃 하기

$ git checkout -b "branch name"

해당 브랜치 삭제하기

$ git branch -d "branch name"

해당 브랜치 강제 삭제하기

$ git branch -D "branch name"

이전 포스팅에서도 언급했지만 참조타입으로는 객체(Object), 배열(Array), 함수(Function)가 있다. 원시타입과 참조타입을 비교하는것에 초점을 두어 간단히 알아본다.

객체(Object)

자바스크립트에서 객체는 단순하게 표현하면 속성명(Key), 값(value) 형태의 속성(property)을 저장하는 그릇이라고 생각하면 된다. 즉 여러 값을 표현하는 묶음을 만들때 사용된다. 간단한 객체를 만들어 보겠다.

var person = {
    name: '철수',
    age: '20'
}

속성명(name, age)과 값(‘철수’, ’20’)인 객체를 선언했다. 객체 선언 방식은 {}(중괄호)로 한다. 이 선언 방식은 객체 리터럴 방식이라고 하며, 리터럴이란 용어의 의미는 표기법이라고 생각하면 된다. 리터럴 방식은 간단한 표기법만으로도 객체룰 생성할 수 있는 자바스크립트의 강력한 문법이다. 객체의 프로퍼티에 접근하려면 마침표 표기법과 대괄호 표기법이 있다.

console.log(person.name); // 철수

배열(Array)

배열은 변수에 여러가지의 값을 한번에 담을 수 있는 그릇이라고 볼 수 있다. 위에 언급한 객체와 비슷해 보일 수 있지만 배열의 속성명은 각 프로퍼티의 인덱스 값이다. 선언방식은 [](대괄호)로 하고 객체와 마찬가지로 이는 배열 리터럴이다.

var person = ['철수', '20'];

객체와는 다르게 배열의 속성명은 인덱스 값이라고 했다. 그러므로 person의 첫번째 값인 ‘철수’의 속성명(Key)은 배열의 첫번째 인덱스인 0이고, 두번째 값(value)인 ’20’의 속성명은 1이 되는 것이다. 배열의 프로퍼티에 접근하려면 대괄포 표기법을 이용하면 된다.

console.log(person[0]); // 철수 
console.log(person[1]); // 20

함수(Function)

함수는 특정 기능을 하는 구문(알고리즘, 로직)을 독립된 부품으로 만들어 재사용하고자 할때 사용하는 문법이다. 함수를 선언할때는 function키워드를 사용하며 구조는 아래에서 확인할 수 있다.

function 함수이름(파라미터) {
    // 알고리즘
    return 값 // 리턴 값
}

객체(참조)타입이 무엇이 있나 간단히 봤다. 원시타입과 객체(참조)타입의 차이점을 알아보도록 하자.

원시 타입과 참조 타입의 차이

자바스크립트에서는 원시타입인 숫자, 문자열, 논리형, 널, 언디파인드 다섯가지를 제외한 모든 값은 객체(참조)타입 이다. 참조 타입이라고 불리는 이유는 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다. 아래 예제를 살펴 보자.

원시타입은 값 자체를 복사한다.

var num1 = 10,
    num2 = num1;
console.log(num2); // 10
    num1 = 20;
console.log(num2); // 10

변수 num1에다가 10을 대입하고 num1를 num2에 대입했다. 변수에 할당된 값 자체를 복사하였기 때문에 num2의 값은 10이다. num2에 20을 대입해도 num2의 값은 변하지 않는다. num2에 직접적으로 값을 대입하지 않았기 때문이다. 아래 참조타입을 보자.

참조타입은 참조(주소)값을 복사한다.

var obj1 = {
    val: 10
}
var obj2 = obj1;
console.log(obj2.val); // 10
obj1.val = 20;
console.log(obj2.val); // 20

우선 obj1에 객체 리터널을 선언하고, val 프로퍼티에 10을 담았다. 그리고 obj2에 obj1을 할당했다. obj2의 val프로퍼티의 값은 10이 출력된다. 여기서 obj1의 val에 20을 담았다. obj2의 val값을 건들지도 않았는데 obj1 처럼 val값이 20으로 봐뀌어있다. 어떻게 된 것일까?
값 자체가 복사되는 원시값과는 달리 참조타입은 참조(객체를 가르키는 참조값 혹은 메모리 주소)만 복사되고 실제 값은 복사되지 않는다. 즉 obj1과 obj2는 실제 데이터를 가지고 있는 객체의 참조(주소)값만 가지고 있는 것이다.

설명

기존의 select 태그는 CSS 적용이 안되는 부분이 많아 디자인에 제약이 많다.
디자인을 더욱 다양하게 적용할 수 있는 커스텀 셀렉트 박스는 아래와 같이 만들 수 있다.

특징

• 셀렉트가 된 항목은 ‘selected’ 라는 클래스명이 붙음
• 항목이 많아질 경우 스크롤바가 생김
• 생성자 함수방식 및 프로토타입에 메서드를 추가하여 재사용 및 메모리 관리에 용이함

html

<div class="wrap">
    <div class="select_box">
        <div class="box">
            <div class="select">선택</div>
            <ul class="list">
                <li class="selected">선택</li>
                <li>항목01</li>
                <li>항목02</li>
                <li>항목03</li>
                <li>항목04</li>
                <li>항목05</li>
                <li>항목06</li>
                <li>항목07</li>
                <li>항목08</li>
                <li>항목09</li>
                <li>항목10</li>
            </ul>
        </div>
    </div>
</div>

css

.wrap * {
    margin: 0;
    padding: 0;
}
.wrap ul li,
.wrap ol li {
    list-style: none;
}
.select_box {
    margin: 20px;
}
.select_box .box {
    display: inline-block;
    position: relative;
    width: 150px;
}
.select_box .box .select {
    position: relative;
    border: 2px solid #ccc;
    box-sizing: border-box;
    padding: 0 10px;
    height: 40px;
    line-height: 35px;
    font-size: 16px;
    background-color: #fff;
    cursor: pointer;
}
.select_box .box .select:after {
    content: '▼';
    position: absolute;
    top: 0;
    right: 10px;
}
.select_box.on .box .select:after {
    content: '▲';
}
.select_box .box .list {
    display: none;
    overflow-y: auto;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 10;
    border: 2px solid #ccc;
    box-sizing: border-box;
    padding: 10px 0;
    width: 100%;
    max-height: 200px;
    background-color: #fff;
}
.select_box .box .list::-webkit-scrollbar {
    width: 10px;
    height: 0;
}
.select_box .box .list::-webkit-scrollbar-button:start:decrement,
.select_box .box .list::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
}
.select_box .box .list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .05);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.select_box .box .list::-webkit-scrollbar-thumb {
    height: 50px;
    width: 50px;
    background: rgba(0, 0, 0, .2);
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.select_box .box .list>li {
    box-sizing: border-box;
    padding: 0 10px;
    width: 100%;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
}
.select_box .box .list>li:hover {
    background-color: #ccc;
}

javascript

function CustomSelectBox(selector){
    this.$selectBox = null,
    this.$select = null,
    this.$list = null,
    this.$listLi = null;
    CustomSelectBox.prototype.init = function(selector){
        this.$selectBox = $(selector);
        this.$select = this.$selectBox.find('.box .select');
        this.$list = this.$selectBox.find('.box .list');
        this.$listLi = this.$list.children('li');
    }
    CustomSelectBox.prototype.initEvent = function(e){
        var that = this;
        this.$select.on('click', function(e){
            that.listOn();
        });
        this.$listLi.on('click', function(e){
            that.listSelect($(this));
        });
        $(document).on('click', function(e){
            that.listOff($(e.target));
        });
    }
    CustomSelectBox.prototype.listOn = function(){
        this.$selectBox.toggleClass('on');
        if(this.$selectBox.hasClass('on')){
            this.$list.css('display', 'block');
        }else{
            this.$list.css('display', 'none');
        };
    }
    CustomSelectBox.prototype.listSelect = function($target){
        $target.addClass('selected').siblings('li').removeClass('selected');
        this.$selectBox.removeClass('on');
        this.$select.text($target.text());
        this.$list.css('display', 'none');
    }
    CustomSelectBox.prototype.listOff = function($target){
        if(!$target.is(this.$select) && this.$selectBox.hasClass('on')){
            this.$selectBox.removeClass('on');
            this.$list.css('display', 'none');
        };
    }
    this.init(selector);
    this.initEvent();
}

인스턴스 생성

$(function(){
    var select = new CustomSelectBox('.select_box');
});

셀렉트 박스가 여러개일 경우

셀렉트박스가 여러 개일 경우 태그를 각각 추가해 준 뒤 인스턴스도 각각 생성해 주면 된다. 여러개의 셀렉트 박스 예시는 여기를 참고하면 되며, 소스는 여기에 있다.

반올림

Math.round();

var num = 3.5;
console.log(Math.round(num)); // 4

올림

Math.ceil();

var num = 3.5;
console.log(Math.ceil(num)); // 4

내림

Math.floor();

var num = 3.5;
console.log(Math.floor(num)); // 3

정의 Vue Cli 2.x 버전을 이용하여 프로젝트를 생성하면 웹펙 설정파일이 자동으로 생성되지만 3.x 버전부터는 직접 만들어줘야 한다. 때문에 2.x 버전하고 방법이 약간 다르다.

설치할 디렉토리로 가서 프로젝트를 생성해 준다.

$ vue create 'ProjectName'

프로젝트 폴더로 이동하여 원격 저장소에 연결시켜 준 뒤 푸쉬해준다.

cd 'ProjectName'
git remote add origin 'url'
git push origin master

코드를 빌드하면 dist 디렉토리에 출력되어도록 되어있기 때문에 vue.config.js 파일을 만들어서 설정을 변경해둔다. 우선 최상단 디렉토리에 vue.config.js파일을 생성해 준 뒤 아래 코드를 입력해준다. 원격 저장소의 프로젝트명과 동일하게 publicPath를 수정해준다.

// vue.config.js 
module.exports = {
    publicPath: '/ProjectName/',
    outputDir: 'docs'
}

빌드를 하면 /docs 디렉토리가 생성된다. 후에 최상단 디렉토리의 .gitignore 파일에 /dist 를 주석처리 해준다. 이제 깃에 푸쉬해준다.

git add ./
git commit -m "commit message"
git push origin

이제 깃허브로 들어가서 저장소 설정으로 간 뒤 GitHub Pages 항목에서 master branch /docs folder 를 셀렉해준다. 이제 https://[유저이름].github.io/[저장소이름] 으로 들어가면 뷰 페이지를 확인할 수 있다. (반영에 시간이 조금 걸린다. 당분간은 404가 표시되어있다.)

References

vue-cli で作ったサイトを GitHub Pages にデプロイする
Deploy vue-cli 3 project to github pages