> 웹 프론트엔드 > JS 튜토리얼 > Express.js 기본: 초보자 가이드 - Node.js 튜토리얼 시리즈 - 10부

Express.js 기본: 초보자 가이드 - Node.js 튜토리얼 시리즈 - 10부

Barbara Streisand
풀어 주다: 2024-09-27 06:33:02
원래의
676명이 탐색했습니다.

Express.js Basics: A Beginner

소개:

안녕하세요! Node.js를 처음 사용한다면 웹 서버와 API 구축을 위한 가볍고 빠르며 유연한 프레임워크인 Express.js에 대해 들어보셨을 것입니다. 이 가이드에서는 Express의 기본 사항을 안내하여 시작하는 것이 얼마나 쉬운지 보여드리겠습니다.

준비됐나요? 뛰어들어 보세요!


1. 익스프레스 설치

먼저 Express를 설치해 보겠습니다. 컴퓨터에 Node.js 및 npm(노드 패키지 관리자)이 설정되어 있는지 확인하세요. 준비가 완료되면 터미널을 열고 다음 명령을 실행하세요.

npm install express
로그인 후 복사

붐! 방금 프로젝트에 Express를 설치했습니다. 너무나 간단합니다.


2. 첫 번째 Express Server 만들기

이제 뭔가를 만들어 봅시다! 누군가 귀하의 사이트를 방문할 때 요청을 수신하고 "Hello World"로 응답하는 매우 간단한 Express 서버를 만드는 방법은 다음과 같습니다.

const express = require('express');  // Import Express
const app = express();  // Initialize your Express app

app.get('/', (req, res) => {  // Set up a route for GET requests to the root URL
  res.send('Hello World');  // Send a response
});

app.listen(3000, () => {  // Tell the app to listen on port 3000
  console.log('Server is running on port 3000');
});
로그인 후 복사

node app.js로 실행하고 브라우저에서 http://localhost:3000을 열면 "Hello World"가 표시됩니다. 서버를 설치하고 실행하는 것은 너무나 쉽습니다!


3. 미들웨어란 무엇인가요?

'미들웨어'라는 용어를 많이 들어보셨을 것입니다. 간단히 말해서 미들웨어는 요청을 받고 응답을 보내는 사이에 실행되는 기능일 뿐입니다.

간단한 예를 살펴보겠습니다.

app.use((req, res, next) => {
  console.log('Request received');
  next();  // Moves to the next middleware or route
});
로그인 후 복사

이 경우 요청이 이루어질 때마다 "요청 수신됨"이 콘솔에 기록됩니다. next() 함수는 요청이 다음 미들웨어 함수 또는 경로 처리기로 계속 진행되도록 허용하므로 여기서 매우 중요합니다. 그렇지 않으면 요청이 중지되고 응답이 전송되지 않습니다.

미들웨어가 어떻게 작동하는지 자세히 알고 싶다면 Node.js를 사용하여 Express.js의 미들웨어 이해를 확인하세요. 라우터 수준, 오류 처리 미들웨어 등 다양한 유형의 미들웨어를 다루고 있습니다.


4. 라우팅: 앱의 중추

라우팅은 앱에서 다양한 URL을 설정하는 방법입니다. 루트(/) 경로에 대한 기본 경로를 이미 살펴보았지만 POST와 같은 다른 HTTP 메서드를 처리하여 양식 제출이나 데이터 업데이트를 처리할 수도 있습니다.

app.post('/submit', (req, res) => {
  res.send('Form submitted!');
});
로그인 후 복사

이제 사용자가 /submit에 양식을 제출하면 이 경로가 이를 처리합니다. 필요한 만큼 경로를 생성할 수 있습니다. Express를 사용하면 쉽습니다!


5. 정적 파일 제공

이미지, CSS 파일 또는 기타 정적 자산을 제공하려면 어떻게 해야 합니까? Express가 도와드립니다! 해당 파일을 public과 같은 폴더에 넣고 Express에 해당 파일을 찾을 수 있는 위치를 알려주십시오.

app.use(express.static('public'));
로그인 후 복사

이제 public 폴더 내의 모든 파일(예: style.css 또는 이미지)은 브라우저에서 직접 액세스할 수 있습니다.


6. JSON 데이터 처리

최신 앱에서는 양식이나 API 요청 등 JSON 데이터를 처리해야 하는 경우가 많습니다. Express를 사용하면 이 작업이 매우 쉬워집니다.

app.use(express.json());  // Add this middleware to parse JSON

app.post('/data', (req, res) => {
  console.log(req.body);  // Access the parsed JSON data
  res.send('Data received!');
});
로그인 후 복사

이제 JSON 데이터가 포함된 POST 요청이 /data로 전송되면 Express가 자동으로 JSON을 구문 분석하고 req.body에서 액세스할 수 있습니다. 간단하죠?


전체 마무리

여기에 Express.js에 대한 빠르고 쉬운 소개가 있습니다! 단 몇 줄의 코드만으로 다음 방법을 배울 수 있습니다.

  • Express를 설치하세요.
  • 기본 서버를 설정하고,
  • 미들웨어를 사용하세요
  • 다양한 경로를 처리합니다.
  • 정적 파일 제공
  • JSON 데이터로 작업하세요.

Express는 웹 서버와 API를 재미있고 간단하게 구축할 수 있게 해주는 강력한 프레임워크입니다. 좀 더 익숙해지면 라우터, 오류 처리, 데이터베이스 통합과 같은 고급 기능을 탐색할 수 있습니다.


특급 여행을 위한 전문가 팁

  • nodemon 사용: 변경 사항이 있으면 서버를 자동으로 다시 시작합니다. npm install -g nodemon을 실행하고 node app.js 대신 nodemon app.js를 사용하세요.
  • 앱 구조화: 프로젝트가 성장함에 따라 경로와 컨트롤러를 별도의 파일로 구성하고 싶을 것입니다. 이렇게 하면 코드가 깔끔하고 관리하기 쉬워집니다.

이 가이드가 Express를 시작하는 데 도움이 되기를 바랍니다! 계속 실험해 보면 어느새 전문가처럼 멋진 웹 앱을 구축하게 될 것입니다.

즐거운 코딩하세요!

위 내용은 Express.js 기본: 초보자 가이드 - Node.js 튜토리얼 시리즈 - 10부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