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 안에서 ..

Vite에서 CSS Module이 DevTools에 로만 보일 때 해결하기 React + Vite 환경에서 CSS Module을 사용하다 보면브라우저 DevTools에서 스타일 출처가 파일이름.css처럼 바로 보이지 않고,로만 표시되는 경우가 있다. 이럴 때 CSS 파일 위치를 바로 찾기 불편한데,이유는 Vite가 개발 환경에서 CSS sourcemap을 기본 활성화하지 않기 때문이다. https://vite.dev/config/shared-options#css-devsourcemap 공식 문서에서 css.devSourcemap은 개발 중 CSS sourcemap을 활성화하는 옵션이며,기본값은 false라고 안내하고 있다. 왜 이 설정이 필요한가?CSS sourcemap이 꺼져 있으면DevTools에서..

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..

1. 프로젝트 폴더 생성프로젝트를 작업을 진행 할 빈 폴더를 생성 한다. 2. Bun을 사용한 vite 설치1) vite 명령어를 사용bun create vite@latest learning-reactbun 도구를 사용하고vite 최신버전을 이용해서 learning-react라는 이름의 새 프로젝트를 만들어라 [참고 url]https://vite.dev/guide/ ViteNext Generation Frontend Toolingvite.dev스캐폴딩(Scaffolding)이란?!프로젝트 기본 틀을 자동으로 만들어주는 것 2) framework 선택프레임워크 React 선택 3) 프로젝트에서 사용할 코드 스타일 TypeScript 선택 4) 스캐폴딩 완료 5) vite를 사용한 환경세팅eslint.c..