DEVIEW

Deview는 개발자, 취준생들을 위한 코드리뷰 웹사이트로, React와 TypeScript를 기반으로 구축된 반응형 웹 애플리케이션입니다.

Production

Deview

Figma

DEV 3차 DEVIEW (Copy)

⭐ Deview ReadMe ⭐

• 배포 URL : https://nfe-1-1-3-deview.vercel.app/
• Test ID : test1234
• Test PW : test1234

♻️ 개발 환경

개발 스택

프론트엔드

백엔드

GitHub - shlee9999/deview-backend: deview 프로젝트의 backend 레포지토리

협업 도구

인프라 & 도구

배포 환경

디자인 협업

📃 컨벤션

---

• 커밋 컨벤션

  • Feat: 새로운 기능 추가
  • Fix: 버그 수정
  • Docs: 문서 수정
  • Refactor: 코드 리펙토링
  • Chore: 빌드 업무 수정, 패키지 매니저 수정
  • Style : 코드 포맷팅, 세미콜론 누락, 기능 코드 변경이 없는 경우

• 코드 컨벤션

  1. 컴포넌트

     1. rfc
     2. rfcn

     type ComponentProps = {
       name: string;
     };
     
     export const Component = ({ name }: ComponentProps) => {
       return <div>Component</div>;
     };

  2. hook

     export function useHook(){
     	...
     }

  3. ESLint, Prettier 사용

  4. 상수, 변수 명명 규칙

     1. 버튼
        1. button→btn
     2. 배열
        1. users (s)
        2. user + List(단수명 + List)

  5. 콜백함수 → 화살표

  6. 주석

     1. anchor?

     2. Better Comments vscode 확장

     3. 기본 주석 색상 바꾸기 - settings.json에 다음 추가

         "editor.tokenColorCustomizations": {
            "textMateRules": [
              {
                "scope": ["comment", "comment punctuation.definition.comment"],
                "settings": {
                  "foreground": "#EFDC05",
                  "fontStyle": ""
                }
              }
            ]
          },

  7. 폴더 네이밍

     1. 컴포넌트 파일 명명규칙
     2. 컴포넌트 이외의 파일 명명규칙
     3. 컴포넌트 폴더 - 파스칼
     4. 최상위 폴더 - 카멜

  8. 이벤트핸들러 네이밍

     리셋 버튼

🛠️ 채택한 개발 기술

---

프론트엔드 핵심 기술

TailwindCSS

• 직관적인 유틸리티 클래스로 빠른 UI 개발 가능
• 커스터마이징이 용이하고 번들 사이즈 최적화
• 반응형 디자인 구현이 편리
• 컴포넌트 단위의 스타일링으로 재사용성 향상

Zustand

• 간단하고 직관적인 상태 관리 라이브러리
• Redux보다 적은 보일러플레이트 코드
• Flux 패턴을 따르는 예측 가능한 상태 흐름
• TypeScript 지원이 우수하며 러닝커브가 낮음

데이터 관리

React Query

• 서버 상태 관리의 효율적 처리
• 주요 기능:
  • 데이터 캐싱 및 자동 갱신
  • 신선한 데이터 유지(Fresh & Stale)
  • 옵티미스틱 업데이트 지원
  • 무한 스크롤/페이지네이션 구현 용이
  • 백그라운드 데이터 업데이트

개발 환경 경험

• ESLint & Prettier: 일관된 코드 스타일 유지
• TypeScript: 타입 안정성 확보
• Vite: 빠른 개발 서버 및 빌드 성능

🌴 브랜치 전략

GitHub Flow를 채택한 주요 이유와 특징을 체계적으로 설명하겠습니다.

선택 이유

• 짧은 개발 기간에 최적화된 단순하고 직관적인 워크플로우
• 신속한 배포와 효율적인 협업

주요 특징

브랜치 구조

• 단일 메인 브랜치(main)를 중심으로 운영
• 기능 개발을 위한 피처 브랜치 생성 및 빠른 병합
• 브랜치 전략이 단순하여 초기 학습 곡선이 낮음

