1ncode 님의 블로그

React + TypeScript 시작할 때 헷갈렸던 개념 정리 (JSX, TSX, 빌드)React 프로젝트를 처음 시작하면 이런 질문이 생긴다.JSX는 뭐지?TSX는 또 뭐지?TypeScript는 왜 쓰지?빌드는 왜 필요하지?그래서 React 프로젝트 구조 기준으로 정리해봤다. 1. React에서 JSX를 사용하는 이유React에서 UI를 만드는 기본 방식은 원래 이런 코드였다.React.createElement("h1", null, "Hello") 하지만 이렇게 작성하면 코드가 너무 복잡해진다.그래서 React에서는 JSX라는 문법을 사용한다.Hello이렇게 작성하면 HTML처럼 UI를 쉽게 작성할 수 있다. 하지만 중요한 점이 있다. JSX는 HTML이 아니다.JSX는 JavaScript 안에서 ..

1. React 프로젝트 구조 이해React 프로젝트는 어떻게 실행될까? 1) 시작점 : index.html 브라우저가 가장 먼저 읽는 파일 여기서 중요한 것!React 앱이 여기에 들어감!! 그리고!React 앱을 실행하는 파일 이다. 2) 두번째 : main.tsx여기서 React 앱을 실행함createRoot(document.getElementById('root')).render( ) 첫번째, root div 찾기document.getElementById("root") 두번째, React 앱을 거기에 넣기 3) 세째 : app.tsxfunction App() { return ( Vite + React )}return 내부에 React UI 코드 작성 4) 전체흐름inde..

1. tsconfig.app.json 파일타입스크립트를 Vite로 프로젝트 생성 후확인해야 하는 파일은 tsconfig.app.json 파일이다. 이 파일은 React 애플리케이션(src 폴더)의 TypeScript 설정 파일이다.여기서 중요한 것은 이 두 가지를 이해하는 것이다.compilerOptionsinclude 2. compilerOptions compilerOptions는TypeScript가 코드를 어떻게 검사하고 변환할지 설정하는 옵션이다. 예를 들어어떤 JavaScript 버전으로 변환할지타입 검사 규칙모듈 방식같은 것들을 설정하는 역할을 한다. 왜냐??타입스크립트는 컴파일러(변환기) 이다. 브라우저는 TypeScript를 바로 실행할 수 없기 때문에TypeScript 코드를 Java..