[개발PC : MacBook]
Chapter09) 대시보드와 공지사항 만들기
학습 목표 : 전 세계 및 대한민국의 코로나19 관련 현황을 한눈에 요약하여 볼 수 있는 대시보드와 공지사항을 기능을 구현합니다.
[사전 준비 : 라이브러리 설치]
$ npm install react-scroll@1.8.2 javascript-time-ago@2.3.7 fs-extra@10.0.0
- react-scroll : 리액트용 스크롤 라이브러리입니다.
코로나보드는 단일 페이지에 모든 콘텐츠를 담아두고 앵커(anchor)를 이용하여 사용자가 페이지 내의 앵커가 지정된 특정 위치로 빠르게 이동할 수 있게 합니다.
이 라이브러리를 이용하면 이러한 이동이 일어날 때 애니메이션 형태로 부드럽게 스크롤할 수 있습니다.
현재 스크롤의 위치에 가장 가까운 앵커를 가리키는 링크를 하이라이트하는 기능도 제공합니다.
- javascript-time-ago : 지역 및 언어 설정을 의미하는 로케일(locate)에 따라 특정 시간이 현재 시간으로부터 얼마 전인지를 여러 가지 적합한 단위를 이용하여 표현해줍니다.
예를 들어 언어가 한국어로 설정된 경우 5초 전, 20분 전, 1시간 전, 3일전 등으로 표현된 문자열을 손쉽게 만들어 낼 수 있습니다.
- fs-extra : 노드에서 기본 제공하는 fs 라이브러리의 기능을 확정한 라이브러리입니다.
예를 들어 노드의 fs.outputFileSync() 함수는 파일을 쓸 때 해당 파일 경로에 포함된 디렉터리들이 존재하지 않으면 에러를 발생시킵니다.
그래서 일일이 fs.existsSync() 함수를 이용하여 해당 디렉터리들의 존재 여부를 미리 확인하고, 디렉터리가 없으면 미리 생성해뒤야 하는 번거루움이 있습니다.
하지만 fs-extra에서 제공하는 outputFileSync() 함수를 사용하면 알아서 파일 경로에 포함된 디렉터리들을 확인하여 없으면 자동으로 생성해주기 때문에 매우 편리합니다.
[대시보드 만들기]
P315~316
- coronaboard-web/src/api-client.js
P316~318
- coronaboard-web/src/data-loader.js
P319~322
- coronaboard-web/src/data-loader.js
P322~325
- coronaboard-web/src/components/dashboard-item.js
P325~327
- coronaboard-web/src/utils/formatter.js
P327~332
- coronaboard-web/src/components/dashboard.js
P332
- coronaboard-web/src/templates/single-page.js
P333~335
- coronaboard-web/src/data-loader.js
P335~336
- coronaboard-web/src/data-loader.js
P336~337
- coronaboard-web/src/templates/single-page.js