체크

리눅스 버전체크

# uname -a

CentOS 버전체크

# cat /etc/redhat-release

하드용량체크

# df -h

디렉토리

현재 디렉토리 확인하기

# pwd

현재 디렉토리 목록 보기

# ls

현재 디렉토리 목록 자세히 보기

# ll

파일/폴더

파일 생성

# touch [파일명]
# cat [파일명]
# vi [파일명]

폴더 생성

# mkdir [폴더명]

vi 편집기 실행

# vi [파일명]

vi 편집기 저장 후 끝내기(ESC 누른뒤)

# wq

vi 편집기 저장하지 않고 끝내기(ESC 누른뒤)

# q!

파일 삭제

# rm [파일명]

파일 삭제 확인을 거치지 않고 삭제

# rm -f [파일명]

해당 폴더 삭제

# rm -r [폴더명]

폴더 삭제 확인을 거치지 않고 삭제

# rm -rf [폴더명]

압축

tar 압축하기

# tar -cvf [파일명.tar] [폴더명]

ex) foo라는 폴더를 boo.tar로 압축하고자 한다면
# tar -cvf boo.tar foo

tar 압축 풀기

# tar -xvf [파일명.tar]

ex) foo.tar라는 tar파일 압축을 풀고자 한다면
# tar -xvf foo.tar

tar.gz 압축하기

# tar -zcvf [파일명.tar.gz] [폴더명]

ex) foo라는 폴더를 boo.tar.gz로 압축하고자 한다면
# tar -zcvf boo.tar.gz foo

tar.gz 압축 풀기

# tar -zxvf [파일명.tar.gz]

ex) aaa.tar.gz라는 tar.gz파일 압축을 풀고자 한다면
# tar -zxvf aaa.tar.gz

MySQL

MySQL 설치 유무

# rpm -qa | grep mysql

MySQL 설치

# yum install mariadb

MySQL 설치 경로 확인

# find / -name mysql

• 최소 뷰 기능만 들어간 HTML 파일 1개 생성

  
  

  $ vue init simple
  

  
  

• 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원

  
  

  $ vue init webpack
  

  
  

• 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이밍용

  
  

  $ vue init webpack-simple
  

  
  

• 고급 브라우저파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원

  
  

  $ vue init browserify
  

  
  

• 브라우저파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이밍용

  
  

  $ vue init browserify-simple
  

  
  

• CLI 관련 라이브러리 설치

  
  

  $ npm install
  

  
  

• 웹팩 데브 서버 실행

  
  

  $ npm run dev
  

  
  

자료형이란?

자료형은 데이터 값의 유형이다.

원시타입과 객체(참조)타입으로 나눌 수 있다.

원시타입

• 문자열(String)
• 숫자(Number)
• 논리형(Boolean)
• 언디파인드(Undefined)
• 널(Null)

객체(참조)타입

• 객체(Object)
• 배열(Array)
• 함수(Function)

여기서 객체(참조)타입과 객체(Object)의 차이에 대해 혼동하기 쉽다. 객체(참조)타입은 기본타입을 제외한 모든 자바스크립트의 객체를 가르키며, 객체(Object), 배열(Array), 함수(Function)도 객체(참조)타입 에 포함된다. 객체(Object)는 자바스크립트에서 표현되는 자료형의 값이며 객체(참조)타입중에 하나인 객체(Object)이다.

원시타입

문자(string)

우리가 실생활에서 쓰고 있는 글자를 문자열이라고 생각하면 된다. 변수에 담는 방식은 큰따옴표나 작은 따옴표로 감싸서 저장하시면 된다. 문자열에 따옴표를 포함하고 싶으면 다른 따옴표로 감싸주면 된다.

var str = 'data'; // 문자열을 담을 때
var str = "'data'"; // 작은 따옴표를 문자열에 추가하고 싶을때

참고로 따옴표를 문자열로 인식하고 싶을때는 역슬래쉬를 따옴표 앞에 붙여 사용하면 된다. 이 작업을 이스케이핑이라고 부른다.

var str = "'data'"; // 작은 따옴표를 문자열로 인식하고 싶을때

숫자(number)

우리가 알고있는 숫자라고 생각하면 된다. 자바스크립트는 모든 숫자를 64비트 부동소숫점 형태로 저장하기 때문에 하나의 타입만 존재하며 형태는 크게 정수형(10진수, 16진수), 실수형으로 나뉜다.

• 정수형(10진수) : 평상시에 사용하는 10진수이며, 소숫점이 없다.
• 정수형(16진수) : Ox로 시작하며 숫자 09와 문자 AF를 사용해서 숫자를 표현한다. 보통 색상을 나타낼때 사용한다.(예 : 0xF00)
• 실수형 : 소숫점을 갖는 숫자

자바스크립트는 소숫점을 계산할때 한가지 오류가 있는데 확인하고 넘어가자.
하단의 코드를 보면

