33일차_jQuery

23.04.26 수 33일차

jQuery

• node.js

- 사전 준비

1. Node.js 검색 후 권장버전 다운로드 및 설치(경로 디폴트로 해도 ok)(18.16.0)
2. C드라이브에 빈 폴더 생성(예:nodejs) 후 VSCode에 드래그&드랍.
3. cmd에서 => cd C:\nodejs
4. C:\nodejs > npm install request
5. C:\nodejs > npm install express@3.4.7
6. VSCode들어와서 nodejs 폴더에 server.js파일 생성 후 코드 작성

- 주의사항
7. VSCode에서 저장 후, c:\nodejs> node server.js
8. 브라우저에서 127.0.0.1:52273/~~~ 입력 후 결과 보기

VSCode에서 편집,변경,저장 후 브라우저에도 바뀐 결과를 보고 싶다면
서버 재시작이 필수 ! 
cmd > ctrl + c => node server.js 

- 서버 재시작(자동설정)
c:\nodejs> npm install -g nodemon  (노데몬 설치)          
nodemon server.js (node server.js 대신 사용)

서버를 자동으로 재시작해주는 nodemon + 파일명을 꼭 기억해야겠다.
사용해보니 상당히 편리했다.

-- parameter
--코드
// 모듈 추출
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.post('/products',function(request, response){
    var name = request.query.name;
    var price = request.query.price;
    var item = {name: name, price: price};
      if(name.trim().length >= 1 && price.trim().length >= 1) {
        items.push(item); // 데이터를 추가
        response.send(
          {
          message:'데이터를 추가했습니다.', 
          data: item
          }
        );        
          }else{
          response.send({message:'데이터를 추가 실패 했습니다.'});
          }
      });
    
// 개별 데이터 조회 (아이템의 주소 값으로 존재 유무 확인)
app.get('/products/:id', function(request, response){
    var id = Number(request.params.id);
    if(isNaN(id)){
      response.send({error:'숫자를 입력하세요. !!'});
      }else if(items[id]){
        response.send(items[id]);
      }else {
        response.send({error:'존재하지 않는 데이터 입니다.!!'});
      }
})

// get(select) 선택 > get 프로토콜 받아오기
app.get('/products', function(request, response){
    response.send(items);
})

// 파라미터 추가(동적 라우터 입력 버전)
app.all('/parameter/:id', function(request, response){
    var id = request.params.id;
    response.send('<h1> 동적 라우터 ' + id + ' </h1>') 
})

// 파라미터 (query 입력 버전)
app.all('/parameter', function(request, response){
    var name = request.query.name;
    var region = request.query.region;
    response.send('<h1>' + name + '님 :' + region + ' 지역</h1>') 
})

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');
});

URL에 서버와 값을 입력 후 결과값을 확인해 보았다.
정상적으로 값으 들어오는것을 확인했다.
If 문을 통해 값이 없을때의 실패 환경을 만들었다.

- 파라미터 (동적 라우터) 값 확인
URL : http://127.0.0.1:52273/parameter/seoul

결과값 : <h1> 동적 라우터 seoul </h1>

-파라미터( query) 값 확인
URL : http://127.0.0.1:52273/parameter/

결과값 : young 님 seoul 지역

라우터를 다양한 형태로 사용할 수 있다.
미들웨어의 가장 윗부분 부터 새로운 형태를 추가한다.

• postman
  포스트맨에서 가장 자주 사용할 4가지 방법이다.

* get - 값을 선택(select)
: get(select) 선택하여 item 값 확인
URL 확인: get - http://127.0.0.1:52273/products

* post- 값을 입력(insert)
: post(insert) 선택하여 item값 추가 동작 확인
URL 확인 : post - http://127.0.0.1:52273/products/?name=홍차&price=5000

GET, post 방식의 URL에서 ? 뒤에는 쿼리다. 
그리고 각각의 쿼리는 &로 구분된다.

* put - 값을 수정(update)
* delete - 값을 삭제(delete)

• 느낀점

오늘은 포스트맨을 이용하여 get과 post를 알아보았다

동적 라우터로 parameter 값을 지정해 해당 경로로 값을 확인 할 수있었다.
아직은 용어가 많이 어렵다.
쿼리 값으로 item의 값을 구분하고, 분류할 수 있으며
쿼리값이 없을경우 post 동작을 제어할 수 있다.
새로 배우기 시작한 내용이니 복습을 하도록 해야겠다.