sublime text3 - node.js 플러그인 설치 방법



1. 다운로드 

http://www.sublimetext.com/3


2. 버전 콘트롤 설치

https://sublime.wbond.net/installation

자신의 버전에 맞는 설치 구문을 복사하여 수행한다


2.1 복사 : import urllib.request …

2.2 ctrl + ` 또는 View - Show Console 메뉴 선택 

2.3 복사한 내용을 붙여 넣을 이후 enter


3. 설치

3-4. cmd + shift + p

3-5. Install Package

3-6. 입력창에 nodejs 로 검색

3-7. javascript & nodejs snippets for sublime texxt 2/3


Package Control 등록 목록

https://sublime.wbond.net/


설치 및 관련사이트

    NodeJS

        https://nodejs.org/en/

        nodejs : v7.7.4, npm : v4.1.2

    ExpressJS

        https://expressjs.com/

        v4.15.2


시작하기


    링크

        https://expressjs.com/en/starter/installing.html


    작업

        mkdir jwview

        cd jwview

        npm init

            enter 눌러가면서 기본값으로 생성 package.json 생성

        npm install express --save

            express 설치 및 관련 의존성 정보를 package.json에 추가(--save 옵션)


HelloWorld


    작업

        npm init 할때 생성한 main에 일치하는 파일 생성

        index.js 에 아래 소스를 입력


    소스

        var express = require('express')

        var app = express()


        app.get('/', function (req, res) {

        res.send('Hello World!')

        })


        app.listen(3000, function () {

        console.log('Example app listening on port 3000!')

        })

    

    실행

        node index.js


    확인

        http://localhost:3000

            위 링크로 들어가면 Hello World! 라는 문구를 볼 수 있다.


Express Generator ( 익스프레스 생성기 )


    설치

        npm install express-generator -g


    명령어 목록

        express -h

    -h, --help          도움말을 보여준다 

        --version       버전 정보를 보여준다 

    -e, --ejs           ejs 뷰엔진 지원 추가

        --hbs           handlebars 뷰엔진 지원 추가

        --pug           pug 뷰엔진 지원 추가

    -H, --hogan         hogan.js 엔진 지원 추가

    -v, --view <engine> 뷰엔진 지원을 추가한다(ejs|hbs|hjs|jade|pug|twig|vash) (기본은 jade)

    -c, --css <engine>  스타일시트 지원을 추가한다 (less|stylus|compass|sass) (기본은 css )

        --git           .gitignore 에 추가

    -f, --force         강제로 폴더 생성


    예시

        myapp 이라는 이름으로 웹 어플리케이션을 만드려면 

        express --view=pug myapp


    실행

    cd myapp

        debug=myapp:* npm start

        (myapp을 debugging 할것이며, 대상은 *전체, start 스크립트 수행=> package.json에 정의됨)


    폴더구조


        ├── app.js

        ├── bin

        │   └── www

        ├── package.json

        ├── public

        │   ├── images

        │   ├── javascripts

        │   └── stylesheets

        │       └── style.css

        ├── routes

        │   ├── index.js

        │   └── users.js

        └── views

            ├── error.pug

            ├── index.pug

            └── layout.pug


기본 라우팅

http 요청(get, post 등 및 주소 uri)에 따른 처리


app.get('/', function (req, res) {

  res.send('Hello World!')

})


app.post('/', function (req, res) {

  res.send('Got a POST request')

})


get 요청은 주소창을 통해 확인 가능하지만 post 같은 경우는 postman 같은 크롬 확장으로 확인 가능


고정(static) 자원 사용하기


app.use(express.static('public'))


http://localhost:3000/images/kitten.jpg

http://localhost:3000/css/style.css


이후 public 폴더 아래에 존재하는 파일을 위와 같이 사용 가능


app.use(express.static('public'))

app.use(express.static('files'))


위와 같이 하면 1개 이상의 폴더를 지정할 수 있다.


app.use('/static', express.static('public'))


위와 같이 하면 가상경로를 포함하여 지정할 수 있으며 아래와 같이 사용 가능하다.


http://localhost:3000/static/images/kitten.jpg

http://localhost:3000/static/css/style.css


하지만 폴더가 기본적으로 상대적 경로에 존재하므로 아래와 같은 방식으로 보통 사용한다


app.use('/static', express.static(path.join(__dirname, 'public')))


__dirname (현재 경로)에 public 이라는 폴더 경로를 합쳐서 해당 경로를 static 이라는 가상경로에 매칭




[작업진행중]



스타일러스 - CSS를 손쉽게 작성 할 수 있도록 도와준다.

http://learnboost.github.com/stylus/

1. 홈페이지 접속하여 패키지 다운로드 ( http://www.nodejs.org/ )


2. 설치 


3. 확인

정상적으로 설치가 완료되면

node와 npm이 설치된 것을 확인 할 수 있음. ^^

Node was installed at /usr/local/bin/node

npm was installed at /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.


+ Recent posts