[12주차/13주차]웹 서버 구축 / AJAX

웹프로그래밍 2022. 6. 6. 18:17

<학습내용>

-Express모듈

-AJAX

1. Express모듈

1) http모듈을 기반으로 웹 서버의 동작을 쉽게 구현할 수 있도록 작성

2) express에서제공하는 미들웨어와 라우터를 사용하여 훨씬 간단하고 쉽게 웹서버 구축가능

(1) 미들웨어 : 서버가 수행해야 할 동작 함수

->익스프레스에서 웹 요청과 응답에 필요한 처리를 진행할 수 있도록 분리된 독립된 함수

->인자 3개 : req(사용자 요청request),res(응답 response),next(다음 동작을 정의하는 콜백함수)

->use()메소드로 서버의 동작함수를 등록

(2) 라우터 : 클라이언트의 요청 패스를 보고 이를 처리할 수 있는 곳으로 기능을 전달해 주는 역할

-사용자가 어떠한 path로 입력을 하면 그에대한 동작을 시행할 때는 get(), 공통적인 서버의 동작은 use()

var express = require("express");
//익스프레스 객체 생성
var app= express();
//기본 포트를 app객체에 속성으로 설정
app.set("port",proccess.env.PORT||8080);
//Express 서버 시작
http.createServer(app).listen(app.get("port"),function(){
	console.log("익스프레스 서버를 시작했습니다:"+app.get("port"));
});

<express모듈을 이용하여 웹서버 구축하기>

require함수를 이용해 express모듈을 불러와 var express에 저장

익스프레스 객체 생성 후 기본 포트를 app객체에 속성으로 설정 (포트 번호는 임의로 8080)

설정된 환경을 바탕으로 내장 모듈 http를 불러와 서버를 만들고 지정한 포트를 listen -> 다음은 콜백함수! 포트 번호로 들어오는 request를 리스닝 하고있다는 뜻

메소드 이름	설명
set(name,value)	서버 설정을 위한 속성을 지정한다.
get(name)	서버 설정을 위해 지정한 속성을 읽어들인다.
use([path],function[, function...])	미들웨어 함수를 사용함(어떤주소로 주어진 쿼리에 대해 function에 정의된 동작을 수행하겠다(이미 존재하는 외부 함수(미들웨어)라면 이름을 명시))
get([path,] function)	특정 패스(어떤 주소)로 들어온, 사용자로부터 요청된 정보를 처리함

3) 포트 설정

(1) app.set("port",process.env.PORT||3000);

set()으로 설정, get으로 조회ex)app.get("port")

4) 사용자 요청 처리-라우터(사용자 요청에 따른 처리가 필요할때는 use()말고 get())

app.get("미들웨어 함수가 적용되는 경로(라우트)", function(req,res,next){ next(); });

(1) 루트패스에 대한 요청처리

app.get("/",function(req,res){
res.send("Hello World");
});

(2) 미들웨어를 통한 요청처리

//함수의 정의
var myLogger = function(req,res,next){
console.log("LOGGED");
next();	//app.use다음 정의된 미들웨어를 가리킴 여기서는 app.get가리킴
};
//함수 호출
app.use(myLogger);

app.get("/",function(req,res){
	res.send("Hello World");	//다음의 문자를 사용자에게 보내라
);

사용자가 local host라는 루트주소로 웹서버에 접근하면 콘솔에 logged 띄우고 사용자 브라우저에 helloworld출력됨

app.get("localhost:8080/source/jquery.html",function(){};);이라면 루트패스에 대한 요청이 아니기때문에 응답처리 안됨

2.익스프레스의 요청 객체 및 응답 객체

메소드 이름	설명
send([body])	클라이언트에 응답 데이터를 전송한다 html문자열, buffer객체, json객체or배열 데이터 전송 가능
status(code)	http상태 코드를 반환함. 상태코드는 end()나 send()같은 전송 메소드를 추가로 호출해야 전송가능하다. ex)성공한경우 200번대 코드 반환, 오류는 종류에 따라
sendStatus(statusCode)	http상태코드를 반환함. 상태코드는 상태메시지와 함께 전송됨
redirect([status,]path)	웹 페이지 경로를 강제로 이동시킴 ex)로그인 없이 다른곳 접근하려할 때 강제로 로그인 페이지 보여주는 경우
render(view [, locals][, callback]	뷰 엔진을 사용해 문서를 만든 후 전송함

1) redirect()메소드

다른 페이지로 이동

app.use(function(req,res,next){
	console.log('첫번째 미들웨어에서 요청을 처리함.');
    res.redirect('http://google.co.kr');
});

현재 jquery.html은 c:\web\source안에 있음. 사용자가 이 페이지를 호출하려면

http://localhost:8080/sorce/jquery.html다 쳐야하는데 사용자가 http://localhost:8080/까지만 입력해도 똑같은 화면을 호출하도록 redirect를 사용할 수 있음 -> 어떻게 하면 될까?

2) 라우터를 사용한 요청 라우팅

(1)사용자 요청path(url주소)에 따른 미들웨어 등록 기능

var router = express.Router();
router.route('/process/login').post(function(req, res){...});
app.use('/',router);

(1)익스프레스의 라우터 객체 생성

