POST 방식을 이용한 정보의 전달

|

POST 방식을 이용한 정보의 전달

생활코딩 Node.js 강의
post 방식을 통한 정보의 전달 방법에 대해서 살펴보고 express에서 post를 다루는 방법을 배운다.

GET방식-POST방식 소개

GET방식

  • 사용자의 접속(요청)에 따라서 어플리케이션이 응답한 정보를 사용자가 GET 하는 것
  • 기본적으로 웹브라우저에 URL을 입력하여 어떠한 정보를 가져오는 것을 GET 방식이라 한다.
  • 경우에 따라서는 쿼리스트링을 통해서 어떠한 정보를 앱에 요청해서 가져오기도 한다.

    POST

  • 서버에 있는 정보를 가져오는 것 (GET)이 아닌 사용자의 정보를 서버에 전송(POST) 하는 방식
  • ex.사용자의 로그인 정보를 전송하거나, 작성한 글을 서버로 전송하는 것

제출양식(form) 예시

  • jade 방식으로 form을 작성하여 라우터에 적용한다.

템플릿 엔진을 사용하여 form.jade 파일 작성

doctype html
html
  head
    meta(charset='utf-8')
  body
    form(action='/form_receiver' method='get')
      p
        input(type='text' name='title')
      p
        textarea(name='desc')
      p
        input(type='submit')

app.js에 라우터를 작성하여 form.jade와 연결

app.set('view engine', 'jade'); // 템플릿엔진 설정
app.set('views', './views'); // 템플릿엔진 경로 설정
app.get('/form',function(req, res){
	res.render('form'); // 템플릿엔진 라우터 설정
});
app.get('/form_receiver', function(req, res){
	var title = req.query.title; //get방식으로 제출된 form 데이터에 접근
	var desc = req.query.desc;
	res.send(title+', '+desc);
});

POST 방식으로 전송된 데이터의 사용 방법

post 방식으로 전송한 데이터를 애플리케이션은 어떻게 받을 수 있는가?

  • post 방식으로 데이터를 전송하면 app.get이 아닌 app.post 메소드에 콘트롤러를 연결 시켜서 실행 시킬 수 있으며, 추가로 미들웨어가 필요하다.
  • body-parser 미들웨어 : post 방식으로 전송된 데이터를 애플리케이션에서 사용할 수 있도록 도와주는 플러그인(확장기능)

    body-parser 적용방법

  • 설치 npm install body-parser
  • app.js에 해당 모듈 추가 var bodyParser = require('body-parser')
  • app.js에 해당 모듈과 애플리케이션 연결
    app.use(bodyParser.urlencoded({ extended: false }))
  • 사용자에게 받은 모든 요청들은 bodyParser가 제일 먼저 실행되고, 사용자가 post 방식으로 전송한 데이터가 있다면, req 객체가 원래 갖고 있지 않았던 body라는 객체를 bodyParser가 추가한다. 그리고 사용자가 전송한 데이터의 이름이 title 이라면 body객체의 title 속성에 그 값을 넣는다. ```javascript var express = require(‘express’); var app = express() var bodyParser = require(‘body-parser’) app.use(bodyParser.urlencoded({ extended: false }))

app.post(‘/form_receiver’, function(req, res) { // bodyParser 미들웨어를 통해 req에 body 객체추가 var t = req.body.title; var d = req.body.desc; res.send(t+’,’+d); }); ```

GET과 POST의 차이

  • GET 방식으로 정보를 전송하면 정보가 URL에 표시되어 보안의 문제가 있다.
    (하지만 GET, POST 모두 보안에 불완전한 기술이다)
  • GET 방식은 URL 길이 제한의 문제가 있다.

Nodejs 자동 재시작 패키지 - supervisor

|

Nodejs를 자동으로 재시작 - supervisor

생활코딩 Node.js 강의
소스코드가 변경되었을 때 에플리케이션을 자동으로 재시작하는 방법을 알아본다.

Supervisor

  • nodejs 에서는 파일 수정시 터미널에서 cmd+c(ctrl+c)를 눌러 종료하고
    node 파일명(app.js)을 입력하여 node를 다시 켜야하는 불편함이 있다.
  • 이를 해결하기 위해서 supervisor 패키지를 사용할 수 있다.

설치

  • 터미널에서 npm install supervisor -g 입력

사용

  • 터미널에서 supervisor 파일명(app.js) 입력하면 이후 app.js의 수정사항이 자동으로 반영된다. (node 파일명(app.js) 의 입력을 대신한다.)

javascript 객체지향프로그래밍 02 - 모듈화, 프로토타입

|

javascript 객체지향프로그래밍02 - 모듈화, 프로토타입

