리액트
-
깃허브를 통해 React를 배포해보자git & Github 2023. 3. 10. 23:46
그동안 만들었던 React 프로젝트를 배포해보고 싶었다. https://codingapple.com/unit/react-build-deploy-github-pages/ 만든 리액트 사이트 build & Github Pages로 배포해보기 - 코딩애플 온라인 강좌 (리액트 강좌 전체 목록) 이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리시는게 아니라 build용 파일 codingapple.com 기본적으로 코딩 애플 님의 방법을 따라하였다. 📌 추가배포하기 추가적으로 github.io 개인페이지 이외에도 React 프로젝트는 계속해서 배포가 가능하다. 1. github 레포 이름은 아무렇게나 해도 되며 레포를 생성한다..
-
React Query 리액트 쿼리 사용법 사용하는 이유React/React Query 2023. 2. 28. 19:46
📌 기존의 코드는 다음과 같다. loading 이라는 값을 통해 데이터가 다 불러와졌는지를 판별한다. 그리고 데이터가 다 불러와졌다면 loading 을 false 값으로 전환하고 데이터를 setCoins 를 통해 coins 에 데이터를 담는다. 이러한 과정은 두개의 useState를 사용하게 만드는 단점이 존재한다. const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { axios .get("https://api.coinpaprika.com/v1/tickers") .then((Response) => { setCoins(Response.data.slice(0, 99)); set..
-
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 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 = ..
-
? / ?? 리액트 타입스크립트 props 전달할때 optional Chaining & null CheckReact/React+TypeScript 2023. 2. 21. 20:37
📌 지난 시간 리액트 타입스크립트 기반으로 props 를 전달해주는 방법을 배웠다. optional chaining 은 해당 prop은 전달되지 않을 수도 있다는 표현을 해줄 때 사용한다. personobj.name 은 .(chaining) personobj?.name 은 ?.(optional chaining) 이 된다. 즉 왼쪽 값이 비어있다면 해당 코드를 undefined 처리하라는 것과 같다. 아래 코드에서 추가로 보면 // interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age? : number // 🔥age가 비어있을 수도 있다. 라는 것을 암시한다. //age : number | undefined ..
-
React + TypeScript 에서 props 전달하는 법 with styled-componentsReact/React+TypeScript 2023. 2. 21. 19:51
📌 TypeScript 타입스크립트 기반 React 에서 props 를 전달하려면 어떻게 해야할까? // interface 를 통해 전달하려고 하는 props 들의 타입을 지정해준다. interface personobj { name : string, age : number } // 전달하려는 props 뒤에 interface 를 지정해준다. const SayHello = ({name, age} : personobj) =>{ return( sayHello {name} you are {age} ) } function App() { return } 📌 그렇다면 Styled-components 스타일 컴포넌트에 props 를 전달하려면 어떻게 해야할까? interface BoxProps { bgcolor : s..
-
Styled-Components 의 애니메이션 과 Pseudo Selector 를 배워보자!React/Styled-Components 2023. 2. 20. 21:34
📌 css 에서 keyframe 을 사용한 animation 은 styled-components에서 어떻게 구현할까? ...(중략) const animation1 = keyframes` from { transform:rotate(0deg); border-radius: 0px; } to { transform:rotate(360deg); border-radius: 100px; } `; ...(중략) const AnimationBox1 = styled.div` height: 200px; width: 200px; background-color: black; animation: ${animation1} 10s linear infinite; `; ...(중략) 📌 styled-components 안에서 pseudo..