Node JS 앱에 자동 새로고침을 추가하는 방법은 무엇입니까?

5469 단어 javascriptnode
이것은 내가 Express로 Node JS를 배우기 시작할 때 가장 먼저 검색한 것 중 하나입니다. 계속해서 서버를 중지하고 다시 실행하는 일이 너무 어려워서 계속해서 반복해서 말입니다. 이것이 nodemon이라는 npm 패키지를 사용하는 이유입니다.

노드 서버 설정



컴퓨터에 NodeJS가 설치되어 있기를 바랍니다.
  • 디렉토리를 설정하자

  • mkdir nodemon_tutorial && cd nodemon_tutorial
    



    npm init -y
    


    This would create a package.json

    • Now, let's install express to start a server


    npm install express
    


  • 이제 index.js라는 파일을 만들어 봅시다.

  • touch index.js
    


  • 즐겨찾는 코드 편집기에서 폴더를 엽니다. VS Code를 사용하므로 다음을 실행합니다.

  • code .
    


  • 이제 index.js 안에 다음을 추가하십시오.

  • const express = require('express');
    const app = express();
    const port = process.env.PORT || 3000
    
    app.get('/', (req, res) => {
       res.send("Hello World!");
    })
    
    app.listen(port, () => {
       console.log(`App is running at port: ${port}`);
    })
    


    코드 설명



  • 1행: 1행에서 서버를 실행하기 위한 익스프레스 패키지를 가져오고 있습니다
  • .

  • 2행: 익스프레스 모듈을 인스턴스화하여 앱을 만들고 있습니다
  • .

  • 3행: 포트에 대한 변수를 생성하고 있습니다. 이름이 PORT 인 환경 변수를 검색합니다. 아무것도 찾지 못하면 기본적으로 3000 에 할당합니다.

  • 5-7행: 여기에서는 경로를 생성하고 있습니다. 따라서 사람이 get 요청을 / 로 보내면 응답으로 Hello World
  • 를 받게 됩니다.

  • 9-11행: 앱을 실행하고 포트 변수에서 수신 대기하도록 합니다.
    이제 간단히 말하여 이 앱을 실행할 수 있습니다.

  • node index.js
    


    이것은 출력을 줄 것입니다

    App is running at port: 3000
    


  • 이제 브라우저로 이동하여 다음을 입력하십시오. localhost:3000/

  • 이것의 단점


  • 이제 index.js로 이동하여 "Hello World!""Hello, this is my first nodemon app!"로 변경하십시오.
  • 이제 브라우저로 가서 새로고침을 해도 그대로 유지됩니다

  • 서버 실행을 위한 nodemon 설정


  • nodemon을 설치하려면 다음을 실행하십시오.

  • npm install nodemon --save-dev
    


  • --save-dev를 추가하는 이유는 이것을 게시하는 동안이 아니라 개발 중에만 원하기 때문입니다.
  • 이제 package.json 파일로 이동하여 다음 줄을 제거합니다.

  • "test": "echo \"Error: no test specified\" && exit 1"
    


    그리고 다음 줄을 추가하십시오.

    "start":"nodemon index.js"
    


  • 그래서 우리가 하는 일은 nodemon이 node 대신 서버를 실행하게 만드는 것입니다.
  • 이제 실행 중이던 서버를 종료하고 다음을 실행합니다.

  • npm start
    


  • 이제 localhost:3000으로 이동합니다.
  • index.js에서/가져오는 동안 응답을 변경하고 저장한 후 브라우저에서 자동 새로고침하여 새 응답을 표시해야 합니다
  • .

    좋은 웹페이지 즐겨찾기