윤지수님의 웹 프론트엔드 강의
프로토타입 기반의 객체지향적인 설계방법에 대해서 알아본다

프로토타입 기반의 객체지향적인 설계방법

  • 프로토타입 기반의 객체지향적인 설계방법은 자바스크립트의 일반적인 패턴으로 보기 어려울 수 있으나, 알게되면 자주 쓰게되는 패턴이다.
  • 예를 들어 아래와 같이 객체가 필요할 때마다 매번 객체를 만드는 일은 번거로운 일이다.
var oName = {
	name : 'jisu',
	getName : function(){
		return this.name;
	}
}

var oName2 = {
	name : 'siwa',
	getName : function(){
		return this.name;
	}
}
  • 그럼 객체를 반환하는 함수를 만들 수도 있다.
function Name(_name){
    var oName = {
        name : _name,
        getName : function(){
            return this.name;
        }
    }

    return oName;
}

Name('siwa'); // Object{name: 'siwa', getName:function()} 리턴
var o = Name('siwa');
o.getName(); // 'siwa' 리턴

객체 생성자 함수와 new 키워드

  • 위와 같은 방법 말고 객체를 생성해주는 표준적인 방법이 존재한다.
 function Name(_name){
		console.log('this is',this);
		this.name = _name;
		this. getName = function(){
        return this.name;
    }
}

// 함수를 그냥 호출했을때
Name('monkey'); // this is window, undefined 리턴

// new 키워드와 함께 함수를 호출했을 때
new Name('monkey'); // this is Name{}, Name{name:'monkey', getName()} 리턴
var o = new Name('monkey');
o.getName(); // 'monkey'
  • new라는 키워드와 함께 함수를 호출하면,
    그 함수는 this에 새로운 오브젝트를 만들어서 this 안에 속성들을 담은 상태로 반환한다.
    (new 키워드와 함께 불려지는 함수는 생성자 함수이고 생성자 함수는 대문자로 시작한다.)
// new 키워드를 붙여서 함수를 호출했을때 함수 내부에서 발생하는 일
function Name(name){
	(var this = {};) // => 함수 앞에 new를 붙였을때 내부적으로 추가되는 코드
	this.name = name;
	this.getName = function(){
		return this.name;
	}
	(return this;) // => 함수 앞에 new를 붙였을때 내부적으로 추가되는 코드
}

new Name('siwa'); // {오브젝트} 리턴
  • 이는 객체지향적인 언어를 표방하는 기능, 클래스를 만드는 것과 비슷하다.
    (new라는 키워드는 자바에서 클래스를 호출해서 인스턴스를 만드는 것과 비슷하다)

객체 생성자 함수의 활용 - 모듈화

  • 기능별로 모듈화 시킨 독립적인 클래스 단위로 그루핑할때 생성자 함수를 활용할 수 있다.
  • 예를 들어 구글지도 UI를 만들 때, 화면에 보이는 기능 단위 즉 의미적으로 다른 기능이라면 (ex. 사진, 공유, 검색, 지도화면, 설정) 각각의 기능을 별도 모듈(클래스 단위)로 만들 수 있다.
  • 모듈화 패키징 설계 예시
// 모듈화 수도코드 예시
// 지도를 표현하는 영역 클래스
function Map(){}
// 지도를 검색하는 영역 클래스
function SearchMenu(){}
// 사진을 슬라이드 하는 영역 클래스
function ViewCurrentPhotos(){}

var oMap = new Map({});
oMap.setDraw();
var oSearchMenu = new SearchMenu({width: '200px'});
// 여러가지를 인자로 줘서 인스턴스를 만들고 (oMap, oSearchMenu)
oSearchMenu.clearText();
oSearchMenu.autocomplete();

객체 생성자 함수의 활용 - 프로토타입

function Map(){
	this.drawMap = function(){}
}

// 인스턴스 생성
var oMap = new Map();
var oMap2 = new Map();
var oMap3 = new Map();
// 상기의 3개 인스턴스는 각각의 메모리 공간에 동일한 오브젝트를 갖고 있다. => 비효율적
// 이를 해결하기 위해 프로토타입을 활용할 수 있다. => this.drawMap과 메모리공간을 공유
  • 모든 함수에는 프로토타입이라는 오브젝트가 존재한다.
  • 생성자에 프로토타입을 연결하여 생성자 함수를 통해서 만들어진 함수들이 프로토타입의 함수를 공유할 수 있다.
  • 모든 브라우저에서 지원한다.
prototype의 동작방식
  • 프로토타입 예시
// 프로토타입 예시
function Map(_name){
	this.name = _name; // 인스턴스마다 다르게 가져야 할 속성
}

