1. home brew 설치

homebrew는 mac OS 에서 윈도우의 프로그램 추가/제거와 비슷한?기능을하는 패키지 관리자입니다( git과 ruby 기반 )

homebrew를 사용하면 각종 패키지들을 코드 한줄로 뚝딱 다운이 가능해요

  • 설치방법

터미널에 아래의 명령어를 붙여넣어주세요

1
ruby -"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
cs

설치후에 내 mac에 homebrew가 잘 깔렸나 확인하기 위해 아래 명령어를 입력 후 의사님이 진단하신대로 따라하시면 됩니다

1
brew doctor
cs

homebrew설치 끝! (참고 사이트 : https://brew.sh/index_ko.html )


2. vim 8.0 설치

mac에는 기본적으로 vim (7.3~7.4)이 설치되어있지만 작년말에 나온 8버전을 설치해보자! 그냥 귀찮거나 구버전이 좋다하면 안깔아도 됩니다

  • 설치방법

터미널에 아래 명령어를 차례로 입력합니다

1
2
brew install mercurial
brew install vim --with-override-system-vim

cs


두번째 줄 이후에 이미 설치되어 있다는 에러가 난다면

1
2
brew unlink vim
brew install vim --with-override-system-vim
cs

다시 하란대로 명령어를 입력하고 아래의 명령어로 vim의 버전을 확인했을때 8.0이 나오면 성공!~!

1
vim --v
cs


3. plugin (Vundle) 설치

vim 그 자체로는 단축키가 많은 그저 하드코딩해야하는 도구일 뿐이지만 플러그인으로 이런저런기능을 넣어주면 아주아주아주 좋아져요

vim의 플러그인 매니저는 Vundle로 다음과 같이 설치합니다

  • 설치방법

아래의 명령어를 입력해 Vundle 설치 ( git이 설치되어 있어야 함! )

1
git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim

cs



4. vimrc세팅

  • 설치방법

터미널에 아래 명령어를 입력합니다 ( vim으로 ~/.vimrc라는 파일을 열겠다는 명령어, 기존에 있던파일이 아니면 새로 만들어 열게됩니다)

1
vim ~/.vimrc
cs

내용( HTML,CSS 편집 기준으로 플러그인들을 넣었습니다 )

   

 set nocompatible              " be iMproved, required 

 filetype off                  " required


 set rtp+=~/.vim/bundle/Vundle.vim

 call vundle#begin()



 Plugin 'VundleVim/Vundle.vim'

 Plugin 'tpope/vim-fugitive'

 Plugin 'https://github.com/itchyny/lightline.vim'

 Plugin 'https://github.com/tpope/vim-surround'

 Plugin 'https://github.com/skammer/vim-css-color'

 Plugin 'https://github.com/Shutnik/jshint2.vim'

 Plugin 'git://git.wincent.com/command-t.git'

 Plugin 'rstacruz/sparkup', {'rtp': 'vim/'}

 Plugin 'mattn/emmet-vim'

 Plugin 'ascenator/L9', {'name': 'newL9'}

 Plugin 'scrooloose/nerdtree'

 

 call vundle#end()            " required

 filetype plugin indent on    " required


 imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab>")

 set autoindent

 set smartindent

 set tabstop=2

 set shiftwidth=2

 set nu

 colorscheme default

 set backspace=indent,eol,start

 syntax enable



위와 같이 작성 후 :w로 저장후 :PluginInstall로 플러그인들을 설치합니다.


5. 플러그인 종류 및 설명


플러그인 위의 두줄은 다른 플러그인을 사용하기 위한 필수 플러그인 입니다


  • emmet-vim은 html:5 를 입력 후 ctrl y 를 누른 뒤 ,를 누르면 html폼이 완성되는 플러그인 이지만


아래의 imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab>") 로 단축키를 탭키로 바꿔줬습니다


  • nerdtree는 디렉토리를 볼수있게 해주는 플러그인이며 :NERDTree로 실행할 수 있어요


다른 플러그인들은 저도 잘모르겠으니 알려주세요 하하 


set autoindent  " 자동 들여쓰기
set smartindent " 스마트한 들여쓰기

set tabstop=2 "탭 2칸

set shiftwidth=2 " 자동 들여쓰기 2칸
set number " 행번호 표시, set nu 도 가능

colorscheme default  "  vi 색상 테마 설정
set backspace=eol,start,indent "  줄의 끝, 시작, 들여쓰기에서 백스페이스시 이전줄로
syntax enable " 문법강조 on



끝! 안되시는 부분 댓글로 남겨주세요 끝까지 읽어주셔서 감사합니다


'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

jQuery 효과


작성방법 $("선택자").click(function(){ $("선택자").메소드;});

콜백함수는 앞의 함수가 끝나면 실행


jQuery 효과(effects)


숨기기 hide(speed, callback)

보여주기 show(speed, callback)

토글 toggle()


페이드인 fadeIn(speed,callback)

페이드아웃 fadeOut(speed,callback)

페이드토글 fadeToggle(speed,callback)

페이드투 fadeTo("slow", 0.7) 0.7은 투명도를 나타냄

속도는 "slow","1000" 등으로 표현


슬라이드다운 slideDown(speed,callback)

슬라이드업 slideUp(speed,callback)

슬라이드토글 slideToggle(speed,callback)


애니메이션 animate{( left: '250px', opacity:'0.5' height:'150px' width: '150px'}) 절대값

height: '+=150px' width: '+=150px'  상대값

height: 'toggle' 지정된 값 사용

애니메이션을 연속적으로 처리하는 큐기능


정지 stop(stopAll, goToEnd) 삭제여부지정

stopAll,goToEnd 둘다 기본값은 false


메소드 체인

연속으로 메소드를 쓰는

줄바꿈 가능


jQuery HTML


DOM = Document Object Model

HTML 및 XML 문서에 엑세스하기위한 표준 정의

text() html() val() 로 표현가능

attr(속성값, 변경)  속성값 가져올 때 사용


Element추가

append() html 끝부분에 내용 삽입

prepend() html  앞부분에 내용 삽입

after() 요소 뒤에 내용 삽입

before() 요소 전에 내용 삽입


remove() 선택된 요소 전체 삭제

empty() 선택된 요소의 자식요소 삭제


jQuery CSS

addClass() 다른 요소에 클래스 속성 추가 ex).addClass("important blue")

