노드와 익스프레스를 사용하여 처음부터 간단한 로컬 서버 만들기

7823 단어 nodejavascript

목표


  • node.js를 사용하여 시스템에 로컬 서버 생성
    먼저 Hello World를 표시하는 간단한 앱을 만든 다음 라우팅에 express.js를 사용합니다. 마지막으로 몇 가지 API를 생성하고 라우팅합니다.

    • 전제 조건


  • 맥 OS 카탈리나

    • Hello World를 반환하는 간단한 로컬 서버로 앱 만들기




    // create your own directory
$ mkdir node-practice && cd node-practice
// initialize your project
$ npm init -y
// create your app.js
$ touch app.js
$ vi app.js


    app.js를 편집합니다.

    const http = require('http');
const server = http.createServer((req, res)=>{
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World!');
})
server.listen(8080);


    아래 명령을 실행하고 localhost:8080에 액세스합니다. 페이지에 Hello World가 표시되어야 합니다.

    $ node app.js




    익스프레스 소개



    우리는 익스프레스를 설치할 것입니다.

    $ npm install express -save


    공용 폴더 만들기




    $ mkdir public && cd public
$ touch index.html
$ mkdir css img js


    이제 node_modules를 제외한 폴더가 다음과 같아야 합니다.

    $ tree -I node_modules
.
├── app.js
├── package-lock.json
├── package.json
└── public
    ├── css
    ├── img
    ├── index.html
    └── js

4 directories, 4 files


    각 파일 안에 다음 파일을 생성합니다.

    node-practice/public$ cd css && touch sample.css
node-practice/public$ cd js && touch sample.js


    내 img 폴더 안에 샘플 사진이 있습니다.



    이제 폴더는 다음과 같아야 합니다.

    $ tree -I node_modules
.
├── app.js
├── package-lock.json
├── package.json
└── public
    ├── css
    │   └── sample.css
    ├── img
    │   └── sample.jpeg
    ├── index.html
    └── js
        └── sample.js

4 directories, 7 files


    index.html의 경우:

    <!DOCTYPE html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TEST</title>
    <link rel="stylesheet" href="/css/sample.css">
  </head>

  <body>
    <h1>Hello World!</h1>
    <p id="hoge"></p>
    <div>
      <img src="/img/sample.jpeg">
    </div>
    <script src="/js/sample.js"></script>
  </body>
</html>


    sample.js의 경우:

    /* /public/js/sample.js */
{
  const el = document.getElementById('hoge');
  el.innerText = 'HAHAHAHAHAHAHA!!!!';
}


    sample.css의 경우:

    /* /public/css/sample.css */
h1 {
  font-size: 1.5rem;
  color: #0000ff;
}
img {
  max-width: 100%;
}


    app.js 편집




    const express = require('express');
const app = express();
const path = require('path');

app.listen(8080, () => {
  console.log('Running at Port 8080...');
});

app.use(express.static(path.join(__dirname, 'public')));

app.use((req, res) => {
  res.sendStatus(404);
});


    다음을 실행하면 localhost:8080 에 웹 페이지가 표시되어야 합니다.

    $ node app.js




    API 만들기



    먼저 폴더를 생성하여 API를 생성합니다.

    // at the root directory of the project.
$ mkdir api && cd api
$ touch data.json index.js


    data.json에 임의의 데이터를 생성합니다.

    {
  "id": "W0001",
  "title": "I Love Cats and Dogs",
  "price": 3000000000000
}


    index.js의 경우 API 라우터를 내보냅니다.

    const express = require('express');
const router = express.Router();

router.use(express.json());

router.get('/foo', (req, res) => {
    res.sendFile(__dirname + '/data.json', (err) => {
        if (err) {
            res.sendStatus(400);
        } else {
            console.log('completed');
        }
    });
});

router.route('/bar')
    .get((req, res) => {
        res.json(req.query);
    })
    .post((req, res) => {
        const nameArray = ['id', 'name', 'address'], failed = nameArray.some(v=>!req.body[v]);
        if (failed) {
            res.sendStatus(400);
        } else {
            res.sendStatus(200);
        }
    });

module.exports = router;


    폴더는 이제 다음과 같아야 합니다.

    $ tree -I node_modules
.
├── api
│   ├── data.json
│   └── index.js
├── app.js
├── package-lock.json
├── package.json
└── public
    ├── css
    │   └── sample.css
    ├── img
    │   └── sample.jpeg
    ├── index.html
    └── js
        └── sample.js

5 directories, 9 files


    이제 루트 디렉토리에서 app.js를 편집합니다.

    const express = require('express');
const app = express();
const path = require('path');
const api = require('./api/');

app.listen(8080, () => {
    console.log('Running at port 8080...');
});

app.use('/api', api);
app.use(express.static(path.join(__dirname, 'public')));

app.use((req, res) => {
    res.sendStatus(404);
});


    이제 node app.js를 실행합니다.

    API 테스트



    Advanced REST Client을 사용하여 API가 어떻게 작동하는지 살펴보겠습니다.
    http://localhost:8080 를 던지면 다음과 같은 결과를 얻습니다.


    http://localhost:8080/api/foo 를 던지면 data.json 를 얻습니다.


    http://localhost:8080/api/bar?name=johndoe&address=USA&age=17 를 던지면 URL 값에서 json을 가져옵니다.



    마지막으로 bar api를 사용하여 일부 데이터를 게시해 보겠습니다. 본문 매개변수를 편집하여 추가할 수 있습니다.



    이제 GET과 POST 모두에서 API가 작동하는 것을 볼 수 있습니다!

    도움이 되었기를 바랍니다.
    관찰자 모드의 간단한 데모
    다음을 배치하다.js 프로그램이 5분 안에 Heroku에 전송됨

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage