개인 포트폴리오 웹사이트 및 관리자 플랜

카테고리

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

서브카테고리

• *웹 개발**

대상자

• 대상: MERN 스택(React, Node.js, Express, MongoDB)으로 웹 애플리케이션 개발에 관심 있는 개발자
• 난이도: 중간 (MERN 스택 기본 지식, Node.js, MongoDB, Express.js 경험 필요)

핵심 요약

• MERN 스택 기반: MongoDB, Express.js, React.js, Node.js를 활용한 반응형 포트폴리오 웹사이트 및 관리자 대시보드 구현
• 보안 기능: JWT 기반 인증, bcryptjs 암호화, helmet 보안 미들웨어, express-rate-limit API 보호
• CRUD 기능: 프로젝트, 블로그, 연락처 관리 시스템을 통해 내용 관리 기능 구현

섹션별 세부 요약

1. **프로젝트 개요**

• 공개 포트폴리오: 프로젝트, 기술 스택, 블로그 게시물, 연락처 시스템 포함
• 관리자 대시보드: 보안 기반의 프로젝트/블로그/메시지 관리 기능 제공
• 보안 기능: JWT 인증, 암호화, API 보호, 헤드라인 보안

2. **기술 스택 및 도구**

• 백엔드: Node.js(v14+), Express.js, MongoDB, Mongoose ODM
• 보안: bcryptjs (암호화), helmet (보안 헤더), express-rate-limit (API 보호)
• 프론트엔드: React.js, Bootstrap 5, Font Awesome, 커스텀 CSS

3. **디렉토리 구조**

• App/controller: 관리자/웹 관련 컨트롤러 분리
• models: 프로젝트, 블로그, 연락처, 사용자 모델 정의
• routes: 관리자 및 웹 API 라우팅 정의

4. **설치 및 실행**

• 환경 설정: .env 파일 생성 (PORT, DB URL, JWT_SECRET)
• 설치: npm install
• 실행: npm run dev 또는 npm start

5. **API 엔드포인트**

• POST /api/admin/register: 관리자 등록
• GET /api/projects: 프로젝트 목록 조회
• POST /api/blogs: 블로그 게시물 생성
• PUT /api/contact/:id: 연락처 메시지 상태 업데이트

6. **UI 구성 요소**

• 헤로 섹션: 소개 및 CTA 버튼
• 프로젝트 섹션: 동적 프로젝트 표시
• 블로그 섹션: 최신 게시물 표시
• 관리자 대시보드: 통계, 프로젝트/블로그 관리, 메시지 처리

7. **배포 및 고급 설정**

• 프로덕션 설정: Nginx 역프록시, PM2 프로세스 관리
• 시작 명령: pm2 start main.js --name "portfolio"
• 환경 변수: .env 파일을 통해 설정

8. **문제 해결**

• MongoDB 연결 오류: .env 파일의 DB URL 확인, mongod 실행
• 포트 충돌: .env의 PORT 값 변경 또는 lsof -ti:8000 | xargs kill -9 명령 사용
• JWT 토큰 문제: .env의 JWT_SECRET 값 확인, 브라우저 localStorage 지우기

결론

• MERN 스택 활용: 반응형 포트폴리오 웹사이트 및 관리자 대시보드 구현 가능
• 보안 강화: JWT 인증, 암호화, API 보호 기능을 반드시 적용
• 배포 준비: PM2와 Nginx를 사용해 프로덕션 환경에서 안정적으로 운영 가능