Programming/React & TypeScript 13

[React x Typescript] Route 관련 에러...<Uncaught Error: useRoutes() may be used only in the context of a <Router> component>

하나 해결하면 하나 안되고 하나 해결하면 여러 개 안되고 돌아버리겠습니다요... 리액트에서 타입스크립트 넘어가는거 쉽지 않네요... 휴 에러1_Uncaught Error: useRoutes() may be used only in the context of a component :: 응 그냥 로 안 감싸서 그랬다 이거야.... //index.tsx import React from 'react'; import {createRoot} from 'react-dom/client'; import {BrowserRouter} from 'react-router-dom'; import './index.css'; import App from './App'; const rootElement = document.getElem..

[React x Typescript] App.tsx, Index.tsx 설정하는 방법

React 프로젝트에 Typescript 사용할 때 App.tsx와 index.tsx을 설정하는 방법에 대해서 정리합니다. *App.tsx import './App.css'; const App: React.FC = () => { //{: React.FC는 없어도 잘 동작합니다. } return ( MAIN ); } export default App; 그렇다면 React.FC 는 무슨 역할을 하는 친구일까요?? > **FC** 라는 제네릭 타입을 이용하여 함수형 컴포넌트들이 타입스크립트로 작성 할 수 있게 해주는 역할을 합니다. 잠깐.. 근데 이젠 더이상 " React.FC " 를 사용하지 않는다구요..? :: 참고 - React.FC를 사용하지 않는 이유 > 굳이 React.FC를 쓰는 것보다 props..

Vite로 React 프로젝트 시작해보기

보통은 React 프로젝트 생성할 때 속칭 ' CRA ' 라는 Create-React-App 명령어를 실행합니다. 하지만 CRA는 빌드하는데 시간이 너무 오래 걸리고 양이 커서 불편할 때가 있습니다.Vite 간결한 모던 웹 프로젝트 개발에 초점을 맞춘 빌드 도구입니다. 계속 CRA만 썼기 때문에 Vite로 조그마한 프로젝트를 만들어 보려고 합니다. Vite로 프로젝트 생성 과정 npm create vite@latest 이후 이런 식으로 선택지를 통해 프로젝트 기초를 설정할 수 있습니다. Javascript 뿐만이 아니라 Typescript도 선택할 수 있었습니다. SWC가 뭔지 모르겠지만 한번 선택해 보았습니다. SWC에 대해서는 위의 카카오 블로그에서 잘 설명 되어있으니 내일 읽어보려고 합니다. * p..