1) node를 설치한 뒤, 어플리케이션을 보관할 디렉토리 설정 후, 그 디렉토리를 작업디렉토리로 설정. 2) npm init 명령을 이용해 어플에 대한 package.json파일을 작성. npm init
3) 이 명령을 실행하면 애플리케이션의 이름 및 버전과 같은 몇 가지 정보에 대해 프롬프트한다. 지금은 다음의 항목을 제외한 대부분의 항목에서 ENTER 키를 눌러 기본값을 수락할 수 있다. entry point: (index.js)
4) 기본파일의 이름을 app.js로 입력하거나 자유롭게 입력. 기본파일의 이름을 index.js로 입력하기 원하는 경우에는 ENTER기를 눌러 제안된 기본 파일이름을 수락한다.
이제 app 디렉토리에 Express를 설치한 후 종속 항목 목록에 저장한다. npm install express --save
5) Express를 임시로 설치하고 종속 항목 목록에 추가하지 않으려면 다음과 같이 –save옵션을 생략한다. npm install express
--save 옵션을 통해 설치된 Node 모듈은 package.json 파일 내의 dependencies 목록에 추가됩니다. 이후 app 디렉토리에서 npm install을 실행하면 종속 항목 목록 내의 모듈이 자동으로 설치됩니다.
GET은 주소줄에 값이 ?뒤에 쌍으로 이어붙고 POST는 숨겨져서(body안에) 보내진다.
GET은 URL에 이어붙기 때문에 길이제한이 있어서 많은양의 데이터는 보내기 어렵고 POST는 많은 양의 보내기에도 적합하다.(역시 용량제한은 있지만)
즉 http://url/bbslist.html?id=5&pagenum=2 같이 하는 것이 GET방식이고 form을 이용해서 submit을 하는 형태가 POST입니다.
언제 GET을 쓰고 언제 POST를 써야 하는가
원래의 목적에 맞게 기술을 사용하고 있는가?에 대한 고민 필요.
클라이언트에서 서버로 데이터를 전송하려면 GET 아니면 POST밖에 없습니다.(사실 HTTP에는 PUT, DELETE등등 몇가지 더 있다..)
GET은 가져오는 것이고 POST는 수행하는 것입니다.
GET
GET은 Select적인 성향을 가지고 있습니다.
GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이지 서버의 값이나 상태등을 바꾸지 않습니다. 게시판의 리스트라던지 글보기 기능 같은 것이 이에 해당하죠.(방문자의 로그를 남긴다거나 글읽은 횟수를 올려준다거나 하는건 예외입니다.)
GET을 사용해야 하는 이유 : Link문제. 기본적으로 웹에서 모든 리소스는 Link할 수 있는 URL을 가지고 있어야 합니다.(퍼머링크(permalink)1퍼머링크라면 더 좋겠지만 꼭 퍼머링크가 아니라고 하더라도) 그래야 Link를 할 수 있으니까요. 쉽게 말하면 어떤 페이지를 보고 있을때 다른 사람한테 그 주소를 주기 위해서 주소창의 URL을 복사해서 줄 수 있어야 한다는 것입니다. POST를 할 결우에는 값이 내부적으로 전달되기 때문에 URL만 전달할 수 없죠. 글을 저장하는 경우에는 URL을 제공할 필요가 없기 때문에 POST를 해도 상관이 없는 것이고요.
POST
POST는 서버의 값이나 상태를 바꾸기 위해서 사용합니다.
글쓰기를 하면 글의 내용이 디비에 저장이 되고 수정을 하면 디비값이 수정이 되죠. 이럴 경우에 POST를 사용.
Node Express 프로젝트 POST 처리
POST
HTTP 메서드. url에 담겨있는게 아님. 서버에 있는 data를 처리할 시 사용한다.
GET은 중요한 정보가 노출될 위험이 있다.
post요청인 경우 ‘req.param(‘email’)’와 같은 형태로 받을 수 없음.
body parser라는 별도의 모듈이 필요함! npm install body-parser --save (–save 를 써서 package.json에 설치하기.)
1) app.js에 모듈 export var bodyParser = require('body-parser');
2) express서버에 바디 파서를 사용한다는걸(use) 알려줘야함.
아래 명령은 그냥 외운다고 생각하기.
askii형태 데이터만 주고 받는데, 한글같은건 다른 문자로 치환해야함. 이걸 인코딩해서 처리하는걸 이렇게 표기함. ==> app.use(bodyParser.urlencoded({extend:true}))
클라이언트도 브레이스 해서 보낼 수 있는데 json으로., 이렇게 표기해서 처리하겠다. ==> app.use(bodyParser.json())
페이지 일부분을 업데이트 하기 위한 정보를 서버에 요청할 수 있다.
서버로부터 받은 데이터로 작업을 한다.
Ajax는 ‘Asynchronous JavaScript + XML’을 줄인말로써, “서버 처리를 기다리지 않고 비동기(Asynchronous)요청이 가능하다”란 의미.
AJAX란 비동기 JavaScript와 XML을 말한다. 간단히 말하면, 서버측 Scripts와 통신하기 위한 XMLHttpRequest객체를 사용하는 것을 말한다.
서버측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식 등)의 정보를 주고 받을 수 있다.
AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 “비동기성”. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.
Ajax 장점, 단점
장점
페이지 이동없이 고속으로 화면 전환
서버처리를 기다리지 않고, 비동기 요청이 가능
수신하는 데이터의 양을 줄일 수 있고, 클라에 처리를 위임 가능
단점
Ajax를 쓸 수 없는 브라우저에 대한 문제
http클라이언트의 기능 한정
페이지 이동없는 통신으로 인한 보안상의 문제
지원하는 charset의 한정
스크립트로 작성되므로 디버깅이 용이하지 않다
요청을 남발하면 역으로 서버 부하가 늘어날 수 있음
동기/비동기 통신 매커니즘
Node Ajax처리(Javascript)
클라이언트 폼을 json으로 만들어서 send로 서버로 보냄
app.js서버에서는 포스트로 받아서 /url를 라우팅 한 뒤, 콘솔찍고, 다시 결과값을 포함해서 email에 결과적으로 잘되었는지 ok해서 보낸다.
form.html에서 만약 result가 ok이면 return else처리
form.html
var xhr = new XMLHttpRequest(); 이후에 세미콜론 표기 주의! 빼먹지 말기. 빼먹으면 response가 제대로 안됨..
//입력값 전송document.querySelector(".ajaxSend").addEventListener('click',function(){varinputdata=docoment.form[0].elements[0].value;sendAjax('http://127.0.0.1:3004/ajax_send_email',inputdata);})//데이터 송수신 처리functionsendAjax(url,data){//데이터 문자열 처리vardata={'email':data};data=JSON.stringify(data);//데이터 송신, Context-Type 설정varxhr=newXMLHttpRequest();xhr.open('POST',url);xhr.setRequestHeader('Context-Type',"application/json");xhr.send(data);//데이터 수신addEventListener('load',function(){//받을 결과를 json object로 변환varresult=JSON.parse(xhr.responseText);//받은 결과에 따라 분기처리if(result.result!=='ok'){return;}else{document.querySelector(".result").innerHTML=result.email;}})}
app.js (서버단 처리!)
app.post('/ajax_send_email',function(req,res){console.log(req.body.email);//check validation about input value ==> select dbvarresponseData={'result':'ok','email':req.body.email};res.json(responseData);//json})
express.json
JSON 페이로드로 들어오는 요청을 구문 분석하고 body-parser를 기반으로합니다.
JSON 만 구문 분석하고 Content-Type 헤더가 type 옵션과 일치하는 요청 만 조사하는 미들웨어를 반환. 이 파서는 본문에 대한 유니 코드 인코딩을 허용하고 gzip 및 압축 인코딩의 자동 팽창을 지원.
구문 분석 할 본문이 없거나, Content-Type이 일치하지 않거나, 구문 분석 할 본문이 없으면 구문 분석 된 데이터를 포함하는 새 본문 개체가 미들웨어 (예 : req.body) 다음에 요청 개체 또는 빈 개체 ({}) 오류가 발생한다.
javascript ajax method
요청전
querySelector : .ajaxsend 라는 클래스를 사용하는 문서의 첫번째 element를 반환(element는 element object)
document.querySelector('.ajaxsend')
addEventListener : javascript에서 이벤트를 붙이는 방법. on + event형식에 비해 여러 이벤트를 등록할 수 있고, 특정 이벤트를 제거할 수 있다.
XMLHttpRequest : ajax 요청을 하는 자바스크립트 API. 이 메서드는 서버와 브라우저간의 네트워크 요청을 보낸다((XHR) is a JavaScript API to create AJAX requests. Its methods provide the ability to send network requests between the browser and a server.)
setRequestHeader : 만약 “POST” type을 보내려 한다면, 요청(request)에 MIME type을 설정 해야 합니다. 예를 들자면 send()를 호출 하기 전에 아래와 같은 형태로 send()로 보낼 쿼리를 이용해야 합니다. http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
요청후
ajax 로 착신 데이터 처리할시(server-side systems 처리 이후), responseText 또는 responseXML 로 처리(데이터를 텍스트 또는 DOMDocument로 수신)
XMLHttpRequest 오브젝트를 생성하여 HTTP 요청을 준비한 후, 서버에 접속하여 데이터 및 요청을 보내고, responseText 또는 responseXML 프로퍼티로 수신한다.
