23.04.25 화 32일차
jQuery
* ajax
글을 사용하는 동안 화면의 이동이 거의 없는 것이 특징( EX 페이스북)
* nodejs
: 버전 업 하지 않고 진행 ( 오류발생이 빈번함)
: 플랫폼
: 언어 : 자바 스크립트
: 서버를 구현할 때 사용, ASP, JSP, PHP의 역할을
자바스크립트를 이용하여 사용하겠다는 것이다.
- 실행 방법
nodejs.org 링크에서 다운로드
폴더 생성 후 비주얼 코드에서 폴더 불러와 사용
node 파일명 입력시 작성한 JS 파일 출력값 확인 가능
- 함수 확인
nodejs.org/api/os.html 내부모듈 ( os 함수)
업데이트되며 변경되는 OS 함수 명 확인 가능- nodejs
- 기본예제 1 *값 출력
var output='';
for(var i=0; i< 10; i++){
console.log(output += '*');
}
============================================
- 기본예제 2 함수값 확인
var os = require('os');
console.log(os.hostname());
console.log(os.type());
console.log(os.cpus());
console.log(os.networkInterfaces());
============================================
-기본예제 3 http 서버 활성화 및 출력
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res)=>{
res.statusCode = 200;
res.setHeader('Content-Type','text/plain');
res.end('Hello World!\n');
});
server.listen(port, hostname,()=>{
console.log(`Server running at http://${hostname}:${port}/`);
})
============================================
- 기본예제 4 동기, 비동기
동기통신 (순차적)
A --> B
B-- > C
// 동기 방식
// readme.txt 파일 값 출력 선처리 후 파일읽기 출력
var fs = require('fs');
var content = fs.readFileSync("readme.txt", "utf-8");
console.log(content);
console.log('파일 읽기 ...');
비동기 통신 (비 순차적)
:백그라운드에서 진행되는 방식
A -- > ?
B -- > C
// 비동기 방식
// 파일읽기 선처리 후 readme.txt 파일 값 출력
var fs = require('fs');
fs.readFile("readme.txt", "utf-8", function(err, content){;
console.log(content);
});
console.log('파일 읽기 ...');- nodejs 외부모듈
- 외부모듈
npm install request ( 외부모듈 설치하기 )
npm install express@3.4.7 (외부모듈 사용 (웹 서버 만들때 사용 모듈))
// 외부 모듈
// 기본 서버 형식
// 모듈 추출
var http = require('http');
var express = require('express');
// 웹 서버 생성
var app = express();
// 미들웨어 생성
app.use(function (request, response, next){
console.log('first');
next();
});
app.use(function (request, response, next){
console.log('second');
next();
});
app.use(function (request, response){
response.send('<h1> Hello Middleware ... !!! </h1>');
});
//웹 서버 실행
http.createServer(app).listen(52273, function(){
// 한글 입련 안될 시 UTF-8 로 진입
console.log("Server Running at http://127.0.0.1:52273", "utf-8");
});
request는 값을 받아오고, response 는 값을 보내는 것
next 미들웨어 함수로 다음값으로 이동하여 출력한다.
서버 실행시 콘솔 로그는 문구는 2회 발생
- 미들웨어
과거의 나 또는 다른 사람이 미리 만들어둔 기능을 현재서버에 적용할 때 사용
미들웨어 Request, response 객체 사용
// 외부 모듈
// 기본 서버 형식
// 모듈 추출
var http = require('http');
var express = require('express');
// 웹 서버 생성
var app = express();
// 미들웨어 생성
app.use(function (request, response, next){
// 콘솔 로그 문구설정
console.log('SERVER LOG ~');
// 변수 선언
A='A값';
B='B값';
C='C값';
//리퀘스트 리스폰 객체에 Test 속성 추가
request.test='first_request';
response.test='second_response';
next();
});
// 리퀘스트 리스폰 객체 값을 출력
app.use(function (request, response){
response.send('<h1>' + A + ' : ' + B + ' : ' + C + ' : ' +
request.test + ' : ' + response.test + '</h1>');
});
//웹 서버 실행
http.createServer(app).listen(52273, function(){
// 한글 입력 안될 시 UTF-8 로 진입
console.log("Server Running at http://127.0.0.1:52273", "utf-8");
});request, response .test 변수에 값을 넣어준 그대로 출력이 가능하다.
라우트 사용
: 사용자의 요청에 따라 사용자가 필요한 정보를 제공하는 것을
라우트라고 한다.(route)
// 모듈 추출
var http = require('http');
var express = require('express');
var app = express();
app.use(app.router);
// 미들웨어 생성
app.use(express.static('public_html'))
// 사용자가 요청한 정보를 제공하는것을 router 라고 한다.
app. all('/a', function(request, res){
response.send('<h1> Page A </h1>')
});
app.all('/b', function(request, response){
response.send('<h1> Page B </h1>')
});
app.all('/c', function(request, response){
response.send('<h1> Page C </h1>')
});
//웹 서버 실행
http.createServer(app).listen(52273, function(){
// 한글 입력 안될 시 UTF-8 로 진입
console.log('Server Running at http://127.0.0.1:52273');
});
각 주소별 페이지를 띄워준다.
127.0.0.1:52273/a > PAge A
127.0.0.1:52273/b > PAge B
127.0.0.1:52273/c > PAge C
var 변수 선언 코드
// 모듈 추출
var http = require('http');
var express = require('express');
//웹 서버 생성
var app = express();
// 미들웨어 생성
// 사용자가 요청한 정보를 제공하는것을 router 라고 한다.
app.use(app.router);
app.use(express.static('public_html'))
// var 변수선언
var items=[
{name:'우유', price:'2000'},
{name:'커피', price:'3000'}
]; // 변수 items 구성
app.all('/data.html', function(request, response){
var output ='';
items.forEach(function(item){
output += item.name + '::' + item.price + "<br>";
})
response.send(output);
});
app.use(function (request, response){
response.send('<h1> Hello Middleware ... !! <h1>');
});
// 서버 동작
http.createServer(app).listen(52273, function() {
console.log('Server Running at http://127.0.0.1:52273');
127.0.0.1:52273/data.html 진입 시
변수로 item 변수선언하여 부여한 값을 확인 할수 있다.
json 사용
key 값을 가진 형태를 json이라고 한다
// 변수 선언
// 모듈 추출
var http = require('http');
var express = require('express');
//웹 서버 생성
var app = express();
// 미들웨어 생성
// 사용자가 요청한 정보를 제공하는것을 router 라고 한다.
app.use(app.router);
app.use(express.static('public_html'))
var items=[
{name:'우유', price:'2000'},
{name:'커피', price:'3000'}
]; // 변수 items 구성
// json 사용
app.all('/data.json', function(request, response){
response.send(item);
});
app.all('/data.html', function(request, response){
var output ='';
items.forEach(function(item){
output += item.name + '::' + item.price + "<br>";
})
response.send(output);
});
app.use(function (request, response){
response.send('<h1> Hello Middleware ... !! <h1>');
});
// 서버 동작
http.createServer(app).listen(52273, function() {
console.log('Server Running at http://127.0.0.1:52273');
});
data.html 과 같이 json을 사용하여도 같은 값을 받아오는 걸 확인할 수 있다.
SML 응답
// 모듈 추출
var http = require('http');
var express = require('express');
//웹 서버 생성
var app = express();
// 미들웨어 생성
// 사용자가 요청한 정보를 제공하는것을 router 라고 한다.
app.use(app.router);
app.use(express.static('public_html'))
// 변수 선언
var items = [
{name:'우유', price:'2000'},
{name:'커피', price:'3000'},
{name:'콜라', price:'2500'}
]; // 변수 items 구성
app.all('/data.xml', function(request, response){
var output = '';
output += '<?xml version="1.0" encoding="UTF-8"?>';
output += '<products>'
items.forEach(function(item){
output += '<products>'
output += '<name>' + item.name + '</name>'
output += '<price>' + item.price + '</price>'
output += '</products>';
})
output += "</products>";
// XML에서는 type 추가
response.type('text/xml');
response.send(output);
});
app.all('/data.html', function(request, response){
var output ='';
items.forEach(function(item){
output += item.name + '::' + item.price + "<br>";
})
response.send(output);
});
app.use(function (request, response){
response.send('<h1> Hello Middleware ... !! <h1>');
});
// 서버 동작
http.createServer(app).listen(52273, function() {
console.log('Server Running at http://127.0.0.1:52273');
});xml을 사용하여 출력하였다. xml을 사용할때는 respose.type
형식을 추가해서 진행해야한다.
- 느낀점
오늘은 서버 사이드 관리시 사용하는 node.js 를 사용했다.
값을 선언하고 불러오는 기본적인 동작 위주로 진행했고,
개념을 적립했다.
변수 선언 및 출력값을 불러오는 구조에 익숙해지도록 해야겠다.
네트워크와 UI 구현 시험을 보았다.
네트워크는 그럭저럭 보았지만 UI 구현의 기본 내용을 숙지 못했던거 같다.
반복 학습을 통해서 꼭 내것으로 만들도록 노력해야겠다.
Back-end Developer Preparation Students