dev-hpk 님의 블로그

1. 프로젝트 생성터미널을 이용해 프로젝트를 생성합니다.npm create vite@latest ts_project -- --template react-ts 위 명령어에서 ts_project는 프로젝트 폴더 이름입니다. 원하는 이름으로 변경할 수 있습니다.프로젝트 폴더가 생성되었다면 폴더로 이동 후 패키지를 설치합니다.cd ts_projectnpm install 설치가 완료되면, 프로젝트의 기본 구조와 주요 파일들이 자동으로 생성됩니다. 2. 프로젝트 구조Vite와 TypeScript 템플릿을 사용해 생성된 프로젝트는 기본적인 파일 구조가 설정되어 있습니다.src: 소스 코드가 포함된 폴더로, 컴포넌트와 유틸리티 파일들을 여기에 배치합니다.assets: 이미지, 아이콘, 폰트등 정적 파일을 저장하는 폴더..

목차 1. Vite 2. React 3. TypeScript 4. Vite + React + TypeScript 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. ViteVite는 최근 많은 개발자들 사이에서 주목받고 있는 빌드 도구입니다. 기존의 Webpack을 대체하는 대안으로, 빠른 빌드 속도와 개선된 개발 환경을 제공합니다. Vite를 선택한 이유는 다음과 같습니다.빠른 개발 서버 : Vite는 코드 변경 시 전체 프로젝트를 다시 빌드하는 대신, HMR( 핫 모듈 리플레이스먼트)를 통해 변경된 부분만 빠르게 업데이트하기 때문에 개발 서버가 매우 빠릅니다. 이로 인해 개발 중에 빠른 피드백을 받을 수 있어 생산성이 크게 향상됩니다.ES 모듈 기반 : Vite는 ES 모듈을 기반으로 ..

타입스크립트를 사용하다 보면 여러 타입 변환이나 특정 속성만을 추출하고 싶은 상황이 자주 생깁니다. 이때 유용하게 활용할 수 있는 것이 타입스크립트가 제공하는 유틸리티 타입입니다.  목차 1. Record 타입 2. Pick 타입 3. Partial 타입 4. Omit 타입 5. Readonly 타입 6. Required 타입추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Record 타입Record 타입은 키(key)와 값(value)의 타입을 정의하여 객체 타입을 생성할 때 사용됩니다. 특정 키에 해당하는 값 타입을 일괄적으로 설정하고 싶을 때 유용합니다.Record// Keys: 객체의 키 타입을 지정 (key의 union 타입도 가능)// Type: 객체 값의 타입을 지정type U..

TypeScript는 JavaScript에 타입을 추가한 언어로, 코드의 오류를 줄이고 유지보수를 쉽게 해 줍니다. 이번 포스팅에서는 TypeScript의 주요 기능을 중심으로 기초 문법을 함께 다뤄보겠습니다. 목차 1. 타입 지정 2. 함수의 타입 3. 인터페이스 (Interface) 4. 제네릭 (Generics)추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 타입 지정TypeScript의 기본 기능 중 하나는 타입을 지정하는 것입니다. 변수, 함수의 매개변수, 반환 값 등에 타입을 지정할 수 있어 코드의 가독성을 높이고 오류를 줄입니다.const name: string = "Kim";const age: number = 20;const isAdult: boolean = true; 타입..

TypeScript는 JavaScript를 기반으로 타입 안정성을 강화한 언어로, 규모가 큰 애플리케이션에서 발생할 수 있는 오류를 줄이고 코드 유지보수를 쉽게 만들어줍니다.  목차 1. TypeScript란? 2. TypeScript 설치 3. TypeScript 파일 작성 및 컴파일 4. TypeScript 설정 파일: tsconfig.json추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. TypeScript란?TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, 정적 타입을 지원합니다. TypeScript의 주요 장점은 코드의 가독성과 유지 보수성을 높여 주며, 컴파일 과정에서 오류를 미리 확인할 수 있다는 점입니다. JavaScript 코드와 호환되며, 컴..