Frontend/React3 [React] React 19에서 react-query 안될 때 오랜만에 react + ts 뇌를 다시 깨우면서 과거에 유료결제 했던 강의를 보고 있는데그 당시 버전으로는 되었던 것들이 이제 와서는 충돌이 생긴다 ㅠㅠ 최신 버전에 맞춰서 오류를 해결해가며 한 번 프로젝트를 작성해보자그러다보니이젠 CRA도 안쓰고 vite를 사용하여 react 프로젝트를 v19로 생성하는데,더이상 react-query는 해당 버전을 지원하지 않는 것이었다. ( v18 까지만 지원 ) 이유를 찾아보니 " Vue나 Svelte 등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되며 TanStack Query라는 이름으로 변경되었다 " 라고 한다 ㅡ.ㅠ heropy님 블로그를 참고하여 TanStack Query를 설치하여 이용하자https://www.heropy.dev/p/HZaKIE .. 2025. 7. 21. [React] 리액트 라우터 사용 방법 ( React router , v6, v7 ) React Router 은 React 앱에서 페이지 이동을 도와주는 도구다.예를 들어 홈페이지에서 로그인 페이지로, 로그인 페이지에서 마이페이지로 이동할 때 필요한 기능들을 제공한다. 2024년 11월 22일 React Router가 v7을 출시하면서 그 이전 버전인 v6과는 차이점이 있으니유의하여 다루어 보도록 하자1. Vite로 프로젝트 생성npm create vite@latest이후 원하는 react 프로젝트 생성 2. React rotuer 설치v6npm install react-router-domv7npm install react-router 이제는 패키지 하나로 모든 기능을 쓸 수 있어서 react-router만 설치해주면 된다.기존 코드를 v6에서 v7로 업그레이드할 때에도 import 부분.. 2025. 7. 21. [React] styled-component 사용법 React에 css를 적용하는 기본적인 방법은 세 개로 나눌 수 있다.1. Css 파일 import하기2. style prop에 js 객체로 스타일 코드 넣어주기3. Css 모듈 사용 하지만 styled-component를 사용하면css 파일을 나눌 필요도 없으며, 기본 html 태그에 커스텀 이름을 붙여줄 수 있다. 설치 및 설정우선 npm create vite로 react 프로젝트를 생성하자.그다음 styled-components 라이브러리를 install 하자npm i styled-components 기본 컴포넌트 생성styled.HTML태그명 에 템플릿 리터럴을 사용하여 CSS를 작성한다.import styled from 'styled-components';const Button = styled... 2025. 7. 17. 이전 1 다음
