타입스크립트 썸네일형 리스트형 23.12.18 리액트 타입스크립트 todolist 개인 과제로 타입스크립트 를 사용한 리액트 todolist를 만들어보았다 시작은 yarn create react-app (이름은 아무거나) --template typescript useState 사용후 제네릭을 이용해 타입 지정 맵으로 뿌려주는데 불리언 타입은 적용이 안되서 toString 으로 해결 key값을 부여하는데 number는 들어갈수가 없다고 합니다 스트링 타입을 부여해서 해결 할일 목록 {todos .filter((todo) => todo.isDone === false) .map((todo) => ( {todo.title} {todo.contents} 완료 여부 : {todo.isDone.toString()} ))} 필터를 이용해 할일 완료 미완료도 구분지어 준다 타입 오류가 뜬다 { eve.. 더보기 리액트에서 타입스크립트 사용시 기초개념 23.12.14 리액트에서 타입스크립트를 바로 적용할수있도록 기본 개념들을 배워보았다 1. 함수에서 TS 사용하기 function sum(a: number, b: number): number { return a + b; } // 이렇게 인자 부분에 일일히 : 으로 오른쪽에 원하는 타입을 넣어 줄수도있지만 function objSum({ a, b }: { a: number; b: number }): string { //리턴하는 부분도 string 형식이기에 오브젝트(객체) 형식으로 이용 할시에는 넘어가는 객체에 { a: number; b: number } 이런식으로 지정가능 return `${a + b}`; } // 백틱 `` 을이용하여 문자열로 바꿔 주어야 오류없이 함수에서 TS가 사용가능하다 2.비동기 함수에서 TS .. 더보기 타입스크립트로 리액트 카운트 앱 만들기23.12.13 타입스크립트를 이용한 간단한 리액트 카운트 앱을 만들어봤다 리액트 프로젝트를 타입스크립트로 세팅하는 방법은 2가지가 있다고하는데 💡 **리액트 프로젝트를 TS로 세팅하는 방법은 두 가지가 있습니다.** 1. 프로젝트 생성 초기부터 이미 리액트 전용 TS를 세팅하여 시작하는 방법 - 특징 1. 프로젝트 초기부터 TS 관련 옵션이 모두 설정되어 있으므로 상당히 간편하고 빠르게 프로젝트를 시작할 수 있습니다. 2. 초기 설정과 빌드 시스템이 이미 TypeScript를 지원하도록 구성되어 있으므로, TypeScript로 바로 작업을 시작할 수 있습니다. 3. 프로젝트 구조가 이미 TypeScript 프로젝트에 최적화되어 있어 처음부터 일관성 있는 코드를 작성할 수 있습니다. 2. CRA로 리액트 프로젝트를 구성.. 더보기 타입 스크립트(TypeScript) 23.12.12 타입 스크립트... 아직 자바 스크립트도 잘 못하지만 어느새 타입 스크립트를 입문하게되었다 일단 뭔지나 알아보자 1.TypeScript 란 무었인가 TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어입니다 (TypeScript는 1) JavaScript의 모든 기능을 포함하고 2) 추가적인 기능을 제공합니다!) 1-1TypeScript는 왜 등장했을까? 자바 스크립트의 약점 을 보완하기위해 등장한게 타입스크립트 라고 합니다. 자바스크립트는 원래 HTML에 동적 상호작용을 위해 사용되는 언어였지만 구글의 V8 엔진이 나온이후 Node.js 라는 플랫폼이 등장 이때부터 JS만으로도 백엔드 작성이 가능해졌습니다 하지만 우리는 JavaScript는 동적 타입 언어였다는 것을 잊고있었는데.. 더보기 이전 1 다음
