VSCode로 NodeJs+Express 웹 프로젝트 설정에 대한 실용적인 소개

Node.js®는 Chrome의 V8 JavaScript 엔진에 구축된 JavaScript 런타임입니다.- Node.Js

Express는 웹 및 모바일 응용 프로그램을 위한 강력한 기능 집합을 제공하는 최소한의 유연한 Node.js 웹 응용 프로그램 프레임워크입니다.- Express


⚫ NodeJ 다운로드


  • 컴퓨터에 NodeJ를 다운로드하고 설치하려면 https://nodejs.org/en/을 방문하십시오.


  • 다운로드 및 설치 후 명령줄( How to open command line )에서 아래⬇️ 명령을 실행하여 성공적으로 설치되었는지 확인할 수 있습니다.



    node -v
    




    위의 명령은 NodeJS 버전을 인쇄해야 하므로 다음과 같이 표시됩니다v14.7.0(설치한 NodeJS 버전에 따라 다름).




    미션 1️⃣ 완료!!✔️✔️

    __

    ⚫ 폴더 구조



  • VSCode 다운로드, 설치 및 열기here.
  • 바탕 화면에 폴더를 만듭니다... 쉽게 찾을 수 있도록 이름을 MyNodeJsProject로 지정합니다
  • .
  • VSCode에서 MyNodeJsProject 폴더📂를 엽니다.
    VSCode의 왼쪽 상단 모서리에 있는 file 탭을 클릭하여 폴더를 열 수 있습니다. file를 클릭하면 Open Folder 옵션이 표시됩니다... 이 옵션을 클릭하고 데스크탑에서 MyNodeJsProject 폴더📂를 찾은 다음 폴더📂를 엽니다.

  • VSCode의 왼쪽 패널에 MyNodeJsProject 폴더📂가 표시됩니다.

  • 여전히 VSCode에서 VSCode 상단에 있는 terminal 탭을 클릭하여 VSCode 터미널을 연 다음 New Terminal 옵션을 클릭합니다. VSCode 하단에 새 패널이 나타납니다.



  • 참고: VSCode 터미널을 열기 전에 VSCode를 통해 MyNodeJsProject 폴더📂를 열면 터미널의 폴더로 자동으로 이동합니다.
  • 터미널에서 아래 명령을 실행합니다.

  • npm init -y
    


    위 명령을 실행하면 MyNodeJsProject 폴더📂에 package.jsonpackage-lock.json 파일이 자동으로 생성됩니다. package.json 파일은 프로젝트를 식별하고 프로젝트의 종속성을 처리하는 정보를 포함하므로 프로젝트의 메타데이터라고 할 수 있습니다. package-lock.json 파일은 특정 버전 번호에 대한 종속성을 잠그는 데만 사용됩니다.
  • MyNodeJsProject 폴더📂에서 프로젝트의 진입점이 될 index.js 파일을 만듭니다.index.js 파일을 수동으로 만들거나 터미널에서 아래 명령을 실행할 수 있습니다.

  • type NUL > index.js
    




    미션2️⃣ 완료!!✔️✔️

    ⚫ ExpressJs를 사용하여 서버 만들기


  • MyNodeJsProject 폴더📂로 이동한 터미널에서 아래 명령을 실행하여 express를 설치합니다.

  • npm install express
    

    express가 성공적으로 설치되면 모든 종속성을 포함하는 node_modules라는 새 폴더📂가 자동으로 생성되고 터미널에 Express를 성공적으로 설치했다는 메시지도 표시됩니다.

  • 이제 index.js 파일
  • 을 엽니다.
  • index.js 파일에 아래 코드 줄을 입력하고 저장합니다.

  • // Importing the express module
    const express = require('express'); 
    // calling the express function
    const app = express(); 
    
    // Creating a "/home" route for sending "Hello World!😎😎" to the clientSide(Browser)
    app.get("/home", (req, res)=>{
        res.status(200).send("<h1>Hello World!😎😎</h1>")
    })
    
    // declaring our Port number variable
    const PORT = process.env.PORT || 4000;
    
    // Creating a server with the PORT variable declared above
    app.listen(PORT, ()=>{
        console.log(`Listening to Port ${PORT}`)
    });
    
    


  • 해당 코드 줄을 index.js 파일에 저장한 후 "/home" 경로에 액세스하려면 먼저 서버를 실행해야 합니다.
    이제 서버를 실행하려면 터미널에서 다음 명령을 실행하십시오.

  • node index.js
    


  • 브라우저를 열고 URL 필드에 "localhost:4000/home "를 입력합니다
  • .

    짜잔!!🎇🎇





    그게 다야.... 서버가 가동 및 실행 중입니다!




    미션3️⃣ 완료!!✔️✔️

    참고: 서버를 닫으려면 터미널에서 ctrl+c 바로 가기를 사용하십시오.


    🏁 내 글이 마음에 들고 나와 내 작업에 지원을 제공하고 싶고 프로그래밍/소프트웨어 개발에 대해 더 배우고 싶다면 에서 나를 팔로우하세요.

    좋은 웹페이지 즐겨찾기