Dev/NodeJS

[NodeJS] 기초 메모

surimi🍥 2021. 7. 22. 17:32
반응형

Node.js


  • 한글 깨짐
  • res.writeHead(200, {'Content-Type': 'text/html;charset=UTF-8'});
  • 동기 & 비동기
    • Sync가 있으면 동기, 없으면 비동기 방식
    • 차이
    • //Sync 동기 console.log(1); var data = fs.readFileSync(__dirname + '/index.html', { encoding: 'utf8' }); console.log(data); console.log(2); // console.log(1)으로 1이 출력된 후 // fs.readFileSync 함수가 완전히 실행 된 뒤 // console.log(2) 2가 출력됨 // 동기방식은 전 코드의 실행이 끝나기 전엔 다음 코드로 넘어가지 않는다. // Async 비동기 console.log(1); fs.readFile(__dirname + '/index.html', { encoding: 'utf8' }, (err, data) => { console.log(data); }); console.log(2); // 1이 출력되고 // fs.readFile 함수가 호출되고 // 2가 출력되고 // fs.readFile의 호출 결과인 index.html의 data가 출력된다. // 비동기 방식은 일단 코드들을 `호출`만 하고 결과가 돌아오는 순서대로 화면에 출력된다.
  • fs.readFile(), fs.readFileSync()
  • 서버 만들기
  • var http = require('http'); const hostname = '127.0.0.1' const port = 8080; http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' }) res.end('Hello World\n'); }).listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); })

웹페이지간 data 전달

  • 데이터 입력 form
  • // JS app.get('/form', (req, res) => { res.render('form'); }) // JADE doctype html html head meta(charset='utf-8') body form(action='/form_receiver', method='post') // method로 get, post 변경 p // p태그 안에 넣어줌으로써 태그들의 수직 정렬 input(type="text", name='title') p textarea(name="description", cols="30", rows="10") p input(type="submit")
  • GET 방식 데이터 수신 (req.query.~~)
  • POST 방식 데이터 수신 (req.body.~~)
    • 참조 : http://expressjs.com/en/5x/api.html#req.bodyapp.use()로 bodyParser를 등록해두면 POST 방식으로 보내진 데이터를 사용자가 요청할 때, request 객체가 원래는 가지고 있지 않았던 body 객체를 bodyParser가 request 객체에 추가한다. 그리고 body 객체에 담긴 POST 방식 데이터를 사용할 수 있게된다.
    • POST 방식으로 받은 데이터를 사용하려면 body-parser 또는 multer라는 middleware(plugin)를 사용해야 한다.
    • req.body 사용
    • var express = require('express'); var bodyParser = require('body-parser'); var app = express(); // static한 파일들 (html, css, js)을 불러올 폴더 지정 app.use(express.static(__dirname + '/static')) // # BodyParser - https://www.npmjs.com/package/body-parser // for parsing application/json app.use(bodyParser.json()) // for parsing application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: true }))
    //POST
    app.post('/form_receiver', (req, res) => {
        var q = req.body; // post 방식 데이터 수신
        res.send(`${q.title}, ${q.description}`);
    })
    ```
  • GET & POST의 용도
    • GET은 정보가 주소창에 모두 노출됨
    • URL이 너무 길면 중간에 짤릴 수 있음.
    • POST는 전송할 수 있는 데이터 크기에 제한이 없음
    • POST는 데이터가 일단 노출은 안되지만 보안이 완벽하진 x
    • 때문에 HTTPS, SSL을 사용

반응형