본문 바로가기

코딩 정보/React36

[React][Vite] 프로젝트 시작하기 전 구축을 해보자 목차vite기반 프로젝트 시작하기나는 vite 기반으로 프로젝트를 하고자 한다. vite에 알고 싶다면?참고https://analogcode.tistory.com/39 [Vue + Vite] 근데 Vite는 뭔가요?Vue 3로 오면서 Vue 프로젝트를 만들면 Vite 기반으로 빌드설정이 이루어지게 된다. Vite는 기존의 Vue CLI를 대체하기 위한 툴이다. Vite를 이용하여 Vue 프로젝트의 스캐폴딩을 만든다라고 보면 된다.analogcode.tistory.com 다음 명령어를 실행 해주자$ npm create vite@latest 다음 창에서 리액트를 선택해 주자 그후 자바스크립와 타입스크립트 중 선호하는 것을 고르자 eslint 설정하기참고https://velog.io/@_jouz_ryul/ES.. 2024. 8. 28.
[React][React-Query] React-Query를 통해 fallback을 구현해 보자 목차 리액트 라우터와 함께 react-query로 fallback을 구현하는 방법에 대해 알아보자아래 라우터의 기본적인 사용방법이 나와있다..참고https://be-senior-developer.tistory.com/180 [React][Tanstack Query] 개념과 활용 방법에 대해 알아보자목차 간단한 설명은 아래 페이지에 있다.참고https://be-senior-developer.tistory.com/94 [React] React-Query 라이브러리가 무엇인지 알아보자목차 오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었be-senior-developer.tistory.com fallback이란? 어떤 기능이 약해지거나 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 말한다... 2024. 8. 27.
[React][React Pattern] 컴파운드 컴포넌트에 대해 알아보자 목차 컴파운드 컴포넌트란? Compound Components는 React의 강력한 기능 중 하나로 Compound Components를 사용하면 유연하고 재사용 가능한 컴포넌트를 설계할 수 있으며, 코드의 가독성과 유지 보수성을 높일 수 있다.html 요소를 통해 예를 들면  과 가 있다. 둘은 각각 썻을 때 별 기능이 없지만 함께 하면 유용한 기능을 사용할 수 있다.  컴파운트 컴포넌트 리액트 패턴 만들기  Accordion.jsx import { createContext, useContext, useState } from "react";import AccordionItem from "./AccordionItem";const AccordionContext = createContext();export .. 2024. 8. 26.
[React][Tanstack Query] 개념과 활용 방법에 대해 알아보자 목차 간단한 설명은 아래 페이지에 있다.참고https://be-senior-developer.tistory.com/94 [React] React-Query 라이브러리가 무엇인지 알아보자목차 오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었다. 말하는 감자인 나는 당연히 모르기 때문에 이번 기회에정리해보고자 한다.. 리액트 쿼리의 필요성 캐시동일한 데이터에be-senior-developer.tistory.com 다음과 같이 QueryClientProvider를 사용해 주자useQuery로 데이터 불러오기 main.jsximport { Navigate, RouterProvider, createBrowserRouter,} from "react-router-dom";...import { QueryC.. 2024. 8. 26.
728x90