removeClass() 다른 요소에 클래스 속성 제거 ex).removeClass("blue important")

toggleClass() 클래스 속성 추가/제거 전환


css("background-color") 배경 색 반환

css("propertyname", "value") css속성 설정

css({"propertyname": "value", "propertyname": "value"}) 여러개의 css속성 설정

width() 폭 반환 / height() 높이 반환, 변경은 ()안에 변경값 입력

innerWidth() 패딩 포함 폭 반환 / innerHeight() 패딩 포함 높이 반환

outerWidth() 패딩,테두리 포함 폭 반환 / outerHeight() 패딩,테두리 포함 높이 반환(true)입력해야함


jQuery Traversing


parent() 선택 요소의 직접적인 부모 요소 반환 ex)$("span").parent

parents() 루트 요소까지 선택된 요소의 모든 상위 요소 반환 ex)$("span").parents("ul") span의 부모요소중 ul 반환

parentsUntil() 주어진 두 인자 사이의 모든 상위 요소 반환 ex)$("span").parentsUntil("div")


children() 선택 요소의 자식 요소 반환

find() find안의 요소 반환 ( "*" 입력시 모든 자식 요소 반환)


siblings() 형제 요소 반환 ex)$("h2").siblings("p") h2의 형제 요소중 <p>반환

next() 선택 요소 다음 형제 요소 반환 (<=>prev())

nextAll() 선택 요소 다음 형제 모두 반환 (<=>prevAll())

nextUntil() 선택요소 사이의 요소 모두 반환 (<=>prevUntil())


first() 첫 번째 요소 선택

last() 마지막 요소 선택

eq(1) 인덱스 번호 선택

not(".intro") intro 제외하고 선택


jQuery AJAX 

load() 

syntax: $(selector).load(URL,data,callback);


다른 프레임워크와 혼용시 $대신 jQuery작성

$.noConflict() 작성 뒤 사용

변수에 담을 수 있음 ex)var jq= $.noConflict()





스프레드 연산자(...)(JavaScript)

 

배열 리터럴의 일부를 반복 가능한 식(다른 배열 리터럴 등)에서 초기화하거나 식을 함수 호출에서 여러 인수로 확장할 수 있습니다.

var array = [[arg0ToN ,] ...iterable [, arg0ToN]]
func([args ,] ...iterable [, args | ...iterable])

iterable

필수.반복 가능한 개체입니다.

arg0ToN

선택 사항입니다.하나 이상의 배열 리터럴 요소입니다.

args

선택 사항입니다.함수에 대한 하나 이상의 인수입니다.

반복기에 대한 자세한 내용은 반복기 및 생성기(JavaScript)를 참조하세요.rest 매개 변수로 스프레드 연산자 사용하기에 대한 자세한 내용은 함수(JavaScript)를 참조하세요.

다음 코드 예제에서는 스프레드 연산자의 사용이 concat 메서드의 사용과 대조를 이룹니다.

var a, b, c, d, e;
a = [1,2,3];
b = "dog";
c = [42, "cat"];

// Using the concat method.
d = a.concat(b, c);

// Using the spread operator.
e = [...a, b, ...c];

console.log(d);
console.log(e);

// Output:
// 1, 2, 3, "dog", 42, "cat"
// 1, 2, 3, "dog", 42, "cat"

다음 코드 예제에서는 함수 호출에서 스프레드 연산자를 사용하는 방법을 보여줍니다.이 예제에서는 두 개의 배열 리터럴이 스프레드 연산자를 사용하여 함수로 전달되며 배열은 여러 인수에 확장됩니다.

function f(a, b, c, x, y, z) {
  return a + b + c + x + y + z;
}

var args = [1, 2, 3];
console.log(f(...args, 4, ...[5, 6]));

// Output:
// 21

스프레드 연산자를 사용하여 이전에 apply 사용을 필요로 한 코드를 간소화할 수 있습니다.

function f(x, y, z) {
    return x + y + z;
}

var args = [1, 2, 3];

// Old method
func.apply(this, args);
// New method
func(...args);


출처:https://msdn.microsoft.com/ko-kr/library/dn919259(v=vs.94).aspx

+ Recent posts