์ด ํ๋ก์ ํธ๋ React ์ค๊ธ ์คํฐ๋์์ ๊ณต๋ถํ๋ฉด์ ๋ง๋ ๋ฏธ๋ ํ๋ก์ ํธ์ ๋๋ค.
์ด ์ฌ์ดํธ๋ ์ฝ์ธ API๋ฅผ ์ฌ์ฉํ์ฌ 100๊ฐ์ ์ฝ์ธ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ์๊ฐํํด์ ๋ณด์ฌ์ฃผ๋ ์ฌ์ดํธ์ ๋๋ค.
React, React-Router, React-Query, Recoil, Styled-Component, TypeScript
![](https://private-user-images.githubusercontent.com/102218665/320697683-0339b576-1dfe-4f63-ae58-e1de12b7bb81.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU4MDc5MjcsIm5iZiI6MTcxNTgwNzYyNywicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk3NjgzLTAzMzliNTc2LTFkZmUtNGY2My1hZTU4LWUxZGUxMmI3YmI4MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNTE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDUxNVQyMTEzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mYzVmMTBlYzk0YjUyNzFlMmY4MTljNjdhOGQ5YTQ1N2VlMzNmNWQ5MWI3NDBjYzJjMDVhYzE1MmQ0MGI3ZTUzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9._o6waeuHJ8A1c1X9YAzugY5-4QFdxo6FKhs5C2f0zbQ)
![](https://private-user-images.githubusercontent.com/102218665/320697538-14a32860-babf-44eb-bb70-115755efee8d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU4MDc5MjcsIm5iZiI6MTcxNTgwNzYyNywicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk3NTM4LTE0YTMyODYwLWJhYmYtNDRlYi1iYjcwLTExNTc1NWVmZWU4ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNTE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDUxNVQyMTEzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01MjhjZTNmYTA0YzQ5YTU3NjI1M2E2ZDg2MGRjYmE4ZTU1YjAzNDE5NWFjNjA0MTFiZGNlNzI4ZmNlMjkzZWVmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.RvD8Nfae7mlykB-fkvYg429Tfs6Fu8DznyMMLiECkAI)
๋ฉ์ธ ํ์ด์ง์
๋๋ค.
coinpaprika์ api๋ฅผ ์ฌ์ฉํด์ 100๊ฐ์ ์ฝ์ธ๋ค์ ๊ฐ์ ธ์ ๋ฆฌ์คํธํํ๋ก ๋ฟ๋ ค์ค๋๋ค.
๋คํฌ๋ชจ๋์ ํ์ดํธ ๋ชจ๋๋ Styled-Component์ ThemeProvider๋ฅผ ์ฌ์ฉํด ๋ง๋ค์์ต๋๋ค.
![](https://private-user-images.githubusercontent.com/102218665/320698770-b327d934-a871-4a1d-aa35-38e3f2a0a2d8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU4MDc5MjcsIm5iZiI6MTcxNTgwNzYyNywicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk4NzcwLWIzMjdkOTM0LWE4NzEtNGExZC1hYTM1LTM4ZTNmMmEwYTJkOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNTE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDUxNVQyMTEzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05MjU2NGI3MTEzNWI3YjFhOTBhMzA3NjA3ZTQ3MWJiNGQyMzFmMmJlOTk0NzNhNGVlN2RhMjkyMDQ1YmVlM2E2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.y8_whqsjHV7NW9paab1R08vAzECzSTA0xLctWm5UK3A)
์ฝ์ธ ํ์ด์ง์์๋ ๋ฉ์ธ ํ์ด์ง์์ ํด๋ฆญํ ์ฝ์ธ์ ์์ธ ์ ๋ณด๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
![](https://private-user-images.githubusercontent.com/102218665/320699002-4010cf50-bbe0-400a-aa45-b840a970e161.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU4MDc5MjcsIm5iZiI6MTcxNTgwNzYyNywicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk5MDAyLTQwMTBjZjUwLWJiZTAtNDAwYS1hYTQ1LWI4NDBhOTcwZTE2MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNTE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDUxNVQyMTEzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00OWU3ZDMxYmRmZjE2MzNiYjcxN2IyMDAzNDA0NmY1ZDkyM2JlYmU4ZmY2NzRmMzU1ZjM2OTU0YmFjOTdmYTEyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.d21JWy_QMqukovarQ_R4QbZIEerDcydOG4SY0bBBN_s)
์ฝ์ธ ํ์ด์ง์์ Chart๋ฅผ ํด๋ฆญํ๋ฉด ์ฐจํธ๋ฅผ ๋ณด์ฌ์ค๋๋ค.
์ฐจํธ๋ 20์ผ์ ๋์ ๊ฐ๊ฒฉ๋ณ๋์ ํ์ธํ ์ ์์ผ๋ฉฐ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์์ธ ์ ๋ณด๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
![](https://private-user-images.githubusercontent.com/102218665/320699313-aa0d437d-a3b0-4b59-8681-8f1723b0d98f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU4MDc5MjcsIm5iZiI6MTcxNTgwNzYyNywicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk5MzEzLWFhMGQ0MzdkLWEzYjAtNGI1OS04NjgxLThmMTcyM2IwZDk4Zi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNTE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDUxNVQyMTEzNDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xNzFkNjlkZTY4Mjc5MTQyZTE2NDgwZWI3MDhhYzNjNDA3NmU0YWVjNWU0NDlkMmMyMTZmZjg3NTdmODI4NjgzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.-Ll2WHEtUj_ykrabWMfcUtNb85v5OqnZMxk0X4YuIFs)
๊ทธ ์ฝ์ธ์ ์ต๊ณ ๊ฐ๋ฅผ ๋ณด์ฌ์ค๋๋ค.
๋ช ๋
๋ช ๋ ๋ฉฐ์น ๋ช ์์ ์ต๊ณ ๊ฐ๋ฅผ ๋ฌ์ฑํ์ง๋ ๋ณด์ฌ์ค๋๋ค.
์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ts, react-query, recoil, styled-components๋ฑ์ ์ฌ์ฉํ๋ฉฐ ๊ณต๋ถํ๊ณ ์ต์ํด์ง ์ ์๋ ์๊ฐ์ด์๊ณ ,
๊ฐ๋จํ์ง๋ง ์ฒ์์ผ๋ก ๋ฏธ๋ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๋ค์ํ ๊ธฐ์ ๋ค์ ์ฌ์ฉํ ์ ์์ด์ ์ข์์ต๋๋ค.