본문 바로가기

프로그래밍/react40

타입스크립트로 Hooks(useState,useRef,reducer) 사용하기 기본구조 컴포넌트를 사용해야하기때문에 확장자를 tsx로 두었다. src ㄴ App.tsx ㄴ index.tsx // index.tsx import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( ); // App.tsx import React from "react"; const App = () => { return ( ); }; export default App; useState 사용하기 import React, { useStat.. 2022. 12. 6.
React-Slick로 회전메뉴(Carousel/캐러셀 사용하기) 설치하기 $ npm install react-slick --save $ npm install slick-carousel --save 세팅하기 import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 사용하기 (기본형) function SimpleSlider() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( 1 2 3 4 5 6 ); } 총 6개의 페이지를 가지고, 각 점을 클릭할때마다 해당 페이지로 이.. 2022. 11. 9.
Expected an assignment or function call and instead saw an expression Expected an assignment or function call and instead saw an expression 해석 : 할당 또는 함수 호출을 예상했지만 대신 표현식을 보았습니다. 요소를 소괄호()로 묶어주지 않았거나, return을 사용해 값을 반환함에도 중괄호{}로 묶지 않았던가. // 해결전 const defaultValue = useMemo(() => {state, dispatch}, [state]); // 해결후 const defaultValue = useMemo(() => ({state, dispatch}), [state]); 2022. 10. 31.
Uncaught TypeError: function is not iterable (cannot read property Symbol(Symbol.iterator)) 잡히지 않은 타입에러 : 함수를 반복할 수 없습니다. ( 속성 기호( 기호.반복자 )를 읽을 수 없음 ) 찬찬히 보니까 함수 뒤에 실행할때 붙이는 소괄호를 까먹었다. const [web3,account] = useWeb3; 소괄호 붙이니 함수가 문제없이 실행되면서 문제해결 const [web3,account] = useWeb3(); 2022. 10. 27.
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'call') at Hmac.CipherBase 로그인을 했을때 jsonwebtoken 라이브러리를 사용해서 토큰을 생성하려고했는데, 토큰은 무사히 생성되었지만, 토큰을 가져와서 디코딩할때 다음과 같은 오류가 생겼다. //jwt.js function decodePayload(token) { return jwt.verify(token, secretKey, (error, decoded) => { if (error) { console.log("jwt 에러발생 : ", error.message); return; } else { console.log(decoded); // 유저 정보 object 반환 } }); } Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'cal.. 2022. 10. 26.
리액트로 동적라우팅 구현하기 ( react router v6 버전을 사용하고 있다. ) 지정되어있는 주소로 이동하는건 react-router-dom에 있는 ROUTER와 LINK로 구현한다. 매번 파라미터가 바뀌는 페이지로 이동하려면 동적 라우팅을 구현해야한다. Path Parameter 라우트 경로 끝에 매번 바뀌는 id값을 저장한다. //boardRouter.js router.post("/viewBoard/:id", boardController.viewBoard); useNavigate navigate 함수의 첫번째 인자에 이동하고 싶은 경로를 넣어주고, 두번째 인자의 state속성엔 전달하고 싶은 정보를 파라미터에 넣어서 전달할 수 있따. 여기에선 타이틀을 클릭하면 해당 게시글로 이동하도록 함수를 생성했다. //boardIte.. 2022. 10. 24.
a태그 대신 react-router-dom으로 링크 연결하기 REACT-ROUTER-DOM 기능별 설명 BrowesrRouter as Router 메뉴의 모든것을 감싸는 최상의 컴포넌트. 컴포넌트명이 길어서 보통 Router 로 줄여서 쓴다. Link 컴포넌트 a태그는 그 링크로 이동시켜줘서 더이상 사용을 못함 history.pushState()처럼 url만 바꿔주는 기능을 사용해야함 그게 Link 컴포넌트. Routes 컴포넌트 여기부터가 메뉴야! 메뉴의 범위를 지정해준다. 컴포넌트가 보여줄 영역을 감싸는 컴포넌트. Route 컴포넌트 메뉴 하나당 하나씩 할당할 수 있으며, URI에 맞는 컴포넌트를 찾아주는 컴포넌트. react-router-dom 설치하기 버젼 V6 (21.12.17)에 나온 기능이다. 이전 버전과는 차이가 있으니 사용하는 버전을 알고 사용하자.. 2022. 10. 22.
전역 스타일 만들고 적용 / GlobalStyle createGlobalStyle 설치하기 npm i styled-components 전역적으로 적용하고 싶은 스타일 작성하기 // GlobalStyles.jsx import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` html, body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } * { padding: 0; margin: 0; box-sizing: border-box; text.. 2022. 10. 22.
react 업데이트 stream, polyfill 이슈 잘만 사용하고있던 리액트가 갑자기 이런 에러를 와장창 띄웠다. 뭔데.. 그저 새로운 리액트 파일 생성한거밖에 없는데... Compiled with problems: ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227 Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Username\Projects\testProject\client\node_modules\eth-lib\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify .. 2022. 8. 21.
react query) 너무나 쉬운 리액트 비동기관리 설치 $ npm i @tanstack/react-query 세팅 QueryClinet 인스턴스를 만들어준 후, 사용하고 싶은 디렉토리의 최상위 컴포넌트를 QueryClientProvider로 감싼다. import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; const queryClient = new QueryClient(); const App = ({ Component, pageProps }) => { return ( ); }; export default App; [ useQuery : get 요청 보내기 / 데이터 읽기] useQuery에서 쓰이는 queryKey & queryFn // 1 const res = useQuery(.. 2022. 8. 13.

티스토리툴바