협업 프로세스

• Pull Request를 통한 코드 리뷰 시스템
• 자동화된 테스트와 배포 프로세스 지원
• 지속적인 피드백과 개선이 가능한 구조

장점

• 유연하고 가벼운 워크플로우
• 빠른 피드백과 지속적인 개선

🏗️ 프로젝트 구조

---

• Front-End

  📦src
   ┣ 📂assets            # 정적 자원
   ┣ 📂components        # 컴포넌트
   ┃ ┣ 📂Common         # 공통 컴포넌트
   ┃ ┣ 📂LoginPage      # 로그인 페이지 관련
   ┃ ┣ 📂MainPage       # 메인 페이지 관련
   ┃ ┣ 📂MyPage         # 마이 페이지 관련
   ┃ ┣ 📂PostCreatePage # 포스트 생성 관련
   ┃ ┣ 📂PostDetailPage # 포스트 상세 관련
   ┃ ┣ 📂PostPage       # 포스트 목록 관련
   ┃ ┣ 📂RankPage       # 랭킹 페이지 관련
   ┃ ┗ 📂RegisterPage   # 회원가입 관련
   ┣ 📂constants         # 상수
   ┣ 📂customTypes      # 타입 정의
   ┣ 📂hooks            # 커스텀 훅
   ┣ 📂pages            # 페이지 컴포넌트
   ┣ 📂services         # API 서비스
   ┃ ┣ 📂auth          # 인증 관련
   ┃ ┣ 📂comment       # 댓글 관련
   ┃ ┣ 📂notification  # 알림 관련
   ┃ ┣ 📂post          # 게시글 관련
   ┃ ┣ 📂report        # 신고 관련
   ┃ ┗ 📂user          # 사용자 관련
   ┣ 📂stores           # 상태 관리
   ┣ 📂utils            # 유틸리티
   ┗ 📜App.tsx          # 앱 진입점
  

• Back-End

  📦src
   ┣ 📂.vscode
   ┃ ┗ 📜settings.json
   ┣ 📂config
   ┃ ┣ 📜database.js
   ┃ ┣ 📜server.js
   ┃ ┗ 📜socket.js
   ┣ 📂controllers
   ┃ ┣ 📜authController.js
   ┃ ┣ 📜commentController.js
   ┃ ┣ 📜notificationController.js
   ┃ ┣ 📜postController.js
   ┃ ┣ 📜reportController.js
   ┃ ┗ 📜userController.js
   ┣ 📂middleware
   ┃ ┣ 📜authMiddleware.js
   ┃ ┣ 📜commentMiddleware.js
   ┃ ┣ 📜corsMiddleware.js
   ┃ ┣ 📜index.js
   ┃ ┗ 📜postMiddleware.js
   ┣ 📂models
   ┃ ┣ 📜Comment.js
   ┃ ┣ 📜Like.js
   ┃ ┣ 📜Notification.js
   ┃ ┣ 📜Post.js
   ┃ ┣ 📜Report.js
   ┃ ┣ 📜Scrap.js
   ┃ ┣ 📜Thumb.js
   ┃ ┣ 📜User.js
   ┃ ┗ 📜View.js
   ┣ 📂routes
   ┃ ┣ 📜authRoutes.js
   ┃ ┣ 📜commentRoutes.js
   ┃ ┣ 📜index.js
   ┃ ┣ 📜notificationRoutes.js
   ┃ ┣ 📜postRoutes.js
   ┃ ┣ 📜reportRoutes.js
   ┃ ┗ 📜userRoutes.js
   ┣ 📂utils
   ┃ ┗ 📜getPaginated.js
   ┣ 📜.env
   ┣ 📜.gitignore
   ┣ 📜app.js
   ┣ 📜package-lock.json
   ┗ 📜package.json
  

🙋‍♂️ 역할 분담

---

