Frontend 개발자 - hyo.loui

🎯목적 : 타입 스크립트 리펙토링 과정 정리 🤢 트러블 슈팅 : Comment 타입 overlap 에러 1. typescript 환경 세팅 Develife 프로젝트는 리액트로 다 작성되어 배포까지 마친 상태였다. 처음 진행 해야하는 작업은 typescript의 패키지를 설치해야 한다 npm install typescript @types/node @types/react @types/react-dom @types/jest dependenci에 설치가 완료 된 후, tsc --init 명령어로 tsconfig.json 파일이 생성되었는지 확인한 후, jsx를 인식 못하는 오류를 방지하기 위해 주석처리 되어있는 16번째 라인의 주석을 해제하며, "JSX": "preserve", >> "JSX": "react" ..

🎯목적 : TS 타입 추론(Type Inference), 정리 및 복습 1. 타입추론 이란? 정적타입 언어를 사용할 때 단점은 타입을 정의하는데 시간과 노력이 많이 필요해서 생산성이 저하될 수 있다. TS의 경우 다양한 경우에 대해 타입추론을 제공하기 때문에 꼭 필요한 경우에만 타입을 정의할 수 있다. // Type Inference let abc = "abc"; // string let number = 2; // number // abc = 123; // Error // number = "abcd"; // Error const n1 = 123; // string const n2 = "123"; // number const array2 = [1, 2, 3]; // Array const [x1, x2, x..

🎯목적 : TS Generic (제네릭), 정리 및 복습 1. 제네릭 이란? 제네릭은 타입을 마치 함수의 파라미터처럼 사용 하는 것이다 말로만 하면 감이 잘 안오고 이해가 안된다. 하지만 파라미터의 생김새와 대조해서 머릿속에 떠올려야 이해가 잘 된다 // Generic function generic(any: T): T { return any; } generic(1); // 1 generic("1"); // "1" generic(true); // true function 함수명 여기 를 따라서 타입이 전달되고 파라미터와 함수타입 : T 에 전달된다! 2. 제네릭 활용 1. getIteArray 는 배열(파라미터)에서, index(파라미터)번째에 있는 것을 찾는 함수 2. pushItemArray 는 배열(..

🎯목적 : TS Interface extension(인터페이스 확장), 정리 및 복습 1. 인터페이스 확장 타입 별칭과 인터페이스의 차이점은 타입의 확장 가능 여부이다. 인터페이스는 확장이 가능한데 타입 별칭은 확장이 불가능하다. 이 때문에, type 보다는 interface로 선언해서 사용하는 것을 추천한다. 방법은 두가지 이다 1. extends interface 새로운 인터페이스명 + extends + 붙일 인터페이스명 // interface extenstion interface Person { name: string; age: number; } interface Korea extends Person { birth: "korea"; } // vv 아래 내용과 동일하다 interface Korean ..

🎯목적 : TS Type Alias (타입 별칭), 정리 및 복습 1. Type Alias ? 타입을 미리 객체의 형태로 선언해 둔 후 필요한 곳에서 별칭을 호출하여 사용할 수 있다. // Type Alias type Hero = { name: string; power: number; height: number; gender: "남" | "여"; }; Hero 라는 타입의 별칭! 2. 타입 별칭의 형태 // Type Alias type Hero = { name: string; power: number; height: number; gender: "남" | "여"; }; 3. 타입 별칭의 적용 const hero1: Hero = { name: "슈퍼맨", power: 100, height: 100, gen..

🎯목적 : Type Script 이넘, 정리 및 복습 1. Enum (이넘) 이란? JS에는 없고 TS에만 있는 타입 특정 값들의 집합을 의미하는 자료형 쉽게 말해, 타입형 오브젝트(객체)이다 2. 숫자형 이넘 // 숫자형 이넘 enum Direction { Up = 1, // 시작 number 설정 가능! Down, Left = 200, // 중도 number 표기시 뒤로 작성한 것들은 (+ 1) 이 된다 Right, } console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right); // 1, 2, 200, 201 const up: Direction = Direction.Up; console.log("👉👉 up", up); // ..

🎯목적 : Type Script 함수 타입 정리 및 복습 1. JS와 비교 JS // js function add(n1, n2) { return n1 + n2; } TS function add(num1: number, num2: number): number { return num1 + num2; } console.log("👉👉 add", typeof add(3, 4)); //👉👉 add number 🧪나의 실험실 // 실험 const one1 = add(1, 2); const two = add(1, "2"); // Error const three = add(1, 2, 3); // Error const four = add(1); // Error // 파라미터에서 return되는 타입이 바뀌는건 불가능 fu..

🎯목적 : Type Script 타입 총정리 및 복습 String Number Boolean Object Array Tuple Enum Any Void Null Undefined Never 1. String (문자형) JS와 마찬가지로 텍스트 데이터 타입을 string으로 표현한다. 작은따옴표('')나 큰따옴표("")로 문자열 데이터를 감싸는데 사용한다 // string let str: string = "Typescript"; // str = 1; // Error // str = true; // Error // str = undefined; // Error let fullname: string = "ABC"; let age: number = 14; let sentence: string = `my name..