본문 바로가기

취업12

Typescript #3 인터페이스(interface) 타입스크립트 인터페이스에 대해 알아보자.let user:object;user = { name: 'xx', age: 30}console.log(user.name) // user의 name을 찍어보면 에러가 발생한다. 오브젝트에는 특정 속성값의 정보가 없기 때문이다.// 이렇게 프로퍼티를 정의해서 객체로 표현하고자 할 때는 인터페이스를 사용한다.// 1. 인터페이스 사용 예제type Score = 'A'|'B'|'C'|'F'; // 타입을 만들어서 지정할 수 있다.interface User { name : string; age : number; gender? : string; // 있어도 되고 없어도 되는 옵셔널한 프로퍼티이다. ? 사용 readonly birthYear : number; [gr.. 2024. 5. 3.
Typescript #2 기본 타입 타입스크립트 기본 타입에 대해 알아보자let car:string = 'bmw'; // car 안에 있는 내용이 문자열이므로 stringcar = 3; // 이렇게 car를 string이 아닌 다른 타입으로 재선언 하면 에러가 발생// 그냥 let car = 'bmw'라고 선언해도 car변수는 string으로 초기화 된다. 이것을 타입 추론이라고 한다.let age:number = 30;let isAdult:boolean = true;let a:number[] = [1, 2, 3];let a2:Array = [1,2,3]; // 위 아래의 배열은 똑같은 거다.let week1:string[] = ['mon', 'tue', 'wed'];let week2:Array = ['mon', 'tue', 'wed'];.. 2024. 5. 3.
Typescript #1 타입스크립트를 쓰는 이유 우리가 사용하는 브라우저들은 타입스크립트를 이해하지 못한다.결국 자바스크립트로 변환해서 로드해야 사용할 수 있다.굉장히 번거로울 것 같은데 어떤 장점이 있길래 타입스크립트를 사용하는 걸까? function add(num1, num2) { console.log(num1 + num2);}add() // NaN, 당연히 원하는 결과가 나오지 않는다.undefined와 undefined를 더했으니 NaN이 나왔다.당연히 원하는 결과가 아니다. function add(num1, num2) { console.log(num1 + num2);}add(1) // NaN, 당연히 원하는 결과가 나오지 않는다.1과 undefined를 더해서 NaN이 나왔다. function add(num1, num2) { consol.. 2024. 5. 3.
Vue.js 기초(3) 핵심문법 - Data 인라인 핸들러 : 이벤트가 트리거될 때, 실행되는 인라인 javaScript 기능 인라인 핸들러는 말 그래도 어떤 기능을 동작하는 코드가 HTML Element 내에 직접 할당되는 것을 의미한다. 메서드 핸들러 : 컴포넌트 script 부분에 정의된 메서드(함수)를 이벤트 핸들러에 할당해주는 방식 computed : 함수처럼 코드를 작성하지만. return 시키는 데이터를 사용하기 때문에 데이터 취급을 하는 공통적으로 사용ㅇ되는 로직 혹은 복잡한 로직을 미리 처리하여 반복된 로직처리를 방지하는 계산된 형태의 데이터를 만드는 속성. 너무 많은 연산을 스크립트나 템플릿 HTML 안에서 처리하면 코드가 비대해지고 유지보수가 어렵기 때문에 사용한다. Watch : 어떤 데이터를 감시하고 있.. 2024. 3. 14.