Turtleneck Blog Project

프로젝트 소개

Turtleneck Blog는 개발자들을 위한 테크 블로그 플랫폼입니다. 사용자는 마크다운 에디터를 통해 쉽게 글을 작성하고, 다른 사용자들과 좋아요 및 댓글을 통해 피드백과 소통할 수 있습니다. 이 플랫폼은 전문적인 기술 포스트를 쉽게 공유하고, 코드 및 기술에 대해 논의할 수 있는 공간을 제공합니다. 블로그는 단순한 정보 공유를 넘어서, 개발자 간의 소통과 피드백을 통해 서로의 성장을 도울 수 있는 커뮤니티를 지향합니다. 사용자는 포스트를 작성하고, 다른 사용자로부터 피드백을 받음으로써 자신의 기술적 역량을 키우고 더 나은 글을 작성하는 기회를 얻게 됩니다.

주요 기능

• 마크다운을 통한 간편한 글 작성: react-markdown-editor-lite와 markdown-it을 사용해 쉽게 포스트를 작성할 수 있습니다. 마크다운을 이용하면 코드 블록, 표, 리스트 등 다양한 형식을 간편하게 작성할 수 있으며, 직관적인 편집 경험을 제공합니다.
• 좋아요 및 댓글 기능: 각 게시물에 대해 좋아요와 댓글을 남길 수 있어, 사용자 간의 활발한 소통이 가능합니다. 이를 통해 작성자는 자신의 포스트에 대한 피드백을 직접 확인하고, 이를 바탕으로 글의 품질을 높일 수 있습니다.
• 관리자 기능: 카테고리 관리, 댓글 관리, 블로그 정보 관리 기능을 통해 블로그를 효율적으로 관리할 수 있습니다. 관리자는 사용자 활동을 모니터링하고, 원활한 블로그 운영을 위해 콘텐츠를 유지하고 관리할 수 있습니다.

기술 스택

• 프론트엔드: React, Sass, react-markdown-editor-lite, markdown-it을 사용하여 사용자 친화적인 인터페이스와 스타일을 구현했습니다. 반응형 디자인을 적용하여 다양한 기기에서 최적의 사용자 경험을 제공합니다.
• 백엔드: Next.js, NextAuth(JWT 사용), Mongoose, Bcrypt를 사용하여 데이터 관리와 인증 기능을 강화했습니다. 효율적인 서버 사이드 렌더링을 통해 성능을 최적화하고, JWT를 사용한 보안 강화를 도모했습니다.
• 보안: 인증 및 보안 강화를 위해 next-auth와 Bcrypt를 사용하였습니다. 비밀번호는 안전하게 해싱되어 저장되며, 사용자 데이터는 보호됩니다.
• 데이터베이스: MongoDB, Mongoose를 사용한 DB 연결 및 설정을 통해 확장성 높은 데이터 구조를 지원합니다. 데이터베이스는 게시글, 사용자, 댓글 등을 효율적으로 관리할 수 있도록 설계되었습니다.

폴더 구조

NFE1_2_3_TurtleNeck/
├── client/
│   ├── public/
│   │   ├── images/
│   ├── src/
│   │   ├── app/
│   │   │   ├── admin/
│   │   │   ├── api/
│   │   │   └── auth/
│   │   │       └── [...nextauth]/route.js
│   │   ├── components/
│   │   │   ├── Footer/
│   │   │   ├── Navigation/
│   │   │   ├── PostCard/
│   │   │   └── MainPostCard/
│   │   ├── utils/
│   │   │   └── api.js
└── server/
    ├── app/
    │   ├── api/
    │   │   ├── admin/
    │   │   ├── auth/
    │   │   ├── category/
    │   │   ├── comment/
    │   │   ├── like/
    │   │   ├── post/
    │   │   └── upload/
    │   └── db/
    │       ├── models/
    │       └── dbConnect.js   
    └── public/
        └── uploads/

위와 같은 폴더 구조를 통해 클라이언트와 서버 코드가 명확하게 분리되어 있으며, 유지 보수와 기능 확장이 용이하도록 설계되었습니다. 각 폴더는 역할에 따라 세분화되어 있으며, 파일 경로를 직관적으로 알 수 있습니다.

프로젝트 진행 과정

