[React] React Query 설치하기

실시간 데이터가 중요할 때 react-query 를 사용한다 서버를 사용하면서 ajax 성공했을 경우와 실패 했을 경우에 다른 html을 보여주고 싶은 경우 몇 초마다 자동으로 ajax 요청을 하고싶거나 실패시 몇 초후에 요청을 재시도 하고싶은 경우 실시간 데이터를 계속 가져와야하는 사이트들에서 사용하면 좋다 설치 하는 방법 npm i @tanstack/react-query https://tanstack.com/query/v4/docs/react/installation Installation | TanStack Query Docs React Query is compatible with React v16.8+ and works with ReactDOM and React Native. If you're no..

• format_list_bulleted 🔖React_TS
• · 2024. 1. 19.
• textsms

[React]Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions.Please use the error stack to find the culprit call. More info here:

Bad argument type. Starting with v5, only the "Object" form is allowed when calling query related functions. Please use the error stack to find the culprit call. More info here: react-query 공부하는데 진짜.. 강사님 보면서 따라하는데 버전이 다른건지 계속 문제가 생겨서 몇시간을 버리다가 드디어 문제를 해결함.. // let result = useQuery('useReactQuery',()=>{ // return axios.get('https://codingapple1.github.io/userdata.json') // .then((a)=>{ return a..

• format_list_bulleted 🔖React_TS
• · 2024. 1. 19.
• textsms

[React:Error] Cannot read properties of null (reading 'useRef')

Cannot read properties of null (reading 'useRef') react-query를 설치하면서 index.js 를 수정하다가 문제가 생긴거같은데 인터넷에 검색을 해보니 뭐.. 경로가 맞지 않거나 버전이 호환되지 않아서 그런 문제라는 말이 많아서 혹시 몰라서 일단 react를 update를 해주었다 npm update를 했더니 뭔가 관련된 문제가 나온거 같긴한데 아직도 정확하게 뭔지는 모르겠다 Module build failed (from ./node_modules/source-map-loader/dist/cjs.js): Error: ENOENT: no such file or directory, open 'D:\Github\React\shopping-mall\node_modul..

• format_list_bulleted 🔖React_TS
• · 2024. 1. 19.
• textsms

[React] 로컬스토리지 사용하는 방법

새로고침 하면 state 초기값으로 돌아간다 초기값으로 돌아가지 않게 하기 위해서는 서버나 데이터베이스(DB)에 영구저장 해주어야 한다 서버나 DB가 없다면 localStroage를 사용해서 브라우저 안에 정보를 저장해서 사용할 수 있다 localStorage 들어가는 방법 크롬개발자 도구에서 Application 탭으로 들어간다 localStorage 는 최대 5MB 까지 저장이 가능하고 문자로만 저장이 가능하다 반영구적으로 데이터가 남아 있기 떄문에 삭제를 하기 위해서는 브라우저를 청소를 해야한다 localStorage 에 데이터 저장하기 localStorage.setItem('데이터 key 이름','데이터 value 값') localStorage 에서 데이터 출력하기 localStorage.getI..

• format_list_bulleted 🔖React_TS
• · 2024. 1. 17.
• textsms

리액트(React) styled-components 설치 & 사용하기

styled-components 설치 & 사용 styled-comforts는 "CSS-in-JS"(JavaScript의 CSS)라는 기술을 사용하여 React 애플리케이션의 스타일을 지정하는데 사용되는 JavaScript 라이브러리이다 터미널을 열어서 다음 명령어를 실행해 라이브러리를 설치해준다 npm install styled-components styled-componets를 사용하기 위해서는 디자인 작업을 하는 폴더의 상단에 선언을 해주어야한다 import style from "styled-components"; 이렇게 하면 styled-componets를 사용할 수 있게 된다 styled. 기능을 이용해서 javascript 안에서 디자인 구현이 가능하도록 해준다 const StyledButton..

• format_list_bulleted 🔖React_JS
• · 2023. 11. 27.
• textsms

리액트(React) 라우터 설치&셋팅

