작고, 사용하기 쉬우며, 의존성이 없는 로딩 바 컴포넌트입니다.
특징
-
의존성 없음: 특정 프레임워크에도 연결되어 있지 않습니다.
-
작은 크기: Brotli로 압축 시 < 500 바이트 (gzip으로 압축 시 < 600 바이트).
-
사용하기 쉬움: 몇 줄만 추가하면 바로 사용할 수 있습니다. TypeScript도 지원합니다.
설치
npm i @badrap/bar-of-progress 명령은 Node.js의 패키지 관리자 npm을 사용하여 @badrap/bar-of-progress 패키지를 설치합니다. 이 패키지는 사용이 간편하며, 프레임워크 독립적인 진행 바 컴포넌트를 제공하고, TypeScript를 지원합니다. 설치가 완료되면, 몇 줄의 코드로 진행 바를 손쉽게 사용할 수 있습니다.
사용 시 고려해야 할 주의 사항은 다음과 같습니다:
-
호환성:
@badrap/bar-of-progress패키지가 현재 사용 중인 Node.js 버전과 호환되는지 확인해야 합니다. -
의존성 관리: 패키지 설치 시 자동으로
package.json파일에 추가됩니다. 이 파일을 통해 프로젝트 의존성을 관리하며, 필요한 패키지 버전이 항상 설치되도록 유지해야 합니다. -
보안: npm 패키지를 설치할 때는 패키지가 신뢰할 수 있는 출처에서 제공되는지 확인해야 합니다. 알려지지 않은 출처에서 제공하는 패키지는 코드에 보안 위험을 초래할 수 있습니다.
-
유지 보수: 패키지의 최신 버전을 유지하며, 버전 업데이트 시 발생할 수 있는 호환성 문제에 대비해야 합니다.
npm i @badrap/bar-of-progress
사용법
패키지를 불러오고 진행 바 인스턴스를 생성하는 방법은 다음과 같습니다:
- 먼저, 설치한
@badrap/bar-of-progress패키지를 불러옵니다. - 진행 바 인스턴스를 생성합니다.
이후에는 다음과 같은 메소드를 사용하여 진행 바를 제어할 수 있습니다:
-
.start()메소드: 이 메소드를 호출하여 진행 바를 보여주고 애니메이션을 시작합니다. 이는 사용자가 어떤 프로세스가 진행 중임을 시각적으로 인지할 수 있게 해줍니다. -
.finish()메소드: 이 메소드를 호출하여 진행 바 애니메이션을 종료합니다. 이는 작업이 완료되었음을 나타내며, 진행 바를 화면에서 사라지게 합니다.
주의 사항으로는:
-
빠른 작업:
.start()가 호출된 후, 작업이 매우 빠르게 완료되어 사용자가 진행 바를 볼 시간이 없는 경우를 대비해, 진행 바가 바로 보이지 않고 80밀리초의 유예 시간이 있습니다. 이는 사용자 경험을 개선하기 위한 것으로, 필요에 따라 이 행동을 커스터마이즈할 수 있습니다. -
재사용: 진행 바 인스턴스는 페이지 이동마다 애니메이션을 처음부터 다시 시작합니다. 이는 각 페이지 또는 액션마다 사용자에게 진행 상태를 명확하게 알려주기 위함입니다.
이렇게 @badrap/bar-of-progress 패키지를 사용하면, 몇 줄의 코드만으로 웹 애플리케이션에 동적인 진행 상태 표시를 쉽게 추가할 수 있습니다.
import ProgressBar from "@badrap/bar-of-progress";
const progress = new ProgressBar();
progress.start();
setTimeout(() => {
progress.finish();
}, 1000);
예시
Next.js의 라우팅 이벤트를 활용하여 페이지 전환 시 진행 바 애니메이션을 보여주는 방식은 다음과 같습니다:
- 먼저,
@badrap/bar-of-progress패키지로부터 진행 바 인스턴스를 생성합니다. - Next.js의
Router.events를 사용하여 라우팅 이벤트에 리스너(listener)를 추가합니다.Router.events는 Next.js의 라우터 객체에서 제공하는 이벤트들을 다룹니다.
이벤트와 관련된 동작은 다음과 같습니다:
-
routeChangeStart: 라우트 변경이 시작될 때 발생합니다. 이 이벤트가 발생하면progress.start()를 호출하여 진행 바 애니메이션을 시작합니다. 이는 새 페이지로의 전환을 사용자에게 시각적으로 알려주는 역할을 합니다. -
routeChangeComplete: 라우트 변경이 완료될 때 발생합니다. 이 이벤트가 발생하면progress.finish()를 호출하여 진행 바 애니메이션을 종료합니다. 페이지 로딩이 완료된 것을 사용자에게 알려주며, 진행 바를 화면에서 사라지게 합니다. -
routeChangeError: 라우트 변경 도중 에러가 발생했을 때 발생합니다. 에러 발생 시에도progress.finish()가 호출되어, 진행 바 애니메이션을 종료하게 됩니다. 이는 라우팅 프로세스가 중단되었음을 나타냅니다.
이 방법을 통해 Next.js 애플리케이션에서 페이지 전환 시 사용자에게 진행 상황을 시각적으로 표현할 수 있으며, 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.
useEffect는 React의 Hook으로서, 컴포넌트가 마운트되었을 때(또는 router.events가 변경되었을 때) 그 내부의 코드를 실행합니다. 이 코드 내부에서는 위에서 설명한 각 이벤트에 대해 핸들러를 등록했습니다.
또한, useEffect는 정리(clean-up) 함수를 반환합니다. 이 함수는 컴포넌트가 언마운트 될 때나 다음번 useEffect가 실행되기 전에 호출됩니다. 코드를 통해 메모리 누수를 방지했습니다.
Router.events.on('routeChangeStart', onRouteChange)
Router.events.on('hashChangeStart', onRouteChange)
const progress = new ProgressBar({
size: 4,
color: '#F7AB0A',
className: 'z-50',
delay: 100,
})
Router.events.on('routeChangeStart', () => progress.start())
Router.events.on('routeChangeComplete', () => progress.finish())
Router.events.on('routeChangeError', () => progress.finish())
useEffect(() => {
const handleRouteChangeStart = () => {
progress.start()
}
const handleRouteChangeComplete = () => {
progress.finish()
}
const handleRouteChangeError = () => {
progress.finish()
}
router.events.on('routeChangeStart', handleRouteChangeStart)
router.events.on('routeChangeComplete', handleRouteChangeComplete)
router.events.on('routeChangeError', handleRouteChangeError)
return () => {
router.events.off('routeChangeStart', handleRouteChangeStart)
router.events.off('routeChangeComplete', handleRouteChangeComplete)
router.events.off('routeChangeError', handleRouteChangeError)
}
}, [router.events])