VSCode로 NodeJs+Express 웹 프로젝트 설정에 대한 실용적인 소개
8096 단어 nodenewbiejavascriptexpressjs
Express는 웹 및 모바일 응용 프로그램을 위한 강력한 기능 집합을 제공하는 최소한의 유연한 Node.js 웹 응용 프로그램 프레임워크입니다.- Express
⚫ NodeJ 다운로드
다운로드 및 설치 후 명령줄( How to open command line )에서 아래⬇️ 명령을 실행하여 성공적으로 설치되었는지 확인할 수 있습니다.
node -v
위의 명령은 NodeJS 버전을 인쇄해야 하므로 다음과 같이 표시됩니다
v14.7.0
(설치한 NodeJS 버전에 따라 다름).미션 1️⃣ 완료!!✔️✔️
__
⚫ 폴더 구조
VSCode 다운로드, 설치 및 열기here.
VSCode의 왼쪽 상단 모서리에 있는
file
탭을 클릭하여 폴더를 열 수 있습니다. file
를 클릭하면 Open Folder
옵션이 표시됩니다... 이 옵션을 클릭하고 데스크탑에서 MyNodeJsProject 폴더📂를 찾은 다음 폴더📂를 엽니다. VSCode의 왼쪽 패널에 MyNodeJsProject 폴더📂가 표시됩니다.
terminal
탭을 클릭하여 VSCode 터미널을 연 다음 New Terminal
옵션을 클릭합니다. VSCode 하단에 새 패널이 나타납니다.참고: VSCode 터미널을 열기 전에 VSCode를 통해 MyNodeJsProject 폴더📂를 열면 터미널의 폴더로 자동으로 이동합니다.
npm init -y
위 명령을 실행하면 MyNodeJsProject 폴더📂에
package.json
및 package-lock.json
파일이 자동으로 생성됩니다. package.json
파일은 프로젝트를 식별하고 프로젝트의 종속성을 처리하는 정보를 포함하므로 프로젝트의 메타데이터라고 할 수 있습니다. package-lock.json
파일은 특정 버전 번호에 대한 종속성을 잠그는 데만 사용됩니다.index.js
파일을 만듭니다.index.js
파일을 수동으로 만들거나 터미널에서 아래 명령을 실행할 수 있습니다.type NUL > index.js
미션2️⃣ 완료!!✔️✔️
⚫ ExpressJs를 사용하여 서버 만들기
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
localhost:4000/home
"를 입력합니다짜잔!!🎇🎇
그게 다야.... 서버가 가동 및 실행 중입니다!
미션3️⃣ 완료!!✔️✔️
참고: 서버를 닫으려면 터미널에서 ctrl+c
바로 가기를 사용하십시오.
🏁 내 글이 마음에 들고 나와 내 작업에 지원을 제공하고 싶고 프로그래밍/소프트웨어 개발에 대해 더 배우고 싶다면 에서 나를 팔로우하세요.
Reference
이 문제에 관하여(VSCode로 NodeJs+Express 웹 프로젝트 설정에 대한 실용적인 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/macaulay/a-practical-introduction-to-setting-up-a-nodejs-express-web-project-with-vscode-220h
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(VSCode로 NodeJs+Express 웹 프로젝트 설정에 대한 실용적인 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/macaulay/a-practical-introduction-to-setting-up-a-nodejs-express-web-project-with-vscode-220h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)