1. 기획/설계 (10/14 - 10/23): 주제 선정, 요구사항 정의서 작성, 프로젝트 구성도, 클래스 및 시퀀스 다이어그램 작성. 이 단계에서는 사용자의 요구를 정확히 분석하고, 이를 토대로 프로젝트의 전반적인 구조를 설계했습니다. 모든 팀원이 프로젝트의 목표와 역할을 명확히 이해할 수 있도록 다양한 도구를 활용해 문서를 작성했습니다.
2. 개발/병합 (10/23 - 11/05): 공통 컴포넌트 구현, 페이지 화면 구현, 인증, 인가, 보안 처리 및 DB 설정을 진행했습니다. 각 팀원이 맡은 역할에 따라 기능을 구현하고, 이를 병합하여 전체적인 시스템의 동작을 확인했습니다. 버그 수정 및 코드 리뷰를 통해 품질을 높였습니다.
3. 종료/발표 (11/05 - 11/06): 최종 코드 병합 및 발표 준비. 프로젝트의 마지막 단계로, 최종적인 버그를 수정하고 안정성을 확보했습니다. 발표 자료를 준비하여 프로젝트의 결과물과 과정을 공유했습니다.

팀 구성

• 프론트엔드: 이동인, 김혜준
  • 상세페이지, 카드 컴포넌트, 메인페이지, 관리자 CSS 구현
  • 사용자의 요구에 맞는 인터페이스를 구축하고, CSS를 통해 사용자 경험을 개선하였습니다.
• 백엔드: 정해량, 최수진
  • 보안 설정, 클라이언트 API, 이미지 처리, 데이터베이스 설정
  • 데이터의 안전한 저장과 효율적인 관리를 위해 다양한 백엔드 기술을 활용하였습니다.

페이지 구성

• 메인 페이지: 네비게이션, 블로그 이름 & 설명, 최신 게시글, 게시글 카드 목록, 페이지네이션, 푸터로 구성되어 있습니다. 메인 페이지는 블로그의 첫 인상을 결정짓는 중요한 요소로, 사용자 친화적인 디자인과 최신 정보 제공을 목표로 했습니다.
• 상세 페이지: 게시글 제목, 메타 데이터, 게시글 상세 내용, 댓글 기능을 포함하여 사용자가 포스트를 깊이 있게 이해하고 소통할 수 있도록 설계되었습니다. 댓글 기능을 통해 사용자는 직접적인 의견을 남길 수 있습니다.
• 게시글 작성/수정 페이지: 카테고리, 제목, 태그, 썸네일 입력 및 마크다운 에디터 기능을 제공하여, 사용자가 손쉽게 게시글을 작성하고 수정할 수 있도록 돕습니다. 미리보기 기능을 통해 작성 중인 글의 형태를 즉시 확인할 수 있습니다.
• 관리 페이지: 블로그 정보 관리, 카테고리 관리, 댓글 관리 기능이 있으며, 관리자는 이를 통해 블로그의 콘텐츠와 사용자 활동을 체계적으로 관리할 수 있습니다.

설치 및 실행 방법

1. 저장소를 클론합니다.

   git clone [저장소 URL]

2. 클라이언트 및 서버 디렉토리로 이동하여 필요한 패키지를 설치합니다.

   cd client && npm install
   cd ../server && npm install

3. 환경 변수 파일을 설정합니다 (.env.local 파일).
4. 개발 서버를 실행합니다.

   npm run dev

5. 서버와 클라이언트가 성공적으로 연결되면, 로컬 환경에서 프로젝트를 테스트할 수 있습니다. 각 기능이 의도한 대로 작동하는지 확인하고, 문제가 발생할 경우 디버깅을 통해 해결합니다.

라이선스

MIT License를 따릅니다. 누구나 자유롭게 이 프로젝트를 사용하고 수정할 수 있으며, 이에 대한 제약 사항은 MIT 라이선스에 명시되어 있습니다.

기여 방법

기여를 원하시는 분은 이슈를 생성하거나 풀 리퀘스트를 제출해 주세요. 항상 환영합니다! 프로젝트에 기여함으로써 더 나은 플랫폼을 함께 만들어 나갈 수 있습니다. 버그 신고, 기능 제안, 코드 개선 등 다양한 형태의 기여가 가능합니다.