Map.prototype.setDraw = function(){
	console.log('drawing!');
}

// 인스턴스 생성
var oMap = new Map();
debugger // debugger를 걸어서 개발자도구에서 디버깅 가능
var oMap2 = new Map();
var oMap3 = new Map();

oMap.setDraw(); // drawing!
oMap.__proto__.setDraw(); // drawing! => 내부에서 쓰는거라 이렇게 쓰면 안됨
인스턴스(oMap)이 생성자함수의 prototype 객체의 속성을 상속받은 모습

170219_TIL

|

오늘 한 일

  • simple to-do list 모바일에서 정상적으로 보일 수 있도록 수정했다. 로그인을 팝업창이 아닌 리다이렉트로 수정했다. 하지만 여전히 로딩 시간이 오래 걸린다. 개발자도구 network 탭을 보니 인증이 오래 걸리는거 같은데 뭐가 원인일까?
  • 블로그 모바일에서 정상적으로 보일 수 있도록 수정했다. 뿌듯하다. 적지만 말고 다시 읽어야지.
  • 생활코딩 nodejs 강의를 들었다. query string, semantic url, post 전달방식에 대해서 배웠다. 어려워서 그런지 시간이 좀 오래 걸린 것 같다.
  • 윤지수님 JS OOP 강의는 조금 밖에 듣지 못했다. 내용 정리는 내일 다시 듣고 해야겠다.

내일 할 일

  • 알고리즘 문제 꼭 풀자! 즐거움을 위해서
  • 내일 드디어 nodejs 웹 애플리케이션 제작 수업을 듣는다.

Express-URL을 이용한 정보의 전달 - 쿼리스트링

|

Express-URL을 이용한 정보의 전달

생활코딩 Node.js 강의
URL을 통해서 에플리케이션에 정보를 전달하는 방법에 대해서 알아본다.

쿼리 스트링 소개

  • path : http://a.com/login 에서 /login 부분
  • 하나의 path(라우터) 에서 경우에 따라 다른 결과를 보여주기 위해서는 쿼리스트링이 사용된다.
  • 쿼리스트링은 어떤 애플리케이션에게 정보를 전달할 때 사용되는 URL에 약속되어 있는 국제적인 표준
URL의 구성요소

Express의 query 객체의 사용

동적인 파일을 통해서 (app.js 에 직접 작성) 쿼리스트링 사용에 대해 살펴본다.

  • url 내의 쿼리스트링을 가져오려면 req.query 를 사용해야한다.
  • express api reference req.query 참고
  • 복수의 쿼리스트링을 가져오는 것도 가능하다.
    app.get('/topic', function(req, res) {
      // url이 http://a.com/topic?id=1&name=siwa 일때
      res.send(req.query.id+','+req.query.name); // 1,siwa 출력
    })
    

query 객체의 활용

app.get('/topic', function(req, res){
	var topic = [
		'javascript is...',
		'nodejs is...',
		'express is...'
	];
	var li = `
	<li><a href="/topic?id=0">js</a></li>
	<li><a href="/topic?id=1">nodejs</a></li>
	<li><a href="/topic?id=2">express</a></li>
	`
  // 선택한 링크에 따라서 다른 정보를 출력하는 동적인 애플리케이션의 기본골격
	res.send(li + '<br>' + topic[req.query.id]);
})

의미론적인 URL (semantic url)

  • 비전문가(사용자)에게 친숙한, (의미를 표현하는) 구조적인 URL 참고글 링크
일반 URL 시맨틱 URL
board.php?id=notice&mode=list&page=1 board/notice/list/1
board.php?id=notice&mode=view&entry=10 board/notice/10

Semantic URL의 장점

  • 깔끔한 URL을 유지할 수 있다.
  • 사용자가 URL을 기억하기 쉽다
  • 주요정보를 변수로 처리하지 않고 디렉토리 인 것처럼 다루므로 SEO 에도 도움이 된다.

쿼리스트링이 아닌 path 방식의 URL의 사용

app.get('/topic/:id/:mode', function(req, res){
// 라우터 경로의 변경 /:id/:mode 를 통해 path 방식 url 값을 가져올 수 있다.
	var topic = [
		'javascript is...',
		'nodejs is...',
		'express is...'
	];
	var li = `
	<li><a href="/topic/0">js</a></li>
	<li><a href="/topic/1">nodejs</a></li>
	<li><a href="/topic/2">express</a></li>
	`
	res.send(li + '<br>' + topic[req.params.id] + req.params.mode);
	//path 방식을 사용하는 url의 경우 params를 통해서 값을 가져올 수 있음
})
  • Restful api 등을 통해서 시맨틱 URL을 잘 사용하는 방법에 대해서 익힐 수 있다.