Node.js 입문 - (5) post 방식을 이용한 간단한 로그인

GET방식은 주소창에 모든 parameter의 값이 뜨는 방식이므로 로그인에는 적합하지 않다
따라서 주소창에 뜨지않는 POST 방식을 이용해 보자

우선 main.js 파일을

module.exports = function(app){

    app.get('/',function(req,res){
        res.render('index');
    });

    app.post('/login',function(req,res){
        console.log(req.body.UserName);
        res.render('login',{id:req.body.UserName,password:req.body.Password});
    });
}

로 바꿔주자 body-parser를 이용하게되므로
npm install --save body-parser를 실행하여 설치하자

또한 app.js파일을

var express= require('express');
var app = express();

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

var router = require('./router/main.js')(app);
var _port = 3000;

app.set('views', __dirname + '/views');
app.set('view engine','pug');
app.use(express.static('public'));

app.listen(_port, function(){
    console.log("PORT : " + _port);
});

와같이 바꿔주자

html
  head
    script.
  body
    form(action='/login', method='post')
      ul
        li
          label(for='UserName') Username
          |  
          input(type='text', name='UserName',id='UserName')
        li
          label(for='Password') Password
          |  
          input(type='password', name='Password',id='Password')
        li
          input(type='submit')

index.pug

html
    body
        ul
            li= id
            li= password

login.pug

위의 두 .pug파일을 추가하여 실행하면 로그인창이 뜨게 되고, 아이디와 비밀번호를 입력하면 /login 창에서 확인 할 수 있다

Node.js 입문 - (4) pug를 이용한 동적 웹페이지

이번에는 정적인 페이지가 아닌 동적인 페이지를 만들어 보려고 한다

이번에도 기본 구조는 똑같이 '/'에 들어오면 index파일을 읽어낼 계획이다.

동적인 파일은 만들어내는 엔진으로는 pug를 사용할 것이므로
npm install --save pug를 이용하여 설치하자
pug사이트

var express= require('express');
var app = express();
var router = require('./router/main.js')(app);

app.set('views', __dirname + '/views');
app.set('view engine','pug');

var _port = 3000;
app.use(express.static('public'));

app.listen(_port, function(){
    console.log("PORT : " + _port);
});

위와 같이 app.js에 작성하면
Views라는 폴더에서 pug파일을 읽어들일 준비가 된 것이다

이제

html
    title Hello Title
    body
        h1 Hello Message

와 같이 Views폴더 내에 index.pug파일을 생성하자

그 후 main.js파일을

module.exports = function(app){
    app.get('/',function(req,res){
        res.render('index');
    });
}

처럼 바꿔준 후에 127.0.0.1:3000로 접속해보면 제목이 Hello Title이고 내용이 Hello Message로 출력되는것을 볼 수 있다

pug 파일은 위에 처럼 보통 html태그와 태그는 같지만 <,>같은 꺽쇠 기호를 사용하지 않으며, 닫히는 태그또한 없고 tab으로 구분되므로 tab사용에 유의 하여야 한다

하지만 여기까지는 정적인 html파일과 문법만 다를뿐, 동적인 효과를 볼 수가 없으므로 동적인 요소를 확인해 보자

첫번째로, 변수설정이 있다.

pug 파일을

html
    title=title
    body
        h1=message

으로 바꿔주고,
main.js 파일을

module.exports = function(app){
    app.get('/',function(req,res){
        res.render('index',{title:'Hello Title',message:'Hello Message'});
    });
}

로 바꾼후에 다시 접속해보면 같은 메세지가 뜨는 것을 볼 수 있다
pug파일에서 태그 바로옆에 = 을 붙이고 써준 title, message들이 변수로 작용하고,
main.js파일에서 title:'Hello Title'과 같이 Json형식으로 써주면 그 변수로 값이 넘어가는 방식이다.

이번에는 사용자로 부터 get방식으로 값을 받는 방식으로 동적으로 설계해보자

우선 Get방식은 변수에대한 값을 주소로 나타나게 값을 전달 받는다

이제 NodeJs에서 이 값을 받기 위해서,

main.js 파일을

module.exports = function(app){
    app.get('/:title/:message',function(req,res){
        var title = req.params.title;
        var message = req.params.message;
        res.render('index',{title:title,message:message});
    });
}

처럼 바꿔주고 127.0.0.1:3000/Hello World/Hello Message 으로 접속해보면 같은 결과가 나오는것을 볼 수 있다

즉 처음에 온 값은 req.params.title에, 두번째 값은 req.params.message에 들어가서 pug파일에 전달되어 표시되는 것이다

이 방법은 parameter로 몇개의 값이 들어오는지 정확하게 알 때만 쓸 수 있지만, 주소가 간결하다는 장점이 있다

다른 GET방식으로는 몇개의 값이 들어오는지에 상관없이 처리 하는 방법이 있는데,

module.exports = function(app){
    app.get('/',function(req,res){
        var title = req.query.title;
        var message = req.query.message;
        res.render('index',{title:title,message:message});
    });
}

이런 방식으로, 대신에 주소값은
http://127.0.0.1:3000/?title=Hello World&message=Hello Message 처럼 상대적으로 주소길이가 길어 질 수 밖에 없다.

Node.js 입문 - (3) 정적인 html 파일 이용한 웹페이지

단순하게 get 방식을 이용하여 웹에 결과를 표현하는 방식까지가 2장까지 였다면,
이제 정적인 홈페이지를 만들 차례다