console.log(0.1 + 0.2);

결과는 0.3 이 나올겉 같지만 0.30000000000000004 가 출력이 된다. 이것이 부동소수점 오류며 아래와 같은 방법으로 해결을 할 수 있다. 주의하도록 하자.

console.log(((0.1 * 10) + (0.2 * 10)) / 10);

논리형(boolean)

쉽게 설명해서 참, 거짓이라고 생각하면 된다.

• 참 : true
• 거짓 : false

데이터 타입마다 true, false로 변환되는 값이 다르다.

데이터 타입	true로 변환되는 값	false로 변환되는 값
불리언	true	flase
문자열	비어 있지 않은 모든 문자열	“”(빈 문자열)
숫자	0이 아닌 모든 숫자(무한대 포함)	0, NaN
객체	모든 객체	null
Undefined	해당 없음	undefined

언디파인드(undefined)

언디파인드는 아무 값도 없는 상태이다.

var val; // undefined

널(null)

널은 아무것도 참조하고 있지 않다라는 의미이다. 여기서 언디파인드와 널이 조금 헷갈리는데, 언디파인드는 값 자체가 선언이 되지 않은거고 널은 임의로 빈 값으로 선언한 상태라고 보면 된다. 널은 객체를 담을 변수를 초기화할때 많이 사용한다.

각 자료형의 초기화

var num = 0; // 숫자 초기화
var str = ''; // 문자 초기화
var boolean = false; // 논리형 초기화
var obj = null; // 객체 초기화

반올림

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

eval 정의

• eval()은 전역 객체(window)의 함수 속성이다.
• eval()의 인자는 문자열이며 문자열 형태를 연산할 수 있다.

console.log('2 + 2');
// 2 + 2

console.log(eval('2 + 2'));
// 4

eval 문제점

• 굳이 eval() 함수를 쓰지 않아도 충분히 동일한 동작을 구현할 수 있는 경우가 많다.
• 보안상 위험한 javascript 코드를 실행할 수 있다는 위험때문에 eval() 함수는 권장되지 않는다.

References

eval()
eval() 사용과 문제점 : #eval() is evil
JavaScript eval 함수

자바스크립트에서의 스코프란 코드가 실행되는 컨텍스트(유효범위)이며 전역 스코프, 지역 스코프, eval 스코프로 나눌 수 있다.

전역 스코프

• 함수나 객체의 밖에서 선언되었다면 전역 스코프로 정의된다.
• 모든 곳에서 전역 스코프에 있는 변수를 사용할 수 있다.

// 전역 스코프
var foo = 1;
console.log(foo); // 1

function func() {
    // foo가 전역에서 선언되었기 때문에 함수 내부에서도 foo값을 사용할 수 있다.
    console.log(foo); // 1
}

지역 스코프

• 함수나 객체의 안에서 선언되었다면 지역 스코프로 정의된다.
• 해당 함수나 객체에서만 지역 스코프를 사용할 수 있다.

함수 지역 스코프

function func() {

    // 지역 스코프
    var foo = 1;
    console.log(foo); // 1
}

// foo가 func 함수 내부에서 선언되었기 때문에 함수 외부에서 사용을 할 수 없다.
console.log(foo); // Uncaught ReferenceError: foo is not defined

객체 지역 스코프

var obj = {
    foo: 1
};
console.log(obj.boo); // 1
console.log(boo); // Uncaught ReferenceError: foo is not defined

eval 스코프

• eval의 경우 eval()을 사용해 매개변수를 사용하면 이를 사용했을 경우에만 해당 스코프에 담긴 값을 불러온다. 각각 선언할때 고유한 스코프를 가지는 것이 특징이다.

정의

프로그래밍에서 데이터를 담는 공간이다.

var 변수이름 = 저장데이터;

선언 방법은 var 키워드를 사용하며(현재는 let, const 키워드 사용을 지향한다.), =는 대입 연산자로서 우측에 있는 값을 왼쪽에 있는 변수에 담는 연산자다. ;(세미콜론)은 문장의 끝을 알린다. 오류를 방지하기 위해 문장이 끝나면 꼭 선언해 주도록 하자.

참고로 함수 선언식에서는 마지막에 세미콜론을 붙이지 않는데 이건 하나의 관습이고, 코드 작성시 권장되는 방식이다. 그리고 자바스크립트에서는 세미콜론 사용을 강제하지는 않는다. 그 이유는 자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문이다. 하지만 세미콜론을 꼭 선언해 주는 습관을 가지도록 해야한다. 신경을 안쓴다면 코드를 압축하거나 디버깅중에 심각한 오류를 가지게 될수 있기 때문이다.

종류

변수는 크게 네가지로 나뉠수 있으며 종류는 아래와 같다.

