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 : 코드 포맷팅, 세미콜론 누락, 기능 코드 변경이 없는 경우

코드 컨벤션

컴포넌트

rfc
rfcn

type ComponentProps = {
  name: string;
};

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

hook
```
export function useHook(){
	...
}
```
ESLint, Prettier 사용
상수, 변수 명명 규칙
1. 버튼
  1. button→btn
2. 배열
  1. users (s)
  2. user + List(단수명 + List)
콜백함수 → 화살표

주석

anchor?
Better Comments vscode 확장

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

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

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

리셋 버튼

🛠️ 채택한 개발 기술

프론트엔드 핵심 기술

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 활용에 대해 더 깊이 이해할 수 있었고, 즐거웠습니다!

송웅규

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

이가은

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

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

이성훈

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

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

조천산

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

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

Name		Name	Last commit message	Last commit date
Latest commit History 774 Commits
.github		.github
.vscode		.vscode
public		public
src		src
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

prgrms-fe-devcourse/NFE1-1-3-DEVIEW

Folders and files

Latest commit

History

Repository files navigation

DEVIEW

Production

Figma

⭐ Deview ReadMe ⭐

♻️ 개발 환경

개발 스택

협업 도구

인프라 & 도구

📃 컨벤션

🛠️ 채택한 개발 기술

프론트엔드 핵심 기술

데이터 관리

개발 환경 경험

🌴 브랜치 전략

주요 특징

장점

🏗️ 프로젝트 구조

🙋‍♂️ 역할 분담

📅 개발 기간 및 작업 관리

⏰ 개발 기간

📋 이슈 관리

🧐 신경 쓴 부분

📄 페이지별 기능

[MainPage]

[PostPage]

[RankPage]

[SearchPage]

[LoginPage]

[RegisterPage]

[PostCreatePage]

[PostDetailPage]

[PostUpdatePage]

[MyPage]

[Alarm]

[ErrorPage]

🔧 트러블 슈팅

Back-End

🎯 개선 목표

📝 프로젝트 후기

민정아

송웅규

이가은

이성훈

조천산

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 5

Languages

Packages