/timeserieschart

Primary LanguageTypeScript

๐Ÿ“ˆ ์‹œ๊ณ„์—ด ์ฐจํŠธ ๊ทธ๋ฆฌ๊ธฐ

๐Ÿ‘๐Ÿป About

  • ์›ํ‹ฐ๋“œ 4์ฃผ์ฐจ ๊ธฐ์—… ๊ณผ์ œ (๊ฐœ์ธ)
  • ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , ๊ณผ์ œ๋ฅผ ์ˆ˜ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ”— ๋ฐฐํฌ

https://timeserieschart.vercel.app/

๐Ÿ›ซ Start the Project

git clone https://github.com/ramrami-B/clinicaltrialskoreasearch.git
cd clinicaltrialskoreasearch
npm install
npm rum start

โš ๏ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‹œ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด์„œ node v18์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

โš’๏ธ Teck Stack

  • core: typescript
  • framework: Next.js
  • style: styled-jsx
  • ๋ฐฐํฌ: Vercel
  • react-router-dom v6.xx
  • node v18.xx

๐Ÿ’ก ์š”๊ตฌ์‚ฌํ•ญ

1. ์‹œ๊ณ„์—ด ์ฐจํŠธ ๋งŒ๋“ค๊ธฐ

  • ์ฃผ์–ด์ง„ JSON ๋ฐ์ดํ„ฐ์˜ key๊ฐ’(์‹œ๊ฐ„)์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์‹œ๊ณ„์—ด ์ฐจํŠธ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”
  • ํ•˜๋‚˜์˜ ์ฐจํŠธ์•ˆ์— Area ํ˜•ํƒœ์˜ ๊ทธ๋ž˜ํ”„์™€ Bar ํ˜•ํƒœ์˜ ๊ทธ๋ž˜ํ”„๊ฐ€ ๋ชจ๋‘ ์กด์žฌํ•˜๋Š” ๋ณตํ•ฉ ๊ทธ๋ž˜ํ”„๋กœ ๋งŒ๋“ค์–ด์ฃผ์„ธ์š”
  • Area ๊ทธ๋ž˜ํ”„์˜ ๊ธฐ์ค€๊ฐ’์€ value_area ๊ฐ’์„ ์ด์šฉํ•ด์ฃผ์„ธ์š”
  • Bar ๊ทธ๋ž˜ํ”„์˜ ๊ธฐ์ค€๊ฐ’์€ value_bar ๊ฐ’์„ ์ด์šฉํ•ด์ฃผ์„ธ์š”
  • ์ฐจํŠธ์˜ Y์ถ•์— ๋Œ€๋žต์ ์ธ ์ˆ˜์น˜๋ฅผ ํ‘œํ˜„ํ•ด์ฃผ์„ธ์š”(์˜ˆ์‹œ ์ด๋ฏธ์ง€ ์ฐธ๊ณ )

3. ํ˜ธ๋ฒ„ ๊ธฐ๋Šฅ ๊ตฌํ˜„

  • ํŠน์ • ๋ฐ์ดํ„ฐ ๊ตฌ์—ญ์— ๋งˆ์šฐ์Šค ํ˜ธ๋ฒ„์‹œ id, value_area, value_bar ๋ฐ์ดํ„ฐ๋ฅผ ํˆดํŒ ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•ด์ฃผ์„ธ์š”

4. ํ•„ํ„ฐ๋ง ๊ธฐ๋Šฅ ๊ตฌํ˜„

  • ํ•„ํ„ฐ๋ง ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์ฃผ์„ธ์š”, ํ•„ํ„ฐ๋ง์€ ํŠน์ • ๋ฐ์ดํ„ฐ ๊ตฌ์—ญ์„ ํ•˜์ด๋ผ์ดํŠธ ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ•ด์ฃผ์„ธ์š”
  • ํ•„ํ„ฐ๋ง ๊ธฐ๋Šฅ์€ ๋ฒ„ํŠผ ํ˜•ํƒœ๋กœ ID๊ฐ’(์ง€์—ญ์ด๋ฆ„)์„ ์ด์šฉํ•ด์ฃผ์„ธ์š”
  • ํ•„ํ„ฐ๋ง ์‹œ ๋ฒ„ํŠผ์—์„œ ์„ ํƒํ•œ ID๊ฐ’๊ณผ ๋™์ผํ•œ ID๊ฐ’์„ ๊ฐ€์ง„ ๋ฐ์ดํ„ฐ ๊ตฌ์—ญ๋งŒ ํ•˜์ด๋ผ์ดํŠธ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ์„ธ์š”
  • ํŠน์ • ๋ฐ์ดํ„ฐ ๊ตฌ์—ญ์„ ํด๋ฆญ ์‹œ์—๋„ ํ•„ํ„ฐ๋ง ๊ธฐ๋Šฅ๊ณผ ๋™์ผํ•œ ํ˜•ํƒœ๋กœ ๋™์ผํ•œ ID๊ฐ’์„ ๊ฐ€์ง„ ๋ฐ์ดํ„ฐ ๊ตฌ์—ญ์„ ํ•˜์ด๋ผ์ดํŠธํ•ด์ฃผ์„ธ์š”