Node.js로 레벨 업: 내 요가 포즈 라이브러리에 서버 추가

Node.js로 레벨 업: 내 요가 포즈 라이브러리에 서버 추가

간단한 Yoga Pose Library를 구축하여 React에 익숙해진 후 몇 가지 백엔드 기능을 추가하여 프로젝트를 한 단계 더 발전시키고 싶었습니다. 이것이 바로 Node.js가 등장하는 이유입니다. Node.js는 서버 측에서 JavaScript 코드를 실행할 수 있게 해주는 런타임 환경입니다. 이번 블로그 게시물에서는 Yoga Pose Library 앱에 Node.js 서버를 추가하는 방법을 살펴보겠습니다. 이는 프런트엔드와 백엔드 기술을 모두 사용하여 작업하는 것을 연습할 수 있는 환상적인 방법이었고, 풀 스택 애플리케이션이 작동하는 방식에 대해 훨씬 더 깊이 이해할 수 있게 해주었습니다.

내 React 앱에 Node.js를 추가하는 이유는 무엇입니까?

Yoga Pose Library에 Node.js 서버를 추가한 주요 동기는 React 앱을 제공하고 나중에 데이터베이스에서 포즈 데이터를 검색하거나 사용자 인증을 처리하는 등의 고급 기능을 준비하기 위한 것이었습니다. 지금은 서버를 설정하고 서버에서 정적 파일(React 앱)을 제공하는 데 집중하고 싶었습니다. 이렇게 하면 나중에 쉽게 확장할 수 있는 방식으로 앱을 호스팅할 수 있습니다.

Node.js 시작하기

코드를 살펴보기 전에 Node.js를 설치하고 Node 패키지 관리자인 npm을 사용하여 프로젝트를 초기화했습니다. Node.js가 설치되어 있지 않은 경우 Node.js 웹사이트로 가서 최신 버전을 다운로드하면 됩니다. 완료되면 기본 Node.js 서버를 설정합니다.

npm init -y 
npm install express 

저는 Node.js용 미니멀리스트 웹 프레임워크인 Express.js를 사용하여 라우팅을 처리하고 정적 파일을 제공했습니다. 이와 같은 가벼운 애플리케이션에 적합합니다.

server.js 소개

이제 서버 설정을 담당하는 server.js를 살펴보겠습니다. 완성된 코드는 다음과 같습니다.

// Importing the Express framework
const express = require('express'); 
// Importing the path module to handle file paths
const path = require('path'); 
// Creating an Express App
const app = express(); 
// Setting the PORT
const PORT = process.env.PORT || 3000; 

// Serve static files from the React app app.use(express.static(path.join(__dirname, 'build'))); 

// For any request that doesn't match an API route 
// serve the React app's index.html. 
app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); 
}); 

// Start the server
app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
}); 

코드 분석

이제 server.js를 한 번에 한 단계씩 분석해 보겠습니다.

종속성 가져오기:

const express = require('express'); 
const path = require('path'); 

여기에서는 Node.js용 웹 프레임워크인 express와 파일 및 디렉터리 경로 작업에 도움이 되는 내장 Node.js 모듈인 path를 가져옵니다. 그러면 서버가 해당 파일을 올바르게 찾을 수 있습니다. 우리는 봉사하고 싶습니다.

빠른 애플리케이션 만들기:

const app = express();  

서버 요청과 응답을 처리할 Express 애플리케이션의 인스턴스를 만듭니다.

포트 설정:

const PORT = process.env.PORT || 3000; 

서버가 수신할 포트 번호를 정의합니다. 호스팅 서비스 배포에 유용한 환경 변수 PORT를 확인하고 포트가 설정되지 않은 경우 포트 3000으로 대체합니다.

정적 파일 제공:

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

이 줄은 Express가 React 앱의 컴파일된 파일이 포함된 빌드 디렉터리에서 정적 파일을 제공하도록 지시합니다.

포괄 경로:

app.get('*', (req, res) => { 
  res.sendFile(path.join(__dirname, 'build', 
'index.html')); 
}); 

이 포괄 경로는 이전 경로에서 처리되지 않은 모든 요청이 index.html로 응답하도록 보장합니다. 이는 클라이언트 측 라우팅이 React Router에서 올바르게 작동하는 데 중요합니다.

서버 시작:

app.listen(PORT, () => { 
console.log(`Server is running on port ${PORT}`); 
});

마지막으로 서버를 시작하고 정의된 포트에서 수신 대기하며 준비가 되면 콘솔에 메시지를 기록합니다.

결론: 미래 기능을 위한 견고한 기반

Yoga Pose Library 앱에 Node.js를 추가한 덕분에 앞으로 더 많은 고급 기능을 구축할 수 있는 탄탄한 기반이 생겼습니다. Node.js 서버에서 앱을 제공함으로써 앞으로 더 많은 동적 데이터, 사용자 입력, 심지어 실시간 기능까지 쉽게 처리할 수 있도록 설정했습니다. 이는 프런트엔드와 백엔드 기술을 결합하는 훌륭한 연습이었으며 계속 구축하면서 Node.js와 Express에 대해 더 많이 탐구하게 되어 기쁩니다.

다음 블로그 게시물에서는 데이터베이스를 사용하여 이 설정을 확장할 수 있는 방법에 대해 더 자세히 알아볼 계획이지만 지금은 Node.js를 직접 사용하면서 배운 내용이 너무 기쁩니다!

위 내용은 Node.js로 레벨 업: 내 요가 포즈 라이브러리에 서버 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!