리액트에서 페이지 나누는 방법 리액트를 사용하지 않는 경우 페이지를 나눌 때 html 파일을 만들어서 상세페이지 내용을 채우고 사용자가 접속을 했을 때, html 파일을 보내 페이지를 보여주는 방식으로 되어있다 리액트에서는 html을 하나만 사용하기 때문에 컴포넌트를 만들어서 상세페이지 내용을 채워주고 사용자가 접속을 했을 때, 컴포넌트를 보여주는 방식으로 되어있다 리액트(React) 라우터 설치&셋팅 터미널 창을 열어서 npm install react-router-dom@6 라우터를 설치하는 명령어를 실행해 준다 그리고 폴더 안의 index.js 파일을 열어준다 태그를 하나 만들어서 App태그를 감싸 준다 태그를 사용하기 위해서 상단에 react-router-dom 라이브러리를 import 를 선언 해..

• format_list_bulleted 🔖React_JS
• · 2023. 11. 26.
• textsms

[React]리액트에서 이미지 넣는 방법(background-image/size/position)

리액트에서 이미지 넣는 방법 CSS 파일에서 이미지 불러오기 background-image: url("./path/to/your/image.jpg"); html 파일에서 이미지 불러오기 이미지를 넣어주기 위해서 상단에 이미지에 대한 경로를 설정해준다 import 사용할이름 from "./이미지파일 경로.jpg"; 원하는 이름안에 이미지의 경로를 작성해주고 이미지를 넣어줄 태그 안에 style 속성안에 CSS 파일과 마찬가지로 backgroundImage 를 넣어주면 이미지가 뜨는 것을 확인 할 수 있다 문자열 안에 변수를 넣어주기 위해서 + 연산자를 이용해서 다음과 같이 코드를 작성해주었다 이미지 사이즈 변경하기 background-image: url("./main-bg.jpg"); background-..

• format_list_bulleted 🔖React_JS
• · 2023. 11. 24.
• textsms

[React]리액트 부트스트랩(Bootstrap) 설치&사용

리액트(React) 부트 스트랩 사용하기 명령어는 변할 수 있기 때문에 항상 사이트로 들어가서 최신 버전의 명령어를 가져와야 한다 구글에 React Bootstrap 검색하면 나오는 최상단 사이트로 들어가준다 https://react-bootstrap.netlify.app/docs/getting-started/introduction Introduction | React Bootstrap Learn how to include React Bootstrap in your project. react-bootstrap.netlify.app Bootstrap 설치하기 터미널에서 해당 명령어를 입력해서 bootstrap을 설치해준다 css 스타일시트 설정하기 React bootstrap 에서 CSS를 사용하기 위해서..

• format_list_bulleted 🔖React_JS
• · 2023. 11. 24.
• textsms

[React]Github Pages 활성화 &리액트 build 올리기

Github Page 열기 열고자하는 프로젝트의 Repository 로 들어가준다 그리고 Setting 에 Pages 메뉴를 선택해준다 그리고 Branch에서 None을 Main으로 변경해준다 https://docs.github.com/ko/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site GitHub Pages 사이트에 대한 게시 원본 구성 - GitHub Docs 변경 내용이 특정 분기에 푸시될 때 게시하도록 GitHub Pages 사이트를 구성하거나 GitHub Actions 워크플로를 작성하여 사이트를 게시할 수 있습니다. GitHub Pages is available i..

• format_list_bulleted 🔖React_JS
• · 2023. 11. 22.
• textsms

[React]Error: Uncaught ReferenceError: React is not defined

Uncaught ReferenceError: React is not defined 해당 메세지는 프로젝트에서 React 라이브러리를 올바르게 가져오지 못했거나 참조 하지 못했을 때 나타나는 버그이다 잘 사용하던 프로젝트 코드였는데 안 된다고 해서 개발자프롬프트로 확인을 했는데 다음과 같이 떠있었다 이 프로젝트는 Class 를 만드는 프로젝트였는데 프로젝트 파일을 생성하면서 React.Componet 에서 뭔가 문제가 생긴거 같다 뭔가 프로젝트가 충돌이 일어나면 react 를 업데이트를 한번 시켜주면 되는 경우가 있길래 이번에도 업데이트를 시켜주었다 npx update 그래도 리액트는 실행이 되는데 랜더링이 되지 않는... 이번에는 'React is not defined' 라서 리액트를 새로 설치해 보았다..

• format_list_bulleted 🔖React_JS
• · 2023. 11. 22.
• textsms