yisu-kim/pre-onboarding-hayanmind

무한 스크롤 리스트

프리온보딩 코스 HayanMind 기업 과제

View Demo

📋 과제 요구사항 보기

Assignment

The main technical stack for HayanMind front-end developer is "React". Mobile applications are implemented as "React Native", and web projects use "React". In this assignment, we will implement an infinite scroll list using React.

Requirement

• Implement the user's comment data list with infinite scrolling by getting more 10 comments repeatedly.

Data API

• The user's dummy comment data can be called through the API below.
  • https://jsonplaceholder.typicode.com/comments
• The following parameters are supported:
  • _page
    • it starts at 1.
  • _limit
    • Please set the _limit parameter to 10.
• Example of the first comment page
  • https://jsonplaceholder.typicode.com/comments?_page=1&_limit=10
• Sample data

[
  {
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
  },
]

Design

• Please look at the following design guide link and reflect the design.
  • https://www.figma.com/file/T9P3B5qjnTqhWi1Ou5BmIL/HayanMind-FrontEnd-TA

About The Project

Built With

• React
• TypeScript
• axios
• styled-components

Getting Started

Installation

To install packages:

npm install

To serve the app:

npm start

Features

• Intersection Observer를 활용한 무한 스크롤 리스트 구현
• axios를 활용해 API 클래스 util 작성

Refactoring

• Intersection Observer 로직을 분리해 useOnScreen 커스텀 훅 작성
• TypeScript로 변환