์ด ํ๋ก์ ํธ๋ 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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDE0NjgsIm5iZiI6MTcyMTMwMTE2OCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk3NjgzLTAzMzliNTc2LTFkZmUtNGY2My1hZTU4LWUxZGUxMmI3YmI4MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTEyNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mNmIyMTRhOTY2NDFmNjc3ZWU1MTVmODdlZTMyYTgzYzJhYzA5YTMxNWM4NzY0YWM0NTc1M2NiZWI0MzQwYWJkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.7MISAv9-EU5GZ2DROmn2xpoJFc1Wz9SbL7jke9WWUbg)
![](https://private-user-images.githubusercontent.com/102218665/320697538-14a32860-babf-44eb-bb70-115755efee8d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDE0NjgsIm5iZiI6MTcyMTMwMTE2OCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk3NTM4LTE0YTMyODYwLWJhYmYtNDRlYi1iYjcwLTExNTc1NWVmZWU4ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTEyNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xMGIwODE2ZDA1ZmM0Zjg5ODQzNzgwOGY2ODU2YWRkNjI2ZjQ5MGJjZjQ2YThmMDJjOTEzYmE5NDYwNWI5MDRlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Zqoq7VBp5SQaDW3hDcu5uqjx68NjClvIEfqMsq3YxqA)
๋ฉ์ธ ํ์ด์ง์
๋๋ค.
coinpaprika์ api๋ฅผ ์ฌ์ฉํด์ 100๊ฐ์ ์ฝ์ธ๋ค์ ๊ฐ์ ธ์ ๋ฆฌ์คํธํํ๋ก ๋ฟ๋ ค์ค๋๋ค.
๋คํฌ๋ชจ๋์ ํ์ดํธ ๋ชจ๋๋ Styled-Component์ ThemeProvider๋ฅผ ์ฌ์ฉํด ๋ง๋ค์์ต๋๋ค.
![](https://private-user-images.githubusercontent.com/102218665/320698770-b327d934-a871-4a1d-aa35-38e3f2a0a2d8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDE0NjgsIm5iZiI6MTcyMTMwMTE2OCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk4NzcwLWIzMjdkOTM0LWE4NzEtNGExZC1hYTM1LTM4ZTNmMmEwYTJkOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTEyNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yYWI2YWI5ZDM2MDQyNjEwZTNiZjY2NjhmYjcwMDEzNGMwNTNiYTI2OWI5ODA4MWNjZDdhYzZiNDk4ZTVkOTNkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.aY8fqZT8YGd0YJTJPIG82J2JNeN4DozsFXvO6kabp-M)
์ฝ์ธ ํ์ด์ง์์๋ ๋ฉ์ธ ํ์ด์ง์์ ํด๋ฆญํ ์ฝ์ธ์ ์์ธ ์ ๋ณด๋ฅผ ๋ณผ ์ ์์ต๋๋ค.
![](https://private-user-images.githubusercontent.com/102218665/320699002-4010cf50-bbe0-400a-aa45-b840a970e161.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDE0NjgsIm5iZiI6MTcyMTMwMTE2OCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk5MDAyLTQwMTBjZjUwLWJiZTAtNDAwYS1hYTQ1LWI4NDBhOTcwZTE2MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTEyNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYTI0ZDUzOTVlZTlmOTQzNmNkNWVkNzJmNzdlODBmMjU1ZjNlNzNlYjllN2UxYTJmODYxNjY2YjQ3YTVhNjNlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.2oRGnhQsSFzIdSlpEY25qMJRh847aCM3HtVk_bFJUQk)
์ฝ์ธ ํ์ด์ง์์ Chart๋ฅผ ํด๋ฆญํ๋ฉด ์ฐจํธ๋ฅผ ๋ณด์ฌ์ค๋๋ค.
์ฐจํธ๋ 20์ผ์ ๋์ ๊ฐ๊ฒฉ๋ณ๋์ ํ์ธํ ์ ์์ผ๋ฉฐ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์์ธ ์ ๋ณด๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
![](https://private-user-images.githubusercontent.com/102218665/320699313-aa0d437d-a3b0-4b59-8681-8f1723b0d98f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzMDE0NjgsIm5iZiI6MTcyMTMwMTE2OCwicGF0aCI6Ii8xMDIyMTg2NjUvMzIwNjk5MzEzLWFhMGQ0MzdkLWEzYjAtNGI1OS04NjgxLThmMTcyM2IwZDk4Zi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQxMTEyNDhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MGU4N2E1YTkwMTAyNDE0YmE5ZjMyMTljZWRlODViZjRiOGQyODk0ZWI4Mzk2ZGQ5NTY3N2YwNzgwNWFhOWU4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.A2rlg5t4TXrFcUp_H0esGP09wcllEqD2uVBcC4demvE)
๊ทธ ์ฝ์ธ์ ์ต๊ณ ๊ฐ๋ฅผ ๋ณด์ฌ์ค๋๋ค.
๋ช ๋
๋ช ๋ ๋ฉฐ์น ๋ช ์์ ์ต๊ณ ๊ฐ๋ฅผ ๋ฌ์ฑํ์ง๋ ๋ณด์ฌ์ค๋๋ค.
์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ts, react-query, recoil, styled-components๋ฑ์ ์ฌ์ฉํ๋ฉฐ ๊ณต๋ถํ๊ณ ์ต์ํด์ง ์ ์๋ ์๊ฐ์ด์๊ณ ,
๊ฐ๋จํ์ง๋ง ์ฒ์์ผ๋ก ๋ฏธ๋ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๋ค์ํ ๊ธฐ์ ๋ค์ ์ฌ์ฉํ ์ ์์ด์ ์ข์์ต๋๋ค.