초보자부터 전문가까지: 4로 첫 번째 풀스택 앱 구축

첫 번째 풀 스택 애플리케이션을 구축하는 것은 모든 개발자의 여정에서 기념비적인 이정표입니다. 이 가이드에서는 React, Node.js 및 MongoDB를 사용하여 작업 관리자 앱을 만드는 과정을 안내합니다. 그 과정에서 환경 설정부터 Vercel 및 Render에 앱 배포까지 모든 단계를 설명하겠습니다.

마지막에는 모든 기능을 갖춘 실시간 앱을 갖게 되며 더 복잡한 프로젝트도 처리할 수 있다는 자신감을 얻게 됩니다.

1. 전제 조건: 도구 준비 코드를 살펴보기 전에 개발 환경이 준비되었는지 확인하세요. 필요한 것은 다음과 같습니다.

필수 소프트웨어
Node.js(여기에서 다운로드):https://nodejs.org/fr
Node.js는 브라우저 외부에서 JavaScript를 실행할 수 있게 해주는 런타임입니다. 종속성을 처리하기 위해 내장된 패키지 관리자인 npm을 사용하려면 이를 설치하세요.

노드 -v && npm -v
설치 후 위의 명령을 실행하여 버전을 확인하세요.

Git(여기서 다운로드):https://git-scm.com/
Git은 코드 변경 사항을 추적하고 협업을 촉진하는 버전 제어 시스템입니다.

MongoDB Atlas(여기서 가입):https://www.mongodb.com/products/platform/atlas-database
Atlas는 초보자에게 적합한 무료 클라우드 호스팅 MongoDB 데이터베이스를 제공합니다.

Vercel CLI(설치 가이드):https://vercel.com/
Vercel은 React 프런트엔드를 빠르고 효율적으로 배포하기 위한 플랫폼입니다.

렌더링 계정(여기서 가입하세요):https://render.com/
Render는 백엔드 서비스 배포를 위한 강력한 환경을 제공합니다.

1. 프로젝트 설정

1단계: 프로젝트 구조 생성

터미널을 열고 앱용 디렉터리를 만듭니다.

mkdir 작업 관리자 앱 && cd 작업 관리자 앱

Git 저장소 초기화:

git 초기화

종속성을 관리하기 위해 package.json 파일을 설정합니다.

npm init -y

2단계: 종속성 설치

백엔드 종속성

백엔드는 Node.js와 Express로 구축되며 데이터 저장을 위해 MongoDB에 연결됩니다.

필수 패키지 설치:

npm install express mongoose dotenv cors
npm install --save-dev nodemon

• express: 서버측 애플리케이션 구축을 위한 프레임워크.
• mongoose: MongoDB용 객체 데이터 모델링(ODM) 라이브러리.
• dotenv: 환경변수 관리용.
• cors: 교차 출처 요청을 처리하는 미들웨어.
• nodemon: 개발 중에 자동으로 서버를 다시 시작하는 도구입니다.

프런트엔드 종속성

프런트엔드는 사용자 인터페이스 구축을 위해 React를 사용할 예정입니다.

React 앱 설정:

npx create-react-app 클라이언트

CD 클라이언트

React 디렉토리 내에 추가 라이브러리를 설치합니다.

npm 설치 axios 반응 라우터-dom

• axios: 백엔드 API에 HTTP 요청을 하기 위한 것입니다.
• react-router-dom: 애플리케이션의 경로를 관리합니다.

1. 백엔드 구축: Express 및 MongoDB를 사용한 API

1단계: 디렉토리 구조 생성

다음과 같이 프로젝트를 구성하세요.

npm install express mongoose dotenv cors
npm install --save-dev nodemon

2단계: Express Server 생성

server/ 디렉터리 내부에 server.js 파일을 만듭니다.

task-manager-app/
├── server/
│   ├── models/       # Contains database models
│   ├── routes/       # Contains API routes
│   ├── .env          # Stores environment variables
│   ├── server.js     # Main server file

3단계: 환경 변수 구성

server/ 디렉토리에 .env 파일을 생성하고 MongoDB를 추가하세요

연결 문자열:

MONGO_URI=

4단계: 몽구스 모델 정의

server/models/ 디렉터리 내부에 Task.js를 만듭니다.

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("Connected to MongoDB"))
  .catch(err => console.error(err));

// API Routes
app.use('/api/tasks', require('./routes/taskRoutes'));

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

5단계: API 경로 생성

server/routes/ 디렉터리 내부에 taskRoutes.js를 생성합니다.

const mongoose = require('mongoose');

const TaskSchema = new mongoose.Schema({
  title: { type: String, required: true },
  completed: { type: Boolean, default: false },
}, { timestamps: true });

module.exports = mongoose.model('Task', TaskSchema);

1. 프런트 엔드 구축: React

1단계: React 구성요소 설정

React 디렉토리를 다음과 같이 구성하세요.

const express = require('express');
const router = express.Router();
const Task = require('../models/Task');

// Fetch all tasks
router.get('/', async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
});

// Add a new task
router.post('/', async (req, res) => {
  const task = await Task.create(req.body);
  res.json(task);
});

// Update a task
router.put('/:id', async (req, res) => {
  const task = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(task);
});

// Delete a task
router.delete('/:id', async (req, res) => {
  await Task.findByIdAndDelete(req.params.id);
  res.json({ message: 'Task deleted' });
});

module.exports = router;

2단계: API에서 데이터 가져오기

src/comComponents/TaskList.js:

client/
├── src/
│   ├── components/
│   │   ├── TaskList.js
│   │   ├── AddTask.js
│   │   ├── Task.js
│   ├── App.js
│   ├── index.js

1. 배포: 앱을 라이브로 전환

렌더링 시 백엔드 배포

GitHub에 코드를 푸시하세요.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/api/tasks')
      .then(response => setTasks(response.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      {tasks.map(task => (
        <div key={task._id}>
          <h3>{task.title}</h3>
          <p>{task.completed ? 'Completed' : 'Incomplete'}</p>
        </div>
      ))}
    </div>
  );
};

export default TaskList;

렌더링 시 배포:

저장소를 연결하세요.
루트 디렉터리를 /server로 설정하세요.
환경 변수(예: MONGO_URI)를 추가합니다.

Vercel의 프런트엔드 배포

클라이언트 디렉토리로 이동하세요:

CD 클라이언트

배포:

베르셀(https://vercel.com/)

결론
축하해요! ? 첫 번째 풀스택 애플리케이션을 구축하고 배포했습니다. 이 프로세스를 마스터하면 더욱 복잡하고 영향력 있는 프로젝트를 만들 수 있습니다.

연락을 유지하세요
? GladiatorsBattle.com에서 더 자세히 알아보세요
? 트위터에서 우리를 팔로우하세요
? DEV.to에서 자세히 알아보세요
? CodePen의 대화형 데모

함께 놀라운 것을 만들어 봅시다! ?

위 내용은 초보자부터 전문가까지: 4로 첫 번째 풀스택 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!