사용 기술
다크모드 메인화면/ 라이트모드 메인화면
알림기능/ 마이페이지
모바일 메인페이지 / 모바일 마이페이지
42 서울 내 교육생들이 자유로운 의견을 주고받을 수 있는 익명 커뮤니티 게시판.
폴더 구조
├── App.tsx
├── api
├── app - redux 사용을 위한 hooks, store.
├── assets
├── components - Atomic Pattern
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ ├── templates
│ └── utils - Router, Provider
├── constants
├── features - redux slice
├── hooks
├── index.tsx
├── pages
├── styles
├── types
└── utils프로젝트 관련 개발 내용
-
TypeScript 적용
-
Styled-Component를 이용해서 다크/라이트 모드 개발.
- theme 를 적용하여 공통적인 스타일을 관리.
-
메인화면 기능 개발.
- 메인화면에서 메인화면으로 스와이프를 이용하여 화면전환 가능.
- 무한스크롤.
-
알림 기능 개발.
-
글 작성 수정 기능 개발.
-
댓글, 답글 기능 개발.
- 댓글, 답글 작성시 포커싱 기능
- 댓글에 링크 작성시 파싱하여 하이퍼링크로 적용되는 기능.
-
좋아요 기능 개발.
- 좋아요 버튼이 연속으로 클릭 되는 문제점 해결을 위해서 Timer 를 적용.
-
RTK-Query를 적용
- 1.RTK-Query
게시판의 경우 사용자들 간에 데이터가 공유되므로 사용자가 모르는 사이에 업데이트가 이루어짐.
- 실시간으로 데이터가 fetching 되어야 함.
- 데이터가 업데이트될 때 비동기적으로 API가 필요.
이에 따라서 해당 페이지에 접속할 때마다 API로 업데이트된 데이터가 필요하다고 생각 → RTK-Query를 이용
- Auth 관련 로직을 RTK-Query의 prepareHeader 를 이용 하여 처리.
-
아토믹 디자인 패턴 적용
- 컴포넌트의 재사용성을 늘리기 위해서 아토믹 디자인 패턴을 적용.
- 최소단위로 나누어 재사용하여 사용.
- 폴더 구조
- components - Atomic Pattern
│ ├── atoms (제일 작은 최소단위) │ ├── molecules (atom + atom) │ ├── organisms (도메인 관련 정보가 포함됨) │ ├── templates (뼈대)
-
AWS S3, AWS CloudFront를 이용하여 서버구축, 배포
- Github Actions을 이용한 자동 배포 CI/CD 적용.