👩‍💻 민정아	👨‍💻 송웅규	👩‍💻 이가은	👨‍💻 이성훈	👨‍💻 조천산
담당 페이지 - 검색 페이지 - 랭킹 페이지 주요 기능 - 헤더 - 알림 - 검색 및 검색 목록 - 랭킹 목록	담당 페이지 - 메인 페이지 - 게시글 목록 - 유저 게시글 목록 주요 기능 - 반응형 슬라이드 메인배너 - 게시글 리스트 공용 컴포넌트 - 스켈레톤 UI	담당 페이지 - MyPage - Footer 주요 기능 - UserProfile - UserPosts - UserComments - UserScraps - UserInfo - CodeViewer	Front-End 담당 페이지 - 로그인 페이지 - 회원가입 페이지 - 관리자 페이지 - 에러 페이지 Back-End - 모든 백엔드 전임	담당 페이지 - 게시물 작성 페이지 - 게시물 상세 페이지 주요 기능 - 게시글 CRUD - 댓글 CRUD - 무한 스크롤

📅 개발 기간 및 작업 관리

---

⏰ 개발 기간

• 전체 개발 기간 : 24/10/22 ~ 24/11/06
• UI 구현 : 24/10/22~24/10/25
• 기능 구현 : 24/10/25 ~ 24/11/06

📋 이슈 관리

• GitHub Projects와 Issues를 사용하여 진행 상황을 공유
• 버그 리포트, 기능 요청 등 목적에 따른 이슈 템플릿 구성

🧐 신경 쓴 부분

---

optimistic update

📄 페이지별 기능

---

[MainPage]

• 게시물 조회
  • 배너
    • 가장 조회수가 많은 게시물
    • 오늘 올린 게시물 중 조회수가 가장 많은 게시물
    • 답변의 좋아요가 가장 많이 달린 리뷰어
  • 가장 좋아요가 많이 달린 인기 게시글 3개
  • 답변이 달리지 않은 질문 2개
  • 최신 게시글
  • 에러/로딩 대체 UI

[PostPage]

• 게시물 리스트 조회
  • 정렬 토글버튼을 통한 인기/최신 게시글 변경
  • 무한스크롤
  • 에러/초기 로딩 대체 UI

[RankPage]

• 유저 랭킹
  • 해당 유저가 단 댓글에 추천수가 많은 순으로 순위 결정
  • 유저 ID, 속한 그룹, 추천수, 게시글 보기
  • 게시글 보기는 해당 유저가 작성한 게시글을 볼 수 있음

[SearchPage]

• 검색 기능
  • 검색어를 입력하거나 필터를 선택해 검색할 수 있음
  • 필터만 선택 가능하고 최대 3개 선택할 수 있음
  • 검색 목록 클릭하면 해당 PostDetailPage로 이동

[LoginPage]

• 로그인 기능
  • 아이디
  • 비밀번호

[RegisterPage]

• 회원가입 기능
  • 아이디
  • 비밀번호
  • 이름
  • 그룹

[PostCreatePage]

• 게시글 작성
  • 게시글 제목
  • 게시글 내용
  • 관련 내용에 대한 언어 및 버전 정보
    • • • 버튼으로 추가, 삭제
  • 질문하고 싶은 코드 작성
    • Quill 에디터를 이용해 코드의 경우 하이라이팅

[PostDetailPage]

• 게시글 세부
  • 게시글 제목
  • 작성일, 작성자, 언어 및 버전 정보
  • 내용 및 코드
  • 본인이 작성한 게시글은 수정 및 삭제
  • 게시글에 좋아요, 스크랩, 신고
  • 댓글 기능
  • 댓글 추천 가능
  • 본인이 작성한 댓글 수정 및 삭제

[PostUpdatePage]

• 게시글 수정
  • 게시글 제목, 내용, 언어 및 버전, 코드 수정

[MyPage]

• 마이페이지
  • 프로필 (회원가입하면 랜덤 지정)
  • 이름(그룹)
  • 내 게시글 - 내가 작성한 게시글
  • 내 댓글 - 내가 작성한 댓글
  • 스크랩 - 내가 스크랩한 글
  • 내 정보 - 비밀번호 입력 시 내 정보 열람 및 수정

