데모 페이지 링크

🚀 페이지 링크

---

설치 및 실행방법

npm install || yarn 패키지 설치 npm run start || yarn start 프로젝트 로컬 실행

---

과제 구현 목록

1. Init

• CRA 생성
• 폴더 구조 설계
• 더미데이터 생성
• 모듈 세팅

2. styling

• CommentList 컴포넌트 스타일링
• Comment 컴포넌트 스타일링

3. 전역상태 관리

• Dummy Data 대신 전역 변수 사용
• Redux-saga를 이용한 비동기 네트워크 통신

4. Infinity Scroll

• 페이지별 API 받아오기
• intersection-observer를 통해 무한스크롤 구현
• +option | scroll event를 통해 무한스크롤 구현

---

폴더구조

📦src
┣ 📂components -- 컴포넌트 단위의 React 파일
┃ ┣ 📜Comment.js
┃ ┗ 📜CommentList.js
┃
┣ 📂lib -- 모듈화된 함수
┃ ┣ 📂api
┃ ┃ ┣ 📜client.js
┃ ┃ ┗ 📜data.js
┃ ┣ 📂hooks
┃ ┗ 📂styles
┃      ┗ 📜GlobalStyles.js
┃
┣ 📂pages -- 페이지 단위의 React 파일
┃ ┗ 📜CommentPage.js
┃
┣ 📂reducers -- 상태를 변화시키는 로직
┃ ┣ 📜comment.js
┃ ┗ 📜index.js
┃
┣ 📂sagas -- 네트워크 비동기 처리
┃ ┣ 📜comment.js
┃ ┗ 📜index.js
┃
┣ 📂store -- 전역 state 선언
┃ ┗ 📜index.js
┃
┣ 📜App.js
┗ 📜index.js