(2)router에 route함수를 이용해 사용자의 요청이 '/process/login'이러할 때 다음의 함수가 실행이 되도록

+router에 route함수를 이용해 router.route('/source/').get(function(){})으로 해서 사용자 요청 path마다 동작해야할 함수 추가추가추가하면 웹서버가 path에 따라 선택적으로 작동

(3) app.use('/',router)로 등록

3) 라우터 객체 주요 메소드

메소드 이름	설명
get(callback)	get방식으로 특정 패스 요청이 발생했을 때 사용할 콜백함수 지정
post(callback)	post방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수 지정
put(callback)	put방식으로 ~
delete(callback)	delete방식으로~
all(callback)	모든 요청 방식으로~

3.AJAX

1) 웹서버와 데이터를 교환하는 기술

(1) 비동기적 웹페이지 갱신

- 전체 페이지를 다시 적재하지않고 웹페이지의 일부만 갱신(.html형식의 파일 단위 갱신이 아닌 XML단위로 갱신)

(2)XMLHttpRequest

- 사용자 웹페이지에서 js를 이용해 ajax를 구현하고 싶으면 XMLHttpRequest라는 객체를 통해 구현 가능

- 웹페이지 상태정보를 xml데이터로 구성하여 웹 서버에 송신

- 웹 서버로부터 응답 xml메시지 수신

2) 웹서버에 있는 txt파일 데이터 가져오기(AJAX with jQuery)

(1) 예제1. 버튼 클릭 시 testfile.txt에 있는 내용 글상자에 출력

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

function getFromServer(){

var req;

if(window.XMLHttpRequest){

req=new XMLHttpRequest(); //클라이언트가 요청을해서 서버의 응답을 받는 객체

}

else{

req=new ActiveXObject("Microsoft.XMLHTTP");

}

//이벤트에 대한 핸들러

req.onreadystatechange = function(){

if(req.readyState==4 && req.status==200){ //요청에 대한 처리상태가 4 && status값이 200이면 ok라는 뜻. 서버가 응답을 할 때 요청받기, 요청처리중, 응답 보내기 등등 응답상태가 5가지

document.getElementById("target").innerHTML = req.responseText;

}

req.open("GET","testfile1.txt",true); //전송방식을 get방식으로, textfile1.txt를 요청, 비동기식 true

req.send(); //전송 (send가 되면 서버가 전송에 대한 처리를 하면서 응답을 제공, 응답에 따라 이벤트가 발생, 이벤트가 수행되면 처리 상태가 4이고 status가 200일때 서버에 innerHTML동작 수행)

}

</script>

</html>

3) AJAX with jQery

(1) 데이터 불러오는 법

-$.get사용 (post도 이와같이 사용) 예제

->서버에 http get방식으로 전송한 후, 서버측의 응답을 받을 때 사용

<script>
$(document).ready(function()
	$("button").click(function(){
    	$.get("testfile1.txt",function(data,status){	//요청이 끝난 다음 수행되는 콜백함수(data:응답메시지 status:상태값)
        	$("#target").text(data);
        });
    });
});
</script>

-load사용 예제

<script>
$(document).ready(function()
	$("button").click(function(){
    	
        $("#target").load("textfile1.txt");	//testfile1을 불러와서 #target에 집어넣겠다
        
    });
});
</script>

<script>
$(document).ready(function()
	$("button").click(function(){
    	
        $("#target").load("sample.html #myPara");	//sample.html에서 id=myPara인 요소의 컨텐츠만 로딩
    });
});
</script>

(2) jQuery methods for Ajax

(3) $.ajax사용법

4. XML vs JSON

5. 문자열 데이터를 json데이터로 바꾸는 메소드

1) JSON.parse(string)

-문자열을 객체로

-서버가 보내는 데이터가 json으로 보내는 데이터면 클라이언트(웹페이지)에게 js코드가 그 데이터를 받아서 출력해줘야함

ex) JSON.parse(

string) : json형식 "{ "private": "true" .... }" 문자열을 js코드로 바꿀때

2) JSON.stringify(object)

-객체를 문자열로 바꿔서 서버에

-클라이언트가 서버로 데이터를 보낼 때 이 데이터는 자바스크립트가 생성한 데이터인데 이를 자바스크립트 오브젝트 형태(json)로 변환해 주는 함수

-클라이언트에서 서버에 보내는 데이터가 문자열 형태가 아니라(파일에 저장하는 형태가 아님) 단순한 json객체상태로 저장하는 경우라면 json.stringify 필요없음

'웹프로그래밍' 카테고리의 다른 글

[jquery.html] (0)	2022.06.11
[웹프로그래밍] 10주차 캔버스/jQuery (0)	2022.06.06
[웹프로그래밍] 9주차 Dom/이벤트처리 및 유효성 검사 (0)	2022.05.05
[웹프로그래밍] 7주차 JS이벤트 처리 (0)	2022.04.16
[웹프로그래밍] 5주차-6주차 javascript 문법 (0)	2022.04.09

ABOUT ME

Look at me Look at me

<학습내용>

'웹프로그래밍' 카테고리의 다른 글

티스토리툴바

ABOUT ME

<학습내용>

'웹프로그래밍' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바