전체 글
-
div height 100% 처리하기CSS 100vh로 하자Html & CSS 2023. 2. 25. 18:23
📌 CSS div width height 지정하기 width 는 100% 가 잘먹는다. height 는 100% 가 잘 안된다. ✔️ 해결방안 html, body { height: 100%; } 을 처리해주거나 height : 100vh 로 처리하면 된다. vh = viewport height vw = viewport width https://codingmania.tistory.com/348 React에서 component 안에서 div의 height를 최대(100%)로 지정하는 방법 class App extends Component { render() { return ( ); }} 이렇게 있는데, 가로 100%, 세로 100%로 크기를 지정하고 싶다면, 쉽게 생각하면 가로 width : 100% 세로 ..
-
React 기본 css 제거하기React/React 2023. 2. 25. 16:16
📌 React 에서 html 을 작성할때 기본적으로 적용되어 있는 css 를 모두 제거 하고 싶다. 방법은 2가지 1.reset .css 를 App.jsx 에 추가한다. reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, ..
-
React CORS policy 오류 proxy 해결법오류를 해결하자 2023. 2. 25. 00:02
📌 coinpaprika 를 이용하다가 이런 에러를 마주쳤다. Access to XMLHttpRequest at 'https://api.coinpaprika.com/v1/tickers' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.coins.tsx:77 대충해석해보면 CORS policy 를 어겼다고 한다. 해결방법은 package.json 에 "proxy": "http://localhost:3000" 을 추가하는 방식이다. 그러나 이로도 안되어서 아래 블로그 링크를 참고하다가 갑자기 되었다..
-
React 에서 axios 요청하는 법axios 2023. 2. 24. 21:19
📌 axios 는 then 이라는 문법을 통해 await async promise 를 처리하고 있다고 한다. 비동기 처리 방식이라는 것은 알겠는데 정확히 무슨 말인지는 모르겠다. 차후 공부하면 다시 써보자 ...(중략) interface CoinInterface { id : string , name : string, symbol : string, rank : number, is_new : boolean, is_active : boolean, type : string } function Coins() { // useState typescript 사용 const [coins , setCoins] = useState([]) useEffect(()=>{ axios.get('https://api.coinpapri..
-
React useParams() 사용법React/React 2023. 2. 23. 20:41
📌 Router.tsx import { BrowserRouter, Routes , Route} from "react-router-dom"; import Coin from "./routes/coin"; import Coins from "./routes/coins"; function Router() { return ( // :coinId 는 const { coinId } = useParams() 를 통해 가져올 수 있다. // coin.tsx file 참고 ); } export default Router; 📌 coin.tsx file import { useParams } from "react-router-dom" function Coin () { const {coinId}= useParams() consol..
-
React Router 버전 5 , 6 문제 해결 및 차이점 (react-router-dom)React/React 2023. 2. 23. 20:36
1. 설치하는법 //설치 $ npm install router-react-dom // 삭제 $ npm uninstall router-react-dom // 재설치 $ npm install router-react-dom@5 2. package.json 파일의 dependencies 부분의 react-router-dom 부분의 버전을 아래와 같이 변경한 후 터미널에 npm i를 통해 재설치 하는 방법도 있다. // before "dependencies": { ... "react-router-dom": "^6.1.6", ... }, // after "dependencies": { ... "react-router-dom": "^5.3.0", ... }, 📌 3. 5버전과 6버전의 차이 ✔️ 5버전은 Switch..
-
리액트 타입스크립트 스타일컴포넌트 Theme 적용하기React/React+TypeScript 2023. 2. 22. 03:06
1. styled.d.ts 파일을 만든다. 속에 interface 를 만든다. import "styled-components"; declare module "styled-components" { export interface UsingTheme { textColor: string; bgColor: string; btnColor: string; } } 2. 해당 interface 를 적용할 theme.ts 를 만든다. (단 여기서 UsingTheme 부분이 defaultTheme 로 쓰이면 안된다. 해당 단어는 기본설정이라 변경하면 다 적용되어버린다.) import { UsingTheme } from "styled-components"; export const lightTheme: UsingTheme = ..