(21) 10~20 express 모듈을 사용하여 작성한 app.js 전체 소스코드
const express =require('express'); // 모듈을 가져오자.const app= express(); //express().get 이런식으로 사용해도 되지만! 가독성을 높여주기 위하여 app이라는 상수에 담아주자.const bodyParser = require('body-parser'); app.locals.pretty= true; // 코드를예쁘게해준다.app.set('view engine','jade');app.set('views','./views'); // use라는 api를 사용하여 express의 정적서비스를 app.js에서 사용할 수 있도록 연결시키자.// public 디렉토리 안의 정적인 파일들을 직접적으로 사용할 수 있게 하는 코드app.use(express.stati..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(20) 데이터 전송 (POST 방식)
어떻게 하면 post방식으로 보낸 데이터를 서버측에서 확인할 수 있는가? 요약.// get 방식의 경우에는 express 가 기본적으로 query api를 제공하지만 , // post방식의 경우에는 기본적으로 body api를 제공하지 않으므로,// body-parser 혹은 multer와 같은 미들웨어가 따로 필요하다.// 따라서 위와같은 미들웨어를 npm으로 설치한 후에 1.require --> 2.use 를 이용하여 사용한다. ==========================================================post.jade doctype htmlhtmlhead meta(charset='utf-8')bodyform(action='/form_receiver' method='pos..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(19) 데이터 전송 (GET 방식)
express(모듈)와 jade(모듈)를 로드하여 get방식으로 데이터를 전송하는 것을 알아보자. views 폴더 밑에 form.jade 파일을 위치시켜 놓았다. ==================================================================// form.jade 파일을 봐주자. doctype htmlhtmlheadmeta(charset='utf-8')bodyform(action='/form_receiver' method='get') // 디폴트값은 get방식이다. pinput(type='text' name='title') // post 방식으로 데이터를 전송하는 경우 Cannot GETp // / form_receiver?.....이 나타난다. textarea(n..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(18) GET vs POST
간단하게 이해해보자. 게시판을 만든다고 가정해보자.Get방식은 정보를 URL에 붙여서 넘기게 되며, Post방식은 Header를 통해 정보를 전송하는 방식이다. 1. 사용자가 서버에 정보를 전달하고 일반적으로 정보를 요청할 경우에는 주로 GET 방식으로 (select) 한다.GET은 Select적인 성향을 가지고 있다. GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이지 서버의 값이나 상태등을 바꾸지 않는다. (게시판의 리스트라던지 글보기 기능 같은 것)정보를 요청하고 서버로부터 정보를 가져오는 곳에 GET을 사용해야 이유: 웹의 주요 목적이라고 할 수 있는 link문제이다. 기본적으로 웹에서 모든 리소스는 link할 수 있는 url을 가지고 있어야하기때문이다. 특정페이지의 주소를 다른 ..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(17) semantic url (의미론적 url) vs 쿼리스트링 방식
일반적으로는 쿼리스트링 방식의 url이 중요하지만 semantic url에 대해서도 알아보자.Non-semantic URLSemantic URLhttp://example.com/index.php?page=namehttp://example.com/namehttp://example.com/index.php?page=consulting/marketinghttp://example.com/consulting/marketinghttp://example.com/products?category=2&pid=25http://example.com/products/2/25http://example.com/cgi-bin/feed.cgi?feed=news&frm=rsshttp://example.com/news.rsshttp://..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(16) express 모듈 사용-⑦ 쿼리스트링 응용
app.js 에 추가한 후 url: 127.0.0.1:3000/topic으로 접근해보자. ============================================================app.js ++ 붙여넣기 app.get('/topic',function(req, res){var topics =['javascript is the client language','nodejs is the server side javascript','express is a module of extra modules'];var output = `Java Script Node js Express ${topics[req.query.id]}`;res.send(output);});======================..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(15) express 모듈 사용-⑥ 쿼리스트링
http://a.com/indexhttp://a.com/loginhttp://a.com/topiclogin이라는 하나의 라우터(path)로 아이디값 즉 쿼리스트링을 다르게 줌으로써 다른 결과를 나타낼 수 있다.http://a.com/login?id=1http://a.com/login?id=2http://a.com/login?id=3 http: 프로토콜 a.com: 도메인 네임/login: pathid=1: query string(쿼리스트링)http://a.com/login : urlhttp://a.com/login?id=1 :uri ===========================================================================app.get('/info',functi..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(14) express 모듈 사용-⑤ 템플릿 엔진: jade의 문법
jade문법 간단하게 알아보자.1. 들여쓰기를 해야한다.2. 줄바꿈을 할 경우 태그로 인식되므로 주의하자.3. 줄바꿈을 하지 않고 띄어쓰기를 하면, 해당 태그의 text값을 의미하게 된다. ex) h1 Hello Jade! >> Hello Jade! 4. 페이지 소스보기를하여 예쁘게 보기위해서는 app.locals.pretty= true;를 app.js에 입력해주자.5. 화면에 출력되지 않는 코드 즉, 함수와 같은 경우에는 -를 붙여야한다.예를 들어 for문을 사용하기 위해서는 -for(var i= 0; i
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(13) express 모듈 사용-④ Intro. 템플릿 엔진
템플릿 엔진의 장점 1. 짧은코드로 장황한 html 코드를 표현할 수 있다. ++ jade 파일에 외부에서 변수를 선언, 정의하고 변수를 주입시켜 사용할 수 있다. 2. express(외부 모듈)의 정적파일 서비스에 대한 장점을 구현해 낼 수 있다. (코드를 변경하더라도 app.js를 다시 실행시킬 필요 없음)3. express(외부 모듈)의 동적 웹페이지에 대한 장점을 구현해 낼 수 있다. 함수를 사용할 수 있으며, for문과 같은 반복문을 사용할 수 있다. ========================================================================temp.jade htmlheadtitle=_title //(14)번 글 참고 http://sourceflower.ti..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.
(12) express 모듈 사용-③ 정적 웹페이지 vs 동적 웹페이지
Express,정적인 파일을 서비스 하는방법app.use(express.static('디렉터리명'));// 정적파일을 서비스 할 디렉터리의 경우 반드시 package.json 파일이 있는(즉, 패키지를 선언한 곳) 위치와 동일한 위치의 디렉토리에 생성해주자. 웹페이지(html)를 표현하는 방법1) 순수 html 코드로!(정적) app.use(express.static('디렉터리명'));사용장점: app.js 에 코드를 작성하지 않으므로 지저분하지 않다.정적인파일 자체를 수정하면 되므로 cmd 창에서 (ctrl+c)껐다가 (node app.js)켤 필요가 없다.단점: 동일한 텍스트를 입력해주고 싶을 경우, 함수등을 지원하지 않기 때문에 일일이 컨c 컨v해야한다.Date()와 같은 함수를 사용할 수 없다.ㅠ..
- JavaScript BackEnd/Node.js, Express
- · 2019. 4. 3.