728x90 리액트5 [AutoSume 프로젝트 이슈] [React + TypeScript] children 관련 타입 오류와 React Router 연동 시 발생하는 타입 에러 해결법 정리 💡 에러 개요React + TypeScript로 작업 중 App.tsx에서 MainLayout 컴포넌트를 사용하는 부분에서 아래와 같은 타입 오류가 발생했다.// App.tsximport { Outlet } from "react-router-dom";import MainLayout from "./layouts/MainLayout";function App() { return ( );}⚠️ 발생한 에러 메시지Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)(alias) function MainLayout(): JSX.Element🔍 에러 원인이 에러는.. 2025. 4. 22. [React] React 프로젝트에 prettier & eslint 설치하기 PrettierPrettier란?Prettier는 코드 포매터로, 소스 코드를 일관되게 포맷팅해주는 도구임. 여러 개발자들이 협업할 때 코드 스타일이 통일되지 않으면 가독성 이 떨어지고, 코드 리뷰가 복잡해질 수 있음. Prettier를 사용하면 다음과 같은 장점이 있음:일관성: 팀 내 모든 코드가 동일한 스타일로 포맷됨.생산성 향상: 코드 스타일에 대한 논의나 고민을 줄여줌.자동 포맷팅: 파일을 저장할 때 자동으로 포맷팅할 수 있어 편리함.https://prettier.io/docs/ What is Prettier? · PrettierPrettier is an opinionated code formatter with support for:prettier.io 설치 명령어Prettier를 설치하는 방법은.. 2025. 2. 18. [React] React 프로젝트 생성 후 최초 렌더링 과정 이해하기(Vite 설치) Vite를 통해 React 프로젝트를 설치 후 실행을 시키면 아래와 같은 화면을 만날 수 있다. 그리고 실제 생성된 폴더구조를 보면 다음과 같다 위 폴더 구조 안에서 저 최초 화면이 어떻게 렌더링 되는건지 간단히 정리해보려 한다. 전체 구조project-folder/├── src/│ ├── App.tsx│ ├── main.tsx│ ├── index.css│ ├── assets/│ │ ├── react.svg│ │ └── vite.svg├── index.html 1. index.html역할 : 이 파일은 웹 페이지의 기본 구조를 정의합니다. 브라우저가 처음 로드할 HTML임주요 내용: : React 애플리케이션이 이곳에 렌더링됨 : main.tsx 파일을 로드하여 React.. 2025. 2. 18. React + Typescript 설치 오류 해결 React + Typescript 프로젝트를 연습해보기 위해 아래 글을 참고하여 프로젝트를 만들어봤다.https://time-memorizer.tistory.com/203 React 설치 오류(react@19.0.0 관련)React JS를 공부해보려고 인터넷을 찾아 설치하려고 하는데 오류가 발생했다.npx create-react-app first-appCreating a new React app in /Users/hyosukjung/git/react-app/first-app.Installing packages. This might take a couple of minutestime-memorizer.tistory.com npx create-react-app [프로젝트 이름] --template types.. 2025. 1. 25. React 설치 오류(react@19.0.0 관련) React JS를 공부해보려고 인터넷을 찾아 설치하려고 하는데 오류가 발생했다.npx create-react-app first-appCreating a new React app in /Users/hyosukjung/git/react-app/first-app.Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts with cra-template...added 1323 packages in 2m267 packages are looking for funding run `npm fund` for detailsInstalling template dependencies using np.. 2025. 1. 21. 이전 1 다음 728x90
