부트캠프교육중/react80 [React] TypeScript + eslint + prettier 중 발생한 오류 해결 https://velog.io/@hongdol/React-CRATS-eslint-prettier-vscode-%EC%84%A4%EC%A0%95%EC%B6%A9%EB%8F%8C-conflict [React] CRA(TS) + eslint + prettier + vscode 설정충돌 conflict npx든 yarn 이든 CRA로 설치하면 package.json 에 기본 세팅되어있는 eslintConfig 제거eslint는 다들 아실테고 나머지 두 개는 왜 깔까? 간단하게 설명하자면 ESlint와 prettier가 충돌이 났을 때 어떻게 할건지 velog.io 이 블로그를 참고하며 천천히 설치했다. 근데 오류 안나다가 react router dom을 연결하면 [eslint] Failed to load con.. 2023. 8. 28. [React] recoil적용하기 npm install recoil //index.tsx import { RecoilRoot } from 'recoil'; 이거추가한다. 그럼 이렇게 된다. //index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { QueryClient, QueryClientProvider } from 'react-query'; import { RecoilRoot } from 'recoil'; const queryClient = new QueryClient(); const root = ReactDOM.createRoot( document.getElementById('root') .. 2023. 8. 27. [React] Dark모드, Light모드 적용하기 index.tsx 에 있던 이것을 app.tsx로 옮긴다. theme를 darkTheme와 lightTheme로 나눠서 만들어준다. //theme.ts import { DefaultTheme } from "styled-components"; export const darkTheme:DefaultTheme = { bgColor: "#1e272e", textColor: "black", accentColor: "#f53b57", } export const lightTheme:DefaultTheme = { bgColor: "whitesmoke", textColor: "black", accentColor: "#f53b57", } 버튼을 만들어서 적용한다. //app.tsx import React, { useSta.. 2023. 8. 27. [React] React query 적용 후 코드 index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { ThemeProvider } from 'styled-components'; import { theme } from './theme'; import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClient(); const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( ); api.ts c.. 2023. 8. 26. 이전 1 2 3 4 5 6 ··· 20 다음