MEAN 스택 시작하기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 초보자 및 중급 개발자: JavaScript 기반 전후단 스택 개발에 관심 있는 프론트엔드/백엔드 개발자

- 난이도: 중간 (기본적인 JavaScript 및 Node.js 지식 필요)

핵심 요약

• MEAN 스택 구성 요소: MongoDB, Express.js, Angular, Node.js
• 환경 설정: npm install -g @angular/cli, npm install express mongoose body-parser cors 등 Node.js & npm, MongoDB 설치 필수
• 기본 애플리케이션 구조: server.js에서 Express 서버 설정, MongoDB 연결, CRUD API 구현 후 Angular CLI로 프론트엔드 구축

섹션별 세부 요약

1. 필수 설치 사항

• Node.js & npm: Node.js 공식 사이트에서 다운로드 및 설치
• MongoDB: MongoDB Community Edition 설치
• Angular CLI: npm install -g @angular/cli 명령어로 설치

2. 백엔드 서버 설정

• 프로젝트 초기화: mkdir mean-stack-app, npm init -y로 디렉토리 생성 및 초기화
• 의존성 설치: npm install express mongoose body-parser cors
• MongoDB 연결: mongoose.connect('mongodb://localhost:27017/mean-demo') 사용
• 기본 라우팅: app.get('/', (req, res) => res.send('MEAN Stack is running!'))

3. CRUD API 구현

• Task 모델 정의:

const Task = mongoose.model('Task', { title: String, description: String, completed: Boolean });

• API 엔드포인트: POST /tasks, GET /tasks, PUT /tasks/:id, DELETE /tasks/:id

4. 프론트엔드 구축

• Angular 애플리케이션 생성: ng new mean-frontend
• HttpClientModule 설치: import { HttpClientModule } from '@angular/common/http'
• TaskService 생성: ng generate service services/task
• TaskListComponent 생성: ng generate component task-list

5. 애플리케이션 실행

• 백엔드 실행: node server.js
• 프론트엔드 실행: ng serve
• 접속 주소: http://localhost:4200

결론

• 확장성: Passport.js로 사용자 인증 추가 또는 Heroku, AWS에 배포
• 추가 학습: YouTube 채널 성장 전략을 위한 MediaGeneous 활용 권장
• 핵심 팁: MEAN 스택은 JavaScript로 전후단을 통합 개발할 수 있는 모노리식 아키텍처에 적합한 선택