Salon
Blog For Writer
By RIDING-BOM
CONTENTS
- SALON PROJECT
- STACK
- PROJECT STRUCTURE
- MVP
- REVIEW
- TO DO
Salon project
개인 문학 블로그 개발 프로젝트
By TEAM RIDING BOM
@ NA.YOUN.HO
@ CHOI.YONG.HUN
@ HAN.BYEONG.GUK
STACK
FRONT-END
HTML5
CSS3
JAVASCRIPT
REACT with TYPESCRIPT
BACK-END
FIREBASE
(Authentication, Firestore, Storage)
BUILD-TOOL
CRA
(Webpack, Babel)
STATE-MANAGEMENT
REDUX
(React-Redux, Redux-Thunk)
LIBRARY
ROUTER (React-Router)
STYLED-COMPONENT
STYLED-RESET
DRAFT JS
DOMPURIFY
REACT-COLOR
REACT-SLICK
OTHER-TOOLS
GIT
GITHUB
FIGMA
PROJECT STRUCTURE
---src
+---App
+---components
+---constant
+---containers
+---customHook
+---essets
+---fb
+---modules
+---pages
+---redux
---GlobalStyle.styled.tsx
---index.tsx
MVP
공통 작업
- Redux를 활용한 상태 관리
- Firebase를 위한 API 구성
MVP
@ NA.YOUN.HO
- 헤더 UI 설계 - 작가정보, Navigation 아이콘
- 댓글 CRUD
MVP
@ CHOI.YONG.HUN
- 게시글 작성 / 수정 페이지
- 게시글 리스트 컨테이너
- 블로그 정보 설정 페이지
- 서브 헤더 UI
- 헤더 컨테이너 조건부 렌더링
MVP
@ HAN.BYEONG.GUK
- 로그인 / 회원가입
- 게시글 읽기 페이지
- 게시글 삭제
- 게시판 페이지 / 페이지네이션
- 캐러셀
- 좋아요 / 좋아요 북마크 페이지
- 스피너
project demo
Review
@na.youn.ho
담당 부분
- 헤더 UI 설계
- 댓글 기능 구현
@na.youn.ho
1. 헤더 UI 설계
작가 정보(이름, 소개글, 이미지)
-> InputSalonInfo 작성 후 firestore에서 데이터 올리고 내리는 로직 작성
Navigation 아이콘
-> svg로 올린 이미지 파일를 Logo 컴포넌트로 재사용 가능하게 만든 후 사용
@na.youn.ho
느낀 점
React, Redux, Firebase(Firestore), component의 이해력 부족
-> 프로젝트를 진행하기 어렵다고 판단
해결책
React, Redux, Firebase(Firestore)를 이용한 TodoList 코딩
-> 3일간 진행
@na.youn.ho
2. 댓글 기능 구현
각 게시글마다 댓글 기능
댓글 CRUD
sign in 후 댓글 활성화를 위한 댓글 조건부 렌더링
느낀 점
CRUD 기능들을 설계하며 기본적인 프론트엔드 개발자의 역할 이해
@na.youn.ho
총평
뭐든지 상태!! 상태에서 시작해서 상태로 끝
@choi.yong.hun
담당 부분
- Write / Update Page
- Post List Container
- Info Setting Page
- Sub Header UI 구현 및
Header Container 조건부 렌더링
@CHOI.YONG.HUN
1. Write / update page
게시글 작성, 수정에 대한 페이지를 구현하였다.
배경 색상 설정은 ColorPicker 라이브러리를 사용, 배경색에 따른 글자색을 보색으로 설정하여 가시성을 높였다.
배경 이미지 업로드 시 firebase Storage에 업로드된다.
에디터는 Draft JS를 사용하였다.
@CHOI.YONG.HUN
1. Write / update page 후기
에디터 라이브러리 텍스트 데이터는 string이 아닌 고유의 자료형을 사용하기 때문에 서버 통신 시 형변환 문제로 난항을 겪었다.
서버 통신과 Redux Dispatch가 비동기 처리되는 부분에서 시행착오를 겪었다.
새 게시글 작성, 수정 모두 하나의 Redux 상태를 공유하여 페이지 이동 시 엉뚱한 데이터가 렌더되는 이슈가 있었지만 언마운트 시 초기화 시켜주는 방향으로 해결했다.
@CHOI.YONG.HUN
2. Post List container
firestore 포스트 데이터를 배열로 받아 렌더한다.
후기
처음 개발 단계에서 Link 컴포넌트로 인해 UL 태그 내부에 A태그가 먼저 나오는 이슈가 있었지만 Post 컴포넌트 수정을 통해 해결했다.
좋아요 및 레터 개수를 렌더하는 과정에서 비효율적인 데이터 구조가 설정되어 향후 수정할 계획이다.
@CHOI.YONG.HUN
3. info setting page
현재 Info를 렌더 후 바로 수정할 수 있는 환경을 제공한다.
전역 상태를 공유하여 Header에서 변경 상태를 실시간 확인한다.
후기
프로필 소개 설정에 대해 줄바꿈 기능을 적용 못해 아쉽다.
하나의 페이지로 분류하기에는 심심하다 느껴 향후 기능을 추가할 예정이다.
@CHOI.YONG.HUN
4. sub header ui 구현
header container 조건부 렌더링
스위치되는 Path를 확인 후 페이지에 따라 조건에 맞는 헤더를 렌더한다.
후기
- 리플로우를 최소화하기 위해 Switch 외부에서 선언하지만 스타일 적용을 위해 결국 리플로우되는 구조가 아쉽다.
- 비용적인 측면에서 절약하기 위해 리펙토링 예정이다.
@CHOI.YONG.HUN
총평
- 컴포넌트 재사용성과 컨테이너 관계, 전역 상태를 구조적으로 설계하며 계획하는 것의 중요성을 배웠다.
- Styled Component의 근본인 no class 정책과 스타일 컴포넌트화에 대해 더 공부하고 다시 적용하고 싶다.
- 라이브러리는 참 좋지만 간편하지만은 않다. 막 쓰지 말자.
- 접근성, 반응형 등 고려하고 싶은 것들이 많았지만 아쉬웠다.
@han.byeong.guk
useEffect의 Dependency array가 왜 중요한지 아세요?
@han.byeong.guk
서버가 터집니다.
@han.byeong.guk
TypeScript 쓰세요. 두 번 쓰세요.
@han.byeong.guk
개꿀입니다.
@han.byeong.guk
라이브러리 아무거나 갖다 쓰지 마세요.
@han.byeong.guk
개판입니다.
@han.byeong.guk
욕심, 언제나 욕심
TO DO
회원 조회 권한 관리
회원 정보 수정 페이지
관리자 페이지
유료 컨텐츠 설정 기능
블로그 통계 조회 페이지
최적화