익스프레스 JS 시작하기

익스프레스 JS란?

Express는 웹 및 모바일 애플리케이션을 위한 강력한 기능을 제공하는 Node.js용 빠르고 미니멀한 웹 프레임워크입니다.

Express는 서버 측 프레임워크입니다. 전체 스택 애플리케이션을 구축하기 위해 React, Angular 또는 Vue와 같은 클라이언트 측 프레임워크와 함께 사용할 수 있습니다 🚀.

대부분의 경우 익스프레스로 API를 빌드하여 프런트엔드에서 요청을 받고 대부분 JSON 형식으로 데이터를 제공합니다.

Express의 사용은 무엇입니까?

노드 js로 웹 응용 프로그램을 훨씬 쉽게 구축할 수 있습니다

.

가볍고 빠르고 자유롭기 때문에 사용합니다

가장 인기 있는 노드 프레임워크

프런트엔드 프레임워크와 함께 사용하기 쉬움

전제 조건

자바스크립트 기초

Node 및 npm의 기초

익스프레스 설치

실행npm install express 명령을 실행하여 express js 설치

Express에서 서버를 생성하기 위한 기본 코드

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

app.get('/', (req, res) => {
  res.send('<h1>Home page.....</h1>')
})

app.listen(3000, () => {
  console.log(`server is listening on port 3000`)
})

포트 3000에서 수신 대기 중임을 알 수 있으므로 localhost:3000으로 이동하면 다음 페이지가 실행되는 것을 볼 수 있습니다.

하지만 JS를 표현하는 이유

노드 js가 존재할 때 왜 js를 표현합니까?
당신은 이런 의심을 가질 수 있습니다. 제가 표현을 배우기 시작했을 때 저는 이런 의심을 가졌습니다. Node js와 express JS를 비교하는 것은 그다지 완벽하지 않습니다. Node는 Express가 프레임워크인 반면 브라우저 외부에서 JavaScript를 실행할 수 있는 런타임 환경이기 때문입니다. express를 사용하는 첫 번째 이유는 node js에서 http를 사용하는 것보다 적은 코드 라인으로 서버를 만들 수 있기 때문입니다.

깊이 이해하기 위해 사용자가 localhost:3000 url에 있을 때 '홈 페이지...'를 표시하고 사용자가 localhost:3000/about에 있을 때 'About Page...'를 표시하는 서버를 생성해 보겠습니다.



👉👉 Node http 모듈을 사용하여 위의 쿼리 수행 :

const http = require('http');

const server = http.createServer((req,res) => {
    res.statusCode = 200,
    res.setHeader('Content-Type','text/html')
    if(req.url === '/') {
        res.end('<h1>Home Page....</h1>')
    } else if(req.url === '/about') {
        res.end('<h1>About page....</h1>')
    }
})

server.listen(3000, () => {
    console.log(`server is listening on port 3000`);
})

👉👉 Express JS를 사용하여 동일한 쿼리 수행:

const app = require('express')()

app.get('/', (req, res) => {
  res.send('<h1>Home page.....</h1>')
})

app.get('/about', (req, res) => {
  res.send('<h1>About page.....</h1>')
})

app.listen(3000, () => {
  console.log(`server is listening on port 3000`)
})

express js가 얼마나 간단하고 쉬운지 차이점을 명확하게 알 수 있습니다. express js의 좋은 점은 상태 코드와 콘텐츠 유형을 자동으로 설정한다는 것입니다.

익스프레스로 json 보내기

app.get('/', (req, res) => {
  res.json({
    name: 'hello',
    age: 22
  })
})

출력 :

미들웨어 기능

미들웨어 기능은 요청 및 응답 개체에 액세스할 수 있는 기능입니다. express는 미들웨어에 내장되어 있지만 미들웨어는 타사 패키지에서도 제공되며 맞춤형 미들웨어를 만들 수도 있습니다.

미들웨어는 요청 및 응답 개체를 변경할 수 있습니다.

정적 폴더 보내기

공용 폴더를 만들고 index.html, about.html 및 contact.html을 추가하여 사용자가 '/index.html'로 이동하면 해당 파일이 제공됩니다. '/about.html' 서버 about.html 파일

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

읽어 주셔서 감사합니다
소셜에서 나를 팔로우하세요
GitHub