javascript

언제나 코드를 작성해야 할 때 고려해야 되는 것은 재사용성이다. Java와 같이 아주 강한 객체지향 언어와 같이 재사용이 가능한 컴포넌트를 만들게 도와주는 것은 TypeScript에도 존재한다. 이름은 제네릭(Generic)이다. 먼저 들어온 인수를 무조건 반환하는 함수를 만들어보자.function fun(num : number):number { return num;}이는 "any" 타입으로도 작성이 가능하다.function fun(num : any):any { return num;}"any" 타입을 사용한다는 것은 num이 어떤 타입이든 받고 반환한다는 의미에서 제네릭이라 할 수 있다. 하지만 이는 반환을 할 때 본질적인 타입을 잃게 된다. 만약 number타입의 값이 들어온다면 반환은 number가 ..

오늘 지나가다가 아주 신기한 문법을 봐서 적어두려고 한다.예전에 의문이 들었던 게 object의 value 값 자리에 변수 명을 넣어도 됐지만 key 값에는 변수 명을 넣지 못할까?라는 의문을 가졌었다. 그러나 가능했다! 그것은 Computed Property Name 이라는 녀석이다.  사용법은 간단하다."[ ]" 대괄호를 사용하면 된다. 아래 예시를 보자무척 신기하다. 여기에 함수도 넣을 수 있다고 한다. 아직 어떠한 경우에 사용해야될 지 생각은 안 해봤지만 유용하게 쓰일 것 같다는 생각이 든다.ES6의 문법이라던데 아직 모르는 것이 많은 것 같다.

전에 봤듯이 TypeScript에서 Object 타입을 선언할 때 interface와 type을 이용한다.TypeScript는 객체를 Object를 선언하고 바로 접근하려면 안되는 것을 볼 수 있다. 그래서 우리는 object에 이용할 때는 interface를 사용한다.object만 선언하고 사용했을 때랑 다르게 UserInfo라는 interface를 선언한 후 user의 name에 접근하니 오류 메시지를 띄우지 않는다. 잠깐.여기서 Interface란상호 간에 정의한 약속 혹은 규칙을 의미하며 TypeScript에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의한다고 한다.- 객체의 속성과 속성의 타입- 함수의 파라미터- 삼수의 반환 타입- 배열과 객체를 접근하는 방식- 클레스 Interfa..

TypeScript의 기본 타입은 JavaScript와 거의 동일한 데이터 타입을 지원하며, 열거 타입을 이용하면 더 편리하게 사용할 수 있다고 한다. Type 목록1. Boolean2. Number3. String4. Array5. Tuple6. Enum7. Any8. Void9. Null and Undefined10. Never11. Object 1. Boolean참/거짓 (true/false) 값let isDone: boolean = flase; 2. NumberTypeScript의 모든 숫자는 부동 소수 값이다. 16진수, 10진수 리터럴에 더불어 2진수 8진수 리터럴도 지원함.let decimal: number = 6;let hex: number = 0xf00d;let binary: number..

요즘 TypeScript라는 말을 자주 본다. 이는 대세가 되었고 공부를 해보려고 한다. 이전에는 TypeScript는 웹 프런트 분야가 주로 사용하는 언어인 줄 알았다. 그러나 요즘은 백엔드 분야에서도 많이 사용된다는 말을 듣고 친근해지면 전적으로 좋겠다 느꼈다.아직까지는 규모가 있는 프로젝트를 진행해보지 않았기에 JavaScript에 대해 크게 불편함을 느끼지 못했다. 하지만 프로젝트가 커진다면 이미 만들어진 스키마 위에서 작업을 하는 관정에서 자잘한 오타로 인한 에러가 발생되고 그 에러가 바로 보이는 것이 아니라 실행하면서 런타임이 되어서야 에러를 발견할 수 있다는 치명적인 단점이 있다고 한다.  이러한 이유로 기존 JavaScript의 동적 타입 체계를 완전히 뒤엎어 기존의 타입을 통해 컴파일이 ..

이벤트 Event 이벤트란 사용자와 웹 브라우저의 상호작용 과정에서 마우스 클릭, 움직임, 스크롤, 타이핑 등의 모든 행동에 의해 발생하는 모든 칭합니다. 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미합니다. 이벤트 핸들러 Event Handler 이벤트 핸들러는 객체의 속성을 이용하여 JavaScript가 인식할 수 있도록 하는 것입니다. 예제 // 이벤트 핸들러 const button = document.querySelector(".btn") button.onclick = function() { console.log("Hello!"); }; // OR button.onclick = () => { console.log("Hello!"); };..