Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned 모듈 모듈을 설명하고 추가 지식을 공유합니다. 모듈의 일반적 의미 - 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. - 모듈이 성립하려면 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 전역 X - 기본적으로 비공개 상태이다. 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화 되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적으로 존재하여 애플리케이션과 분리되어 존재한다. - 하지만, 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재 의미가 없다. 모듈은 재사용되어야 의미가 있다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하다. 이를 export라 한다. 모듈 사용자는 모듈이 공..

🎯목적 : 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 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 Interface (인터페이스), 정리 및 복습 1. 인터페이스란? 앞서 설명한 타입 얼라이어와 같이 객체의 형태로 구성된다 하지만, 둘은 차이점이 존재하고 인터페이스는 타입 체크를 위해 변수, 함수, 클래스 등 좀더 다양한 곳에 사용할 수 있다. // interface // 기본 속성 interface Person { name: string; age: number; } const person_1: Person = { name: "tmdgy", age: 14, }; // Error: interface에서 할당하지 않은 다른 타입을 사용시 에러발생 // const person2:Person = { // name: 12, // age: 'one' // } 2. type vs interface..

🎯목적 : 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 Union 유니온|유니언 타입, 정리 및 복습 1. 유니온 타입이란? 타입을 "or 연산자"로 2개 이상 넣을 수 있게 해준다 // Union (A || B) const printOut = (input: string | number) => { console.log(input); }; printOut("hi"); // hi printOut(22); // 22 🧪나의 실험실 // Union (A || B) const printOut = (input: string | number) => { return input; }; const test_ = typeof printOut("hi"); // hi console.log("👉👉 test_", test_); //👉👉 test_ str..

🎯목적 : 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..