추억의 롤링 페이퍼를 웹 상에서도 즐겨보세요 !
다른 사람들의 롤링페이퍼에 메시지와 이모티콘 리액션을 남길 수 있고,
자기만의 롤링페이퍼를 만들어 다른사람에게 공유할 수 있는 서비스
- 소스 파일 설치
git clone https://github.com/Dev-Duke-Seo/rolling_team1.git
cd rolling_team1- 패키지 설치
npm install.env파일 생성
REACT_APP_BASE_URL = 'BASE_URL'
REACT_APP_API_KEY = 'KAKAO_API_KEY'
- 실행
npm run start |
 |
 |
 |
 |
| 이유연 | 김선영 | 김율민 | 서인덕 | 이재명 |
| 팀장 | 팀원 | 팀원 | 팀원 | 팀원 |
2024.01.17 ~ 2024.02.01 (2주)
src
├── assets
│ └─ fonts
│ └─ images
├── apis
├── components
│ └─ Post
│ └── Card.jsx
│ └── Card.style.js
│ └─ List
├── contexts
├── constants
├── pages
├── utils
├── hooks
├── router
├── App.jsx
├── GlobalStyle.css
└── index.jsx- 플랫폼에 대한 간단한 설명과 페이지 이동 버튼
- 이름과 배경색상 or 이미지를 골라 페이퍼를 생성하는 기능
- 이모티콘 리액션, 최신순으로 정렬된 캐러셀 UI의 롤링페이퍼 리스트
- 하나 클릭 시 해당하는 사용자의 롤링페이퍼로 이동
- 이모지 리액션을 남길 수 있는 기능
- 이 롤링페이퍼를 공유할 수 있는 기능
- 롤링페이퍼에 남겨진 메시지들을 무한 스크롤 방식으로 볼 수 있는 기능
- 메시지 카드는 클릭 시 모달로 자세히 볼 수 있는 기능
- 편집버튼을 눌러 메시지 카드 삭제 기능 활성화
- 플러스 버튼을 눌러서 롤링페이퍼 주인에게 메시지 남기기 기능
- 메시지 이름, 프로필 이미지, 내용, 폰트를 선택 및 작성 할 수 있는 기능
- 사용자 경험을 개선하기 위한 스켈레톤 UI
- 데이터가 없는 페이지를 위해 404페이지 생성
- SEO 향상을 위해 react-helmet 라이브러리를 활용한 페이지 별 메타태그 작성
- 무한 스크롤 기능이 있는 점을 감안해 사용자 경험을 개선하기 위해 페이지 상단으로 이동할 수 있는 버튼 추가
🔴 스크롤 이벤트로 무한 스크롤을 구현했을 때, 리플로우에 의해 렌더링 성능이 좋지 않음 + 의도한대로 동작하지 않는 문제점 발생
🟢 Intersection Observer API의 기본 기능 중 하나인 브라우저 Viewport와 Target으로 설정한 요소의 교차점을 관찰하여 Target이 Viewport에 포함되는지를 구별하는 기능을 이용해 해결
🔴 react-quill 라이브러리를 이용해 편집기에서 작성한 내용을 메시지 카드에 보여줄 때 html형식의 값이 그대로 보여지게 되는 문제점 발생
🟢 dangerouslySetInnerHTML을 이용해 string을 html로 파싱해서 DOM에 추가하는 방식으로 해결
but, 웹페이지에 악성 스크립트를 삽입할 수 있는 취약점이 있어서 사용자의 입력 값을 검사하고 사용하는 식으로 보완하면 좋을 듯
🔴 react-helmet 을 이용해 동적으로 생성한 메타태그가 title만 바뀌고 url공유 시 적용되지 않는 문제가 발생
🟢 기본적으로 크롤러는 html 문서를 로딩한 뒤 자바스크립트를 실행함. 그래서 정적 html로 미리 렌더링해서 크롤러에게 전달해줄 수 있는 방식으로 문제를 해결하기 위해 react-snap을 사용 (CSR 기반에서 Pre-rendering을 가능하게 해주는 라이브러리)
🔴 초기 여러 자료나 멘토님 조언을 참고해 컨벤션 룰을 셋팅하였으나 실제 협업에 들어가니 각자 생각하는 개념의 넓이나 범위가 달라 컨벤션을 정했음에도 코드의 통일성이 떨어지는 문제 발생
🟢 지루하고 귀찮지만 컨벤션에 관한 회의를 여러번 해가며 명확한 기준을 세워 후반으로 갈수록 혼선을 빚는 일이 줄어들 수 있었음
