Node Express 5분 안에 Node 및 Express를 사용하는 첫 번째 웹 서버

14224 단어 server express node beginners

알아, 알아... 다른 Node Express 튜토리얼 😑.
하지만 아직 Node를 배우고 서버를 구축하지 못했다면 이 초간단 튜토리얼이 여러분을 기다리고 있을 것입니다! 😆

1단계: 노드 설치

알겠습니다. 이 작업은 5분 이상 걸릴 것입니다. 하지만 Node가 이미 있는 경우 건너뛰고 시작하겠습니다!

OS에 맞는 최신 LTS 버전 설치

https://nodejs.org/en/download/

작동하는지 테스트하려면 프로젝트 루트에 파일server.js을 생성하십시오.

// server.js
console.log("Hello World!");

그리고 그것을 시험해보십시오

$ node server.js
Hello world!

멋진! 백엔드 작업을 할 준비가 되었습니다!

2단계: npm 설정

NPM을 사용하여 노드 패키지를 관리합니다.
npm을 초기화하고 기본값을 사용하도록 합니다.

$ npm init -y

3단계: 익스프레스 미들웨어 설치 및 가져오기

A middleware is a piece of code that has access to the request and response object. For now, think about express making things easier for us by being a "middle-man" 🕵️ between our code and Node's HTTP stuff.

$ npm install express

// server.js
const express = require('express');
const server = express();

4단계: JSON 경로 처리기 추가

클라이언트가 "/json"(localhost:4000/json)을 요청/액세스할 때마다 "Hello world"메시지인 JSON을 전송합니다.

// server.js
...
server.get("/json", (req, res) => {
   res.json({ message: "Hello world" });
});

5단계: HTML 경로 처리기 추가

클라이언트가 "/"(localhost:4000)를 요청/액세스할 때마다 HTML 페이지인 파일을 보냅니다.

__dirname holds the directory of current module (server.js)

// server.js
...
server.get("/", (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

index.html와 같은 수준에 server.js 만들기
HTML로 마을로 이동! 또는 파란색 제목이 마음에 들면 이것을 복사하여 붙여넣을 수 있습니다.

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Node Workshop</title>
 </head>
 <body>
     <h1 style="color: blue;">
        Express: HELLO WORLD
     </h1>
 </body>
</html>

5단계: 서버 시작

// server.js
...
const port = 4000;

server.listen(port, () => {
    console.log(`Server listening at ${port}`);
});

# CTRL+C to stop server if currently running
$ npm start

6단계: 테스트

# on another terminal

$ curl http://localhost:4000/json
{"message":"Hello world"}

$ curl http://localhost:4000
<!-- index.html --> ...

또는 브라우저를 열고 다음으로 이동합니다.

http://localhost:4000/json

http://localhost:4000

완전한 코드

const express = require('express');
const server = express();
const port = 4000;

server.get("/", (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

server.get("/json", (req, res) => {
   res.json({ message: "Hello world" });
});

server.listen(port, () => {
    console.log(`Server listening at ${port}`);
});

"알았어, 좋았어. 하지만 이걸로 뭘 할 수 있지?"

몇 가지 경로 및 HTML 페이지 추가
HTML + JSON 서버가 생겼습니다!

...
server.get("/items", (req, res) => {
   res.json({ items: [{ "id": 1, "name": "banana" }, 
                      { "id": 2, "name": "apple" }
                     ] 
           });
});

server.get("/info", (req, res) => {
   res.sendFile(__dirname + '/info.html');
});
...

더 많은 내용을 다루어야 합니다.

GET/POST/PUT/DELETE를 구현하는 REST(ful) API 서버 구축

(정적 HTML 대신) 데이터를 허용하는 템플릿을 제공합니다.

훨씬 더!

더 이상 사용할 수 없는 기사

이 기사는 제가 작업 중인 Node+Express 시리즈의 일부입니다.

그동안 Node+Express 🤓가 부족하시다면,
내 노드 워크숍을 확인하세요(Gihub 저장소 및 슬라이드):

렌몰드 / node_workshop

Node, Express 및 MongoDB를 사용하여 다음 웹 애플리케이션을 위한 서버 및 API 구축

노드 워크숍

Create a server + REST API for your next web application!

이 워크샵에서는 웹 서버에 대한 모든 개념을 토론하고 활동을 통해 실습해 봅니다.
여기에 있는 코드와 개념은 다음 웹 프로젝트의 훌륭한 기반이 될 것입니다.
주제에는 다음이 포함되지만 이에 국한되지는 않습니다.

Node 및 Express를 사용하여 웹 서버 및 REST API 구축

라우팅, 요청 및 응답 이해

HTTP 메서드로 CRUD 구현

템플릿을 사용하여 서버 렌더링 웹 사이트 구축

Cloud NoSQL 데이터베이스에 연결: MongoDB Atlas DB

세션, 쿠키 및 토큰을 사용한 사용자 인증

Github Jobs, Giphy, Spotify와 같은 외부 API 사용

이전 이벤트

Node Workshop - August 27 2020

Node Workshop - July 16 2020

재료

미리보기 슬라이드: Google Drive document

소재: Notion link

암호

워크샵을 따르려면:

$ git checkout dev
$ node server.js