1. 전역변수(Global Variable): 전역에서 사용되는 변수로서 어디서든 접근이 가능하다.
2. 지역변수(Local Variable): 특정 지역에서 사용되는 변수로서 보통 함수 내부에 만들어 지는 변수
3. 인자 & 매개변수(Parameter): 함수 외부에서 데이터를 받을 때 사용되는 변수

인수(Arguments)와 인자 & 매개변수(Parameter)에 대해 다소 헷갈릴 수 있다. 인수는 함수를 호출할때 대입하는 값을 의미하고 인자 & 매개변수는 함수 외부에서 전달받은 값을 의미한다고 볼 수 있다.

function func(foo) {
  return foo; // foo = 인자 & 매개변수
}
func("value") // "value" = 인수

4. 속성(Property): 객체의 속성값으로 쓰이는 변수이다. 참고로 전역 객체는 window 객체이다. 전역변수를 선언한다면 자동으로 window 객체의 프로퍼티가 된다고 생각하면 된다.

var obj = {
  name: "foo"
};
// name = 속성(프로퍼티, 아니면 키)
// foo = 속성의 값(프로퍼티 값 아니면 키값)

명명 규칙

변수를 만들때는 주의사항이 네가지 있다.

• 변수명은 대소문자를 구분해야 한다.
• 변수명은 소문자로 시작하고, 관례상 카멜기법을 사용한다. 여기서 카멜기법이란 문자모양이 낙타와 비슷하다고 해서 지어졌다. 네이밍 기법은 3가지로 분류할수 있다.
  • 카멜기법(myName)
  • 스네이크 기법(my_name)
  • 파스칼 기법(my-name)
• 한번 저장하고 변하지 않는 상수값은 모두 대문자로 작성한다. 자바 언어 같은 경우 상수 값을 만드는 방법이 지원되지만 자바스크립트는 없다. 그래서 관례상 대문자로 작성하는 것이다. 예가 몇가지 있는데 슬라이드 플러그인에서 사용자가 정의하는 변수나, 그누보드의 config.php 에 나와있는 상수 선언 등이 있다.
• 키워드(예약어)를 사용하면 안된다.(예: var, function, break 등등 아주 많음) 예약어로 변수를 선언하면 브라우저에서 오류 메세지가 출력되므로 많은 예약어를 굳이 따로 외울 필요는 없다.

특정 데이터가 필요한 경우 Node.js를 이용하여 웹 크롤링을 하면 쉽게 데이터를 추출할 수 있다.

설치 환경

• node.js
• npm

설치 모듈

• request
  웹 페이지의 HTML문서를 그대로 가져오기 위한 모듈
• cheerio
  HTML 문서를 파싱(parsing)하여 필요한 정보만을 가져올 수 있도록 도와주는 모듈, 제이쿼리 셀렉터를 사용할 수 있다.

작업 순서

1. 원하는 디렉토리에 폴더 생성 후 js 파일 생성(crawling.js로 만들었음)

   
   

2. 터미널에서 프로젝트 폴더로 진입

   
   

3. package 생성(이름만 설정한뒤 모두 예스)

   
   

   & npm init
   

   
   

4. 필요 모듈 설치

   
   

   $ npm install cheerio   
   $ npm install request
   

   
   

5. package.json 파일에 아래처럼 해당 모듈의 버전이 나타난다면 제대로 설치가 된 것이다.

   
   

   "dependencies": {
     "cheerio": "^1.0.0-rc.2",
     "request": "^2.83.0"
   }
   

   
   

6. 생성한 crawling.js 파일에 설치한 모듈을 불러준다.

   
   

   var cheerio = require('cheerio');
   var request = require('request');
   

   
   

7. url 변수에 파싱할 주소를 입력하고, request 모듈을 이용하여 웹페이지를 로드한다.

   
   

   var url = 'http://www.naver.com';
   request(url, function (error, response, html){
    var $ = cheerio.load(html);
    // 여기서 제이쿼리 셀렉터를 이용하여 원하는 정보를 가져올 수 있다.
   });
   

   
   

8. 아래는 전체 코드이다.
   “`javascript
   var cheerio = require(‘cheerio’);
   var request = require(‘request’);

   
   

var url = ‘http://www.naver.com’;

request(url, function (error, response, html){ var $ = cheerio.load(html);

// 여기서 제이쿼리 셀렉터를 이용하여 원하는 정보를 가져올 수 있다.

console.log($('.naver_logo').text())

});

# References
[Node.js로 멜론 순위 차트 데이터 파싱](http://leechoong.com/posts/2017/nodejs_cheerio)  
[[Node.js] node.js환경에서 웹 크롤링 하기(cheerio-httpcli)](https://hanswsw.tistory.com/6)  
[[Node.js] 크롤링 DOM parsing ( request, cheerio, iconv 모듈 )](https://victorydntmd.tistory.com/94)

초기화

깃 초기화 : 기존 디렉토리를 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"

설명

기존의 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');
});

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

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