Dev/React5 기존 Vite + React 프로젝트에 TypeScript 추가하기 (마이그레이션 정리) 📚사이드 프로젝트를 새로 시작했다.기존에 세팅은 되었던 프로젝트라, Vite + React(JavaScript) 프로젝트에 TypeScript를 추가하면서 겪었던 과정과 필요한 설정을 정리해보았다.1. TypeScript 설치먼저 프로젝트에 TypeScript와 React 타입을 설치한다.npm install -D typescript @types/react @types/react-dom설치가 완료되면 TypeScript 설정 파일을 생성한다.npx tsc --init그러면 프로젝트 루트에 tsconfig.json 파일이 생성된다. 2. tsconfig.json 설정기본 생성된 tsconfig.json을 Vite 환경에 맞게 일부 수정했다.{ "compilerOptions": { "target":.. 2026. 3. 12. "리액트는 가상 DOM을 사용하여 성능을 최적화합니다." 가 무슨 말이야? ☕프론트엔드를 공부하다 보면 한 번쯤은 이런 문장을 보게 된다.“리액트는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화합니다.” 그런데 처음 보면 이게 무슨 말인지 꽤 추상적으로 느껴진다.이 문장이 실제로 무엇을 의미하는지, 그리고 왜 성능이 좋아지는지 정리해보았다.1. DOM이란 무엇인가?먼저 DOM(Document Object Model)부터 이해해야 한다.웹페이지는 내부적으로 DOM 구조로 관리되는데, 쉽게 말하면브라우저는 우리가 작성한 HTML을 그대로 사용하는 것이 아니라 트리 구조의 객체 형태(DOM)로 변환해서 관리한다. 예를 들어 제목 내용이 코드는 브라우저 내부에서 다음과 같은 구조로 관리된다.bodyh1p이러한 구조를 DOM이라고 한다. 2. 문제: DOM을 직접 수정.. 2023. 9. 13. 리액트 찍먹 3 - Component 컴포넌트 컴포넌트는 쉽게 말해 UI를 구성하는 UI 요소를 의미한다. 리액트 홈페이지의 공식 문서에 따르면 컴포넌트를 사용하면 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다고 설명한다. '재사용 가능'과 '개별적으로 살표 볼 수 있음'이 핵심이라고 볼 수 있을 것 같다. 컴포넌트는 간단히 이런식으로 사용할 수 있다. 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. 함수 안에 UI를 제작하여 컴포넌트를 사용할 부분에 HTML 태그를 사용하는 것 처럼 을 써주면 되는 것! 이로써 HTML을 줄여 쓸 수 있는 것이다. 이렇게 함수로 작성한 컴포넌트를 함수 컴포넌트라고 호칭하고 ES6의 class를 사용하여 정의할 수도 있는데 클래스 컴포넌.. 2023. 4. 21. 리액트 찍먹 2 찍먹 과정인 만큼 리액트로 간단하게 블로그 UI를 구성 했다! 1. navbar 생성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 차례대로 App.js와 App.css App.js의 필요없는 부분을 모두 삭제하고 네이게이션 bar만 간단히 생성했다. (정말 구색용 ㅎㅎ..) class 대신 className을 사용할 것! 자동완성 덕분에 헷갈릴 일은 없다. 반응형도 잘 적용 되었다! 2. 제목과 내용을 보여주는 List - state로 변수 만들기 HTML 삽입 미리보기할 수 없는 소스 state로 제목 데이터를 저장했다. App() 함수의 return 위에 작성해주면 된다. state를 사용하려면 js 파일 최상단에 꼭 import React, { useState } .. 2023. 4. 14. 리액트 찍먹 1 1. 리액트 설치 및 셋팅 node.js와 VS Code 다운로드가 필요하다. LTS 말고 현재 버전(비번역은 Current 어쩌고라 나왔을 것)을 설치 했다. (VS Code는 이미 사용 중이었어서 캡쳐 패스...) 다운로드가 완료 되었으면 Work Space를 생성해야 한다. 자신이 원하는 위치에 원하는 이름으로 원하는 폴더를 만들면 된다. 나는 C드라이브에 생성해주었다. 폴더 생성 후 상단 메뉴 중 File-Opend Folder로 방금 생성한 폴더를 불러오고 위와 같이 터미널에 npx create-react-app '프로젝트명' 을 입력해준다. 프로젝트를 생성하는 방법이다. 코드 입력 전 빨간 밑줄친 부분을 확인 해야하는데 빨간 밑줄이 본인이 생성한 폴더명으로 끝나야 폴더를 잘 불러온 것이다. 코.. 2023. 4. 13. 이전 1 다음
