제목

카테고리

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

서브카테고리

웹 개발

대상자

초보 웹 개발자, HTML/CSS/JavaScript 기초 지식이 있는 사람

난이도: 초보자 중심, 기술적 개념 설명 포함

핵심 요약

• MERN 스택 (MongoDB, Express, React, Node.js) 사용, React 생략하여 Vanilla JavaScript 기반으로 구현
• 프론트엔드: HTML5, CSS3, Vanilla JS로 반응형 디자인 및 CRUD 기능 구현
• 백엔드: Node.js + Express로 인증/인가 기능과 MongoDB 연동 구현, JWT 기반 인증 사용
• 배포: Netlify(프론트엔드) + Heroku(백엔드) 사용
• Git 사용으로 버전 관리 및 .gitignore 설정 포함

섹션별 세부 요약

1. 개발 환경 설정

• 필수 도구 설치: Visual Studio Code, Node.js, Git, MongoDB Atlas
• 프로젝트 초기화: git init, .gitignore 파일 생성
• 터미널 명령어: node --version, npm --version, git --version으로 설치 확인

2. 프론트엔드 구현

• HTML5 구조: frontend/index.html에서 세마포트 HTML 구조 정의
• CSS 스타일: frontend/styles.css에 반응형 디자인 및 CSS3 효과 적용
• JavaScript 로직: frontend/script.js에서 TaskManager 클래스로 CRUD 및 인증 기능 구현
• API 통신: fetch() 사용, JWT 인증 헤더 포함

3. 백엔드 구현

• Express 서버: backend/server.js에서 express, mongoose, cors 미들웨어 사용
• 데이터베이스 모델: User.js, Task.js에서 Mongoose 스키마 정의 및 bcrypt로 비밀번호 해싱
• 인증 라우트: auth.js에서 JWT 토큰 생성 및 비밀번호 해싱 처리
• 환경 변수: .env 파일에서 MONGODB_URI, JWT_SECRET 설정

4. 테스트 및 배포

• 로컬 테스트: MongoDB Atlas 연결 후 API 테스트 수행
• 배포: Netlify에 프론트엔드 배포, Heroku에 백엔드 배포
• 환경 설정: Heroku에서 PORT, MONGODB_URI, JWT_SECRET 설정

결론

• MERN 스택을 기반으로 한 프로젝트는 초보자에게 적합하며, Vanilla JS 사용으로 복잡도를 낮춤
• JWT 인증, MongoDB 연동, 배포 자동화를 실제 예제로 적용 가능
• Git 사용과 환경 변수 관리는 실무 개발에 필수적, 예제 코드를 기반으로 연습 권장