정적인 홈페이지라는 것은, 그 어떤 데이터의 변화에도 같은 화면이 도출되는 것이다
따라서 다소 의미 없어 보이기도 하지만, 전반적인 이해를 위해 참고하도록 한다

우선 구조부터 설명하자면, '/'즉 최상위 디렉토리에 접속했을경우 index.html파일을 출력하고자 하는것이 목적이다.

우선 index파일부터 하나 만들자.
프로젝트 폴더 안에 static이라는 폴더 하나를 만들고
그 안에 index.html파일을 만듭니다
안에 내용은 자유롭게 하셔도 됩니다.
예시)

<html>
    <title>TITLE FOR NODEJS</title>
    <body>
        <h3>HELLO WORLD</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
</html>

이와같이 html파일을 하나 만든다

그리고 이제 app.js파일에서 정적인 html파일들을 불러오기 위한 작업을 하면

var express= require('express');
var app = express();
app.set('views', __dirname + '/public');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

var _port = 3000;
app.use(express.static('public'));

app.listen(_port, function(){
    console.log("PORT : " + _port);
});

처럼 app.set('views', __dirname + '/public');
을 통해 app이 static한 파일들이있는 public이라는 폴더를 쓰게된다

또한 ejs라는 엔진을 통해 렌더링 할것이므로 npm install --save ejs를 콘솔에서 실행하여 설치하자

그리고 이제 2강에서 app.get과 같이 라우팅을 하는 함수들을 모아 따로 js파일을 만들어 관리하자
따라서 router라는 폴더를 만들고 그 안에 main.js라는 파일을 만들어
다음과 같이 써준다

module.exports = function(app){
    app.get('/',function(req,res){
        res.render('index.html');
    })
}

이제 app.js파일에서 main.js파일을 불러오는 작업을 하면,

var express= require('express');
var app = express();
var router = require('./router/main.js')(app);
app.set('views', __dirname + '/public');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

var _port = 3000;
app.use(express.static('public'));

app.listen(_port, function(){
    console.log("PORT : " + _port);
});




자 이제 여기까지 하면 정적인 파일을 불러오는 방법까지 완료하였다.

Node.js 입문 - (2) Node js 시작

Visual Studio를 열어 프로젝트로 사용할 폴더를 열고 나서 폴더에 .js파일(ex. app.js) 하나를 만들고 저장한다.
콘솔창을 열어
npm install supervisor -g
를 실행하면 supervisor 라는 npm 확장프로그램이 설치 되는데, -g라는 옵션은 글로벌로 사용하겠다라는 의미라서 이미 한 프로젝트에서 설치 한 경우에는 다른 프로젝트에서 다시 설치할 필요가 없다.

그 후에 npm init을 실행하면 지금 현재 있는 폴더에 nodejs 프로젝트를 초기화 하는 과정을 진행한다
그 중 test command 정도를 제외하면 다 디폴트 값으로 진행해도 무방하다
test command 는 npm test를 실행했을때 사용할 커맨드를 설정하는 것으로 node app.js나 supervisor를 사용할 예정이라면 supervisor app.js정도를 사용하면 무난하다(app.js대신에 자신의 시작 .js파일을 넣어야 한다)

그 후 npm install --save express 명령을 실행하여 express를 설치한다
express는 nodejs에서 주로 사용하는 프레임워크라고 보면 된다
express웹사이트

그럼 이제 아주 기초적인 웹앱을 만들어보자

app.js에

var express= require('express');

var app = express();

app.listen(3000, function(){

    console.log("Hello World");

}

라고 넣고 node app.js , npm test, supervisor app.js 중 어느 것이라도 이용하여 실행해보면

Hello World라는 결과물이 나온다

위에 두 줄은 express엔진을 사용한다는 뜻을 의미 하고 아래 app.listen은 3000번 포트를 통해 연결되고 성공했을시에 콘솔창에 Hello world를 찍는 것을 의미한다.

이제 실제로 웹에서 보기 위한 코드를 짜보자

var express= require('express');

var app = express();
app.get('/',function(req,res){
    res.send("Hello NodeJs");
});
app.listen(3000, function(){

    console.log("Hello World");

});

위와 같이 app.get~을 넣어주면 '/' 주소에 get방식으로 들어왔을때 뒤의 function(req,res)를 부르는데 req는 호출될때 넘어오는 정보를 받는 역할을 하고 res는 호출될때 그에 따라 결과물을 출력하는 역할을 한다 따라서 위와 같이 수정한 후에 127.0.0.1:3000을 웹브라우저를 통해 들어가면

Hello NodeJs라는 결과가 나온다

Node.js 입문 - (1) Node js 사용 환경

Node.js 는 서버사이드 자바스크립트로 다양한 이점들을 지니고 있는데 자세한건 여기에서 알아보자

일단 기본적으로 앞으로 사용하게 될 개발 환경은 Visual Studio Code이다
멀티 플랫폼 기반이고 많은 단축키들이 Visual Studio 와 겹치는 부분이 많아 사용하기 편한 점이 있다.
또한 확장프로그램 설치용 스토어도 존재하여 여러가지를 사용해 볼 수 있다

설치 사이트

그 중에 가장 편하게 쓰는 기능은 (단축키는 맥 전용)
자동 정렬 기능( auto format) - command + k, f
통합 터미널 - ctrl + shift + `
등이 있다

npm 관련된 도구는 supervisor를 쓰는데, 자세한 설명은 나중에 하겠다.

앞으로 진행사항은 Github에 올릴 예정