so woon!

학습일 : 2023. 04. 14 차트탭의 차트 또한 다크모드, 라이트모드를 적용하려면 차트 컴포넌트가 isDark가 true 인지 false인지 알아보아야 하는데 그러기에 App.tsx에서 isDark를 Router로 보내주어야 한다. function App() { const [isDark, setIsDark] = useState(false); const toggleDark = () => setIsDark((current) => !current); return ( // 여기! ); } export default App; 인터페이스에 isDark의 타입을 적어주고 Router function에 isDark를 넘겨주고 드디어 Coin컴포넌트에 isDark를 전달해줄 수 있게 된다. import { Brow..

학습일 : 2023. 04. 14 버튼의 위치를 header쪽으로 옮기고 싶기 때문에 App.tsx에서 버튼을 삭제해주고 Coins.tsx로 옮겨준다. App에서 버튼을 지우게 되면 toggleDark function을 Coins로 보내주어야 한다. 근데 Coins는 Router 안에 있기 때문에 function을 Router로 보내주어야 한다. 변경 전 function App() { const [isDark, setIsDark] = useState(false); const toggleDark = () => setIsDark((current) => !current); return ( 테마 변경 ); } export default App; 변경 후 function App() { const [isDark, ..

학습일 : 2023. 04. 14 Recoil을 사용하지 않고 만드는 버전을 알아보자 Recoil 없이 다크모드/라이트모드 스위치를 구현하기 위해서는 기존에 index.tsx에 있는 ThemeProvider를 App.tsx로 옮긴다. (옮기는 이유는 어플리케이션의 state에 기반하여 바꾸기 위해서임) 이동 전 const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); 이동 후 const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); 이동 전 function App(..

학습일 : 20023. 03. 29 다크모드를 구현할때 아주 유용한 theme에 대해 공부해볼까 한다. 절반은 theme 나머지 절반은 local Estate Management 를 사용하여 만들 수 있는데 우선 theme에 대해 먼저 알아보자 theme이란 기본적으로 모든 색상들을 가지고 있는 object 이다. 모든 색깔을 하나의 object 안에 넣어놓았기 때문에 엄청 유용하다 색깔을 바꿔줄 때는 그냥 object만 바꿔주면 되기 때문이다! theme을 실행하기 위해서 index.js로 간다. import { ThemeProvider } from 'styled-components'; 를 적어 import 해주어야 사용이 가능하다. 그런다음 기존 코드의 import React from 'react';..

학습일 : 2023. 03. 29 이번시간에는 컴포넌트 안에서 컴포넌트 타겟팅을 해보기로 한다. 이것이 필요한 상황에 대해 설명해보자면 우선, 먼저 이렇게 Box를 정의 해준 상태에서 // Box const Box = styled.div` align-items: center; display: flex; flex-direction: row; justify-content: center; background-color: salmon; height: 200px; width: 200px; animation: ${rotationAnimation} 10s linear infinite; // target처리 span { font-size: 2rem; &:hover { font-size: 5rem; background-..

학습일 : 2023. 03. 28 여기에 안에 이 있다. import styled, { keyframes } from "styled-components"; const Wrapper = styled.div` display: flex; `; // animation const rotationAnimation = keyframes` 0% { transform:rotate(0deg); border-radius: 0px; background-color: red; } 50% { transform:rotate(360deg); border-radius: 100px; background-color: yellow; } 100%{ transform:rotate(0deg); border-radius: 0px; backgroun..

학습일 : 2023. 03. 28 styled-component 안에서 animation을 주기 위해서는 helper function을 import 해주어야 한다 import styled, {keyframes} from "styled-components"; 이렇게 import를 해주고 회전하는 animation을 만들어 보고자 한다. 이렇게 먼저 animation을 keyframes를 사용하여 정의해주고 (rotationAnimation 이 이름은 바꿔줘도 상관없다.) // animation const rotationAnimation = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `; 사용은 이런식으로 하면..

학습일 : 2023. 03. 28 컴포넌트의 태그를 바꾸고 싶은데 스타일은 바꾸고 싶지 않을 때 즉, 예를들어 이미 만들어준 컴포넌트를 버튼이 아닌 a태그로 쓰고 싶은 상황이라면? 두개의 같은 Login이라고 적힌 버튼 컴포넌트가 있다 (Btn 이라는 이름을 가진) 나머지 하나는 css 속성은 똑같지만 버튼이 아닌 a 태그로 만들고 싶다면 (즉 태그자체를 ===> 로 바꾸고 싶다면) as를 사용하면 되는데 바꾸고 싶은 컴포넌트인 두번째 안에 as="a" 라고 적어주면 된다 그리고 클릭시 이동시킬 주소를 적어주면 되는데 href="이동할주소" 라고 적어주면 된다. 전체 코드는 아래와 같다. import styled from "styled-components"; const Father = styled.div..