Skip to content

Latest commit

 

History

History
219 lines (147 loc) · 8.6 KB

README.md

File metadata and controls

219 lines (147 loc) · 8.6 KB
Raw

Rolling

추억의 롤링 페이퍼를 웹 상에서도 즐겨보세요 !

image

다른 사람들의 롤링페이퍼에 메시지와 이모티콘 리액션을 남길 수 있고,
자기만의 롤링페이퍼를 만들어 다른사람에게 공유할 수 있는 서비스



설치 방법

  1. 소스 파일 설치
git clone https://github.com/Dev-Duke-Seo/rolling_team1.git
cd rolling_team1
  1. 패키지 설치
npm install
  1. .env 파일 생성
REACT_APP_BASE_URL = 'BASE_URL'
REACT_APP_API_KEY = 'KAKAO_API_KEY'
  1. 실행
npm run start



🫂 팀원 소개

이유연 김선영 김율민 서인덕 이재명
팀장 팀원 팀원 팀원 팀원



🗓️ 개발 일정

2024.01.17 ~ 2024.02.01 (2주)

image



🔨 사용 기술 및 도구

배포

Netlify

개발

React JavaScript Visual Studio Code

Styled Components React Router

협업

GitHub ESLint Prettier Discord Notion


📁 폴더 구조

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



🔗 배포 링크

Rolling - 바로가기



✨ 서비스 주요 기능


📄 메인 페이지

  • 플랫폼에 대한 간단한 설명과 페이지 이동 버튼

📄 롤링페이퍼 만들기 페이지

  • 이름과 배경색상 or 이미지를 골라 페이퍼를 생성하는 기능

📄 롤링페이퍼 리스트 구경하기 페이지

  • 이모티콘 리액션, 최신순으로 정렬된 캐러셀 UI의 롤링페이퍼 리스트
  • 하나 클릭 시 해당하는 사용자의 롤링페이퍼로 이동

📄 롤링페이퍼 페이지

  • 이모지 리액션을 남길 수 있는 기능
  • 이 롤링페이퍼를 공유할 수 있는 기능
  • 롤링페이퍼에 남겨진 메시지들을 무한 스크롤 방식으로 볼 수 있는 기능
  • 메시지 카드는 클릭 시 모달로 자세히 볼 수 있는 기능
  • 편집버튼을 눌러 메시지 카드 삭제 기능 활성화
  • 플러스 버튼을 눌러서 롤링페이퍼 주인에게 메시지 남기기 기능

📄 메시지 생성하기 페이지

  • 메시지 이름, 프로필 이미지, 내용, 폰트를 선택 및 작성 할 수 있는 기능



✨ 추가 기능

  • 사용자 경험을 개선하기 위한 스켈레톤 UI
  • 데이터가 없는 페이지를 위해 404페이지 생성
  • SEO 향상을 위해 react-helmet 라이브러리를 활용한 페이지 별 메타태그 작성
  • 무한 스크롤 기능이 있는 점을 감안해 사용자 경험을 개선하기 위해 페이지 상단으로 이동할 수 있는 버튼 추가




💡 문제 및 해결


1️⃣ 무한 스크롤 기능 구현을 위해 스크롤 이벤트를 이용했을 때



🔴 스크롤 이벤트로 무한 스크롤을 구현했을 때, 리플로우에 의해 렌더링 성능이 좋지 않음 + 의도한대로 동작하지 않는 문제점 발생

🟢 Intersection Observer API의 기본 기능 중 하나인 브라우저 Viewport와 Target으로 설정한 요소의 교차점을 관찰하여 Target이 Viewport에 포함되는지를 구별하는 기능을 이용해 해결



2️⃣ react-quill 라이브러리를 이용해 편집기에서 작성한 내용을 그대로 전송했을 때

image

🔴 react-quill 라이브러리를 이용해 편집기에서 작성한 내용을 메시지 카드에 보여줄 때 html형식의 값이 그대로 보여지게 되는 문제점 발생

🟢 dangerouslySetInnerHTML을 이용해 string을 html로 파싱해서 DOM에 추가하는 방식으로 해결 but, 웹페이지에 악성 스크립트를 삽입할 수 있는 취약점이 있어서 사용자의 입력 값을 검사하고 사용하는 식으로 보완하면 좋을 듯



3️⃣ SEO 향상을 위한 react-helmet 적용했을 때

image image

🔴 react-helmet 을 이용해 동적으로 생성한 메타태그가 title만 바뀌고 url공유 시 적용되지 않는 문제가 발생

🟢 기본적으로 크롤러는 html 문서를 로딩한 뒤 자바스크립트를 실행함. 그래서 정적 html로 미리 렌더링해서 크롤러에게 전달해줄 수 있는 방식으로 문제를 해결하기 위해 react-snap을 사용 (CSR 기반에서 Pre-rendering을 가능하게 해주는 라이브러리)



4️⃣ 컨벤션? 컨벤션! 컨벤션!!


🔴 초기 여러 자료나 멘토님 조언을 참고해 컨벤션 룰을 셋팅하였으나 실제 협업에 들어가니 각자 생각하는 개념의 넓이나 범위가 달라 컨벤션을 정했음에도 코드의 통일성이 떨어지는 문제 발생

🟢 지루하고 귀찮지만 컨벤션에 관한 회의를 여러번 해가며 명확한 기준을 세워 후반으로 갈수록 혼선을 빚는 일이 줄어들 수 있었음

Q & A

image