MERN 스택 시작하기: 초보자 가이드

MERN 스택이란 무엇입니까?

MERN은 웹 개발계의 어벤져스와 같습니다. 슈퍼히어로 팀이 함께 협력하여 멋진 웹 앱을 만드는 팀입니다. 분대는 다음과 같습니다.

• MongoDB: JSON과 같은 문서에 데이터를 저장하는 냉각 데이터베이스입니다. 금요일 밤 계획처럼 유연하게 진행하세요.
• Express.js: 서버측 개발을 쉽게 만들어주는 백엔드 마법사. 수술의 두뇌라고 생각해주세요.
• React.js: 동적이고 대화형 사용자 인터페이스 구축을 담당하는 멋진 꼬마입니다. 사용자들이 좋아할 것입니다.
• Node.js: 서버에서 JavaScript를 실행하는 조용한 강력한 엔진입니다. 필요할 때 항상 곁에 있어주는 친구 같아요.

이 둘이 함께하면 웹 개발이 원활하고 빠르며, 감히 말하면 재미있어집니다.

MERN을 선택하는 이유는 무엇입니까?

MERN이 시간을 투자하고 잠 못 이루는 밤을 보낼 가치가 있는 이유는 다음과 같습니다.

• 모든 것을 지배하는 하나의 언어: JavaScript는 어디에나 있습니다! 프런트엔드, 백엔드, 데이터베이스가 모두 하나의 언어로 제공됩니다. 마치 만능 리모컨을 갖고 있는 것과 같습니다.
• 확장성 목표: 작은 사이드 프로젝트부터 수십억 달러 규모의 차세대 앱까지 MERN은 전문가처럼 확장됩니다.
• 커뮤니티 파워: 막히셨나요? 구글해 보세요. MERN 커뮤니티에는 아마도 귀하의 문제에 대한 해결책이 있을 것입니다.
• 사용자 정의 가능한 AF: 오픈 소스 기술을 통해 원하는 대로 조정할 수 있습니다. 마음껏 뛰어놀아 보세요(하지만 정신을 차리세요).

환경 설정

MERN 걸작을 만들기 전에 먼저 무대를 준비해야 합니다. 체크리스트는 다음과 같습니다.

1. Node.js 및 npm: Node.js 공식 웹사이트에서 가져옵니다. 빵과 버터와 같아서 없으면 살 수 없습니다.
2. MongoDB: MongoDB 공식 홈페이지에서 다운로드하세요. 전문가 팁: NoSQL 용어에 겁먹지 마세요. 별거 아닙니다.
3. 코드 에디터: VS Code는 코드 에디터계의 넷플릭스입니다. 다들 잘 사용하고 계시네요.

상사처럼 설정을 확인하세요.

node -v
npm -v
mongo --version

첫 번째 MERN 앱

1. 프로젝트 초기화

새 프로젝트를 만드는 것부터 시작하세요. 당신의 아기라고 생각해주세요.

mkdir mern-app
cd mern-app
npm init -y

2. 백엔드 설정

백엔드 기능 설치:

npm install express mongoose dotenv

index.js 파일을 만들고 백엔드에 생명을 불어넣으세요.

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

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

// Middleware
app.use(express.json());

// Routes
app.get('/', (req, res) => {
  res.send('Welcome to the MERN Stack!');
});

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

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

3. 프런트엔드 설정

기어를 프런트엔드로 전환:

npx create-react-app client

React 서버 시작:

node -v
npm -v
mongo --version

4. 백엔드와 프런트엔드 연결

• Axios 라이브러리를 사용하여 절친한 ​​친구처럼 백엔드와 대화하세요.
• 어색한 침묵을 피하기 위해 React package.json 파일에 다음 프록시 설정을 추가하세요.

mkdir mern-app
cd mern-app
npm init -y

이제 프런트엔드와 백엔드가 원활하게 대화하는 것을 지켜보세요.

학습 자료

MERN 스택 강의 계획서는 다음과 같습니다(지루한 강의 제외).

• React 문서(React가 당신을 망칠 때를 위한).
• Express.js Docs(백엔드 치트 시트).
• MongoDB Docs(인형용 데이터베이스)
• Node.js Docs(JavaScript는 전 세계 또는 적어도 이 스택을 실행합니다).

초보자를 위한 팁

1. 간단하게 유지하세요: 차세대 Facebook을 바로 구축하지 마세요. 할 일 목록으로 시작하세요. 우리를 믿으세요.
2. 행동으로 배우기: 독서도 좋지만, 팔을 걷어붙이고 코딩하는 것보다 더 좋은 것은 없습니다.
3. Google은 당신의 BFF입니다: 막혔나요? 누군가 어딘가에서 이미 같은 문제에 직면한 적이 있습니다.
4. 자바스크립트 마스터: MERN의 중추입니다. 기본만 잘 지키면 나머지는 따라옵니다.

결론

MERN 스택은 웹 개발 세계로 향하는 황금 티켓입니다. 강력하고 초보자에게 친숙하며 작업하기 매우 재미있습니다. 그래서, 당신은 무엇을 기다리고 있습니까? 터미널을 켜고 코딩을 시작해 보세요!

모든 전문가는 한때 포기를 거부한 초보자였음을 기억하세요. 당신은 이것을 얻었습니다! ?

위 내용은 MERN 스택 시작하기: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!