[Alarm]

• 내 게시물에 댓글 달릴 경우
• 내 게시물에 추천
• 신고 5회 이상
• 삭제 가능, 전체 확인 가능

[ErrorPage]

• 에러 페이지

🔧 트러블 슈팅

---

• React Quill

  • 저장한 데이터를 받아오는 과정에서, 데이터 손실
  • 에디터가 데이터 타입 변환 과정에서 데이터 구조를 바꾸면서 기존 데이터의 손실이 일어남
  • CodeViewer에서 react quill을 read only 로 보여줬으나, 이러한 문제로 react-quill없이 그냥 html 태그로 불러오는 방식으로 변환
    • 이때 highlight.js를 사용해서 highlighter 적용

• 존재하지 않는 속성에 접근하거나 API가 에러를 반환할 경우 페이지 전체가 다운되는 문제

  • 옵셔널 체인을 통해 존재하지 존재여부를 미리 검사
  • react-error-boundary를 도입해 에러발생 시 fallback 컴포넌트로 대체되도록 변경

Back-End

• MongoDB 용량 제한 → 이미지 업로드 제한 → boring-avatar 사용하여 DB 차지 X
• 좋아요, 스크랩만 해도 updatedAt 변경됨 → timestamp: false
• MongoDB timestamp가 UTC 시간으로만 저장됨 → 모든 스키마의 createdAt, updatedAt의 getter에 moment 라이브러리 사용하여 해결

🎯 개선 목표

---

• 소속 기능을 확대 및 세분화
  • 소속 집단 뿐 아니라 소속 회사/학교를 추가
  • ‘블라인드’와 유사한 인증제로 변경
  • 검증된 유명한 회사의 개발자에게 코드리뷰를 받을 수 있는 기회
• 특정 유저에게 코드리뷰 신청
  • 유명 회사에 소속한 개발자에게 직접 리뷰를 신청할 수 있는 방식
  • 리뷰어 지정시 신청비가 발생 : 기본적으로 리뷰어에게 전달되며 약간의 수수료를 통한 수익구조
• 업적 시스템
  • 리뷰어의 활동에 따른 업적(미션) 진척도 상승
  • 일정 수치 달성 시 보상을 통해 게시글/댓글에서 자신의 프로필을 장식할 수 있는 뱃지,칭호를 획득가능
  • 뱃지를 통해 간접적으로 리뷰어의 답변 퀄리티와 신뢰도를 알 수 있음
• 더 세분화된 정렬 및 필터링
• 더 세분화된 게시글/댓글 평가 기능
• 게시글 임시 저장
• 대댓글 기능
• 오랫동안 답변을 못 받은 게시글을 위한 AI 답변
• 깃허브 파일링크를 본문에 첨부하면 해당 내용이 코드박스로 보여지는 기능

📝 프로젝트 후기

---

민정아

React Query 활용에 대해 더 깊이 이해할 수 있었고, 즐거웠습니다!

송웅규

협업 경험을 쌓을 수 있는 좋은 프로젝트였습니다. 지금까지 프로젝트 중 가장 많은 도움이 될 것 같습니다.

이가은

같이 개발하는 동안 너무 재밌었고 많이 배웠습니다! 😄

팀원분들 덕분에 크게 막히는 부분 없이 잘 마무리할 수 있었던 것 같습니다!

이성훈

주로 백엔드를 맡게 되어 모르는 부분이 많았지만 그만큼 많이 공부할 수 있었던 것 같고,

프론트는 팀원분들 모두 열심히 해주셔서 짧은 시간 내에 완성할 수 있었던 것 같습니다!

조천산

팀원들 덕분에 짧은 기간임에도 완성할 수 있었다고 생각합니다.

분위기도 너무 좋았고 즐겁게 개발한다는 것이 어떤 건지 알게된 시간이었습니다!