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에 올릴 예정

03.18 Ubuntu 16.04 beta2

2016년 03월 18일 현재
우분투 16.04 베타2 버전을 설치한 결과
qca6174칩셋관련 이슈가 모두 해결된듯하다(우분투 자체적으로)

bluetooth mouse 3600또한 해결했다
1.링크
2.blueman, bluez 설치
3.sudo service bluetooth restart

마이너한 문제들이 존재하지만 굉장히 쓸만하다

구글 크롬 설치관련해서 에러가 조금 뜨는데, 패키지 관리자로 설치하고,
dpkg한번 설치하면 실행된다 왜이런건지는 모르겠다

01.07 Ubuntu 에서 Github 활용

1.Github 로그인 -> repository생성
2. git clone "repository 주소"
3. cd (repository 이름)
4. git init
-----------------------------------------------------여기서 부터는 git 업데이트 할때하는 부분
1.올릴 파일을 폴더에 넣음
2.git add .
3.git push origin master

#2016 01.07 우분투에 bluetooth mouse 3600 연결

노트북이 워낙 소형이라 usb포트가 부족하기도 해서,
블루투스 마우스를 하나 새로 장만했다.
아니 근데 이 녀석이 연결은 되는데 움직이질 않는다.

그래서
sudo apt-get install blueman
으로 유틸을 새로 받아서 이걸로 연결했더니 된다

사실 블루투스 쓰려면 그냥 속 편하게 윈도우 쓰는게 낫다
아니면 유선 쓰세요

12.30 lane-detection 프로젝트 공개

우리의 목표는 안드로이드폰과 아두이노를 통해 길을 찾아가는 자동차(실제크기는 아니에요 ㅠㅠ)를 만드는 것이다.

1.Lane Detection 알고리즘

-사진으로 설명을 하자

이게 안드로이드 핸드폰으로 들어온 사진이라고 하자.

우리는 이 사진을 Gray로 변환시키고 Gaussian Blur를 사용하여 경계를 최대한 없앤 후,

Canny Edge를 통해 경계를 찾아 이를 HoughLines로 경계를 찾아 이를 통해 길을 찾고, 얻은 데이터를 이용하여 Arduino를 Control 하는 것 이다.

Gray Conversion

Gaussian Blur

 Gaussian Blur 5*5

Gaussian Blur 11*11

Gray이미지와 Gaussian Blur 두 이미지의 차이가 육안으로 보기엔 거의 차이가 없어보인다.

하지만 각각의 이미지들에 Canny edges를 적용하면

Canny Edges

Gray에 바로 Canny입힌것

 Gaussian Blur 5*5에 Canny 입힌것

Gaussian Blur 11*11에 Canny입힌것

이처럼 눈에 보이지 않는 차이가 나는 것을 알 수 있다.

그리고 절반 아래의 부분에서의 데이터만 이용해도 길을 찾을 수 있다는 것을 알 수 있다.

이를 기반으로 11*11Blur를 이용하여 HoughLines를 사용하면

HoughLines

이처럼 길을 찾을 수 있다.

2.Android Studio에 적용하기

우선 개발환경은:

Ubuntu 15.10

Android studio 1.5.1

OpenCV 3.1.0

Android studio에서 주로 사용하는 언어가 Java임은 자명하지만 OpenCV는 C++기반의 오픈소스이므로 NDK를 이용하여 개발하는 것이 효율적 이다.

물론 Java의 Class를 사용하는것도 나쁘지 않지만, 알려진 Sample들이 모두 C++기반인 점과 Java의 Class들도 기본적으로 NDK가 적용됨을 고려하면 코드를 NDK로 작성하는게 효율적으로 보인다.

OpenCV적용

NDK적용

USB연결_1

USB연결_2

이정도를 참고해서 활용하자

3.시연 동영상

4.개선점

동영상을 보면 알겠지만 카메라가 왼쪽으로 치우쳐 있어서 오른쪽으로 쏠린채로 움직인다

이 점을 개선해야 하고 급한 커브를 돌 수 없는 점을 개선해야한다.

소스코드 GitHub

12.11 우분투 15.10 한영키에 super가 같이 입력되는 오류

하드를 다 밀어버리고 우분투를 설치했기에 한영 입력이 잘 설정되어있어 보였다.

그런데 한영키와 Alt-R을 구분 못하는 오류가 있어서 이를 수정했다.

나같은 경우 이 오류만 해결하면 됐기에 그 부분만 올린다.

1.[시스템 설정> 텍스트 입력창]에 들어가서 [다음 소스로 전환] 키 조합을 삭제
2.[시스템 설정> 키보드]에 들어가서 [허드를 표시할 키] 조합을 삭제

이러고 재시작하면 완료

12.10 우분투로 넘어가자

15.04이후로 네트워크 지원된다고 알려졌으므로 넘어가 보자(15.10으로 합니다.)

속았다 지원되기는 개뿔

일단 처음부터 차근차근 시작합시다.

1.저번부터 리눅스 자체가 튕기는 현상이 너무 심했는데 깔끔하게 해결됐다
그냥 커널 업그레이드만 해주면 되는문제

sudo apt-get update
sudo apt-get upgrade
sudo apt-get dist-upgrade

를 실행해 주자

2.Qualcomm Atheros Q61x4 wireless 관련

http://askubuntu.com/questions/607707/ath10k-installation/607982
의3번째 답변을 참고하자(커널 업데이트(2번) 하고 하면 확실하다)