본문 바로가기
728x90

typescript9

[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.
[StudySync 프로젝트] Vue 3 + TypeScript + Tailwind CSS로 StudySync 프론트엔드 설정 2025년 4월 18일StudySync 프로젝트는 AI 기반 학습 플래너 웹 앱이다. Vue 3, TypeScript, Tailwind CSS로 프론트엔드를 설정하고, Spring Boot, JPA, MySQL로 백엔드를 구현한다. 오늘은 프론트엔드 초기 설정(Vite, Tailwind CSS, ESLint, Prettier)을 완료했다. IntelliJ와 GitHub 저장소(study_sync)를 사용해 진행한 과정을 기록한다.프로젝트 개요StudySync는 학습 목표를 설정하면 AI(ChatGPT API)가 맞춤형 계획을 생성하는 앱이다. 주요 기능은 다음과 같다:사용자 인증(JWT 기반)AI 기반 학습 계획실시간 퀴즈, 커뮤니티 피드반응형 UI, PWA프론트엔드는 Vue 3, TypeScript, .. 2025. 4. 19.
[AutoSume 프로젝트] React, Spring Boot, ChatGPT로 웹앱 개발: AutoSume 기술 학습 기록 1. 개요AutoSume는 React, Spring Boot, ChatGPT API를 활용해 자소서 자동 생성과 채용 공고 분석을 구현하는 풀스택 프로젝트이다. 이 포스트는 프로젝트에 사용된 기술(React, TypeScript, Tailwind CSS, Spring Boot, JPA, Spring Security, Python, FastAPI, BeautifulSoup, ChatGPT API, MySQL, JWT)의 핵심 개념과 학습 내용을 정리한다. 초보 개발자로서 기술을 배우고 포트폴리오를 만드는 과정이 목표다.1.1 학습 목표React와 TypeScript로 동적 UI 구현.Spring Boot와 JPA로 REST API와 데이터베이스 연동.ChatGPT API로 AI 기반 자소서 생성.Pytho.. 2025. 4. 18.
[AutoSume 프로젝트] React를 활용한 프론트엔드 개발 진행중 1. 프로젝트 개요AutoSume는 채용 공고 분석과 자소서 자동 생성을 목표로 하는 개인 풀스택 프로젝트이다. React, TypeScript, Spring Boot, ChatGPT API를 활용해 개발 중이며, 취업 준비생을 위한 도구로 기획했다. 이 포스트는 프로젝트 구조, 기술 스택, 개발 과정, 학습 내용을 기록한다.1.1 주요 기능자소서 생성: 사용자 입력을 ChatGPT API로 처리해 자소서 답변 생성.자소서 관리: 생성된 자소서를 목록으로 저장, 조회, 삭제.다운로드: 자소서를 PDF 또는 텍스트로 내보내기.인증: 로그인/회원가입으로 사용자별 자소서 관리.크롤링(예정): 채용 공고 데이터 수집 및 기술 트렌드 분석.1.2 목표풀스택 개발 학습: 프론트엔드, 백엔드, AI 연동 경험.포트폴.. 2025. 4. 18.
🚀 Vite + React + TypeScript + Tailwind CSS로 포트폴리오 웹앱 개발 환경 구축하기 AutoSume 프로젝트는 자기소개서를 빠르게 작성하고 관리할 수 있는 개인용 웹 애플리케이션이다.이번 글에서는 Vite 기반으로 React + TypeScript + Tailwind CSS 개발 환경을 구성하고, React Router로 기본 라우팅 구조를 잡는 것까지 진행한 과정을 정리한다.🧱 사용 기술 스택 개요기술설명Vite빠른 빌드 속도를 제공하는 차세대 프론트엔드 빌드 도구이다.React컴포넌트 기반 UI 라이브러리로, 사용자 인터페이스를 효율적으로 구성할 수 있다.TypeScript자바스크립트에 타입 시스템을 추가한 언어로, 안정적인 코드 작성에 도움을 준다.Tailwind CSS유틸리티 기반의 CSS 프레임워크로, 클래스 조합으로 빠르게 UI를 구성할 수 있다.React RouterSPA.. 2025. 4. 11.
[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.
728x90