분류 전체보기 썸네일형 리스트형 [angular] 앵귤러 들어서며 angular01 Angular Introduction 앵귤러는 SPA 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크입니다. 앵귤러의 철학중 하나는 "One framework. Mobile & Desktop" 으로 하나의 프레임워크로 모바일과 데스크탑을 개발할 수 있다는 것입니다. Angular 의 특징 앵귤러의 특징들과 함께 Vue.js 와 React 와의 차이점과 공통점도 알아보며 왜 앵귤러를 사용하는지 살펴보겠습니다. 컴포넌트 기반 개발 컴포넌트 기반 개발은 vue.js 나 React 도 마찬가지라고 생각합니다. React, Vue.js, Angular 모두 컴포넌트기반 개발(CBD: Component Based Development)에 중심이 있습니다. 타입스크립트 사용 타입스크립트를 사용한.. [typescript] 타입스크립트 제네릭 typescript06 타입스크립트 제네릭 자바스크립트에는 없지만 타입스크립트에 있는 제네릭(Generics)을 알아보겠습니다. 클래스나 함수의 목적중 하나는 '재사용성'에 있습니다. 이 제네릭을 이용하게되면 재사용성이 한층 더 증가합니다. 일종의 '틀' 이라고 생각하시면 됩니다. 타입스크립트에서 제네릭을 어떻게 쓰는지에대해 알아보도록 하겠습니다. 📝 목차 기존의 문제점 클래스에서의 제네릭 함수에서의 제네릭 제약조건 마무리 기존의 문제점 예를들어 number, text, operator(연산자) 각 종류별로 버튼들이 존재할 때 이 버튼들을 담으려 할 때 담는 일종의 '그릇'을 각각 만들어줘야 할 것 입니다. // TSclass NumberButton {}class TextButton {}class Opr.. [typescript] 타입스크립트 함수 typescript05 타입스크립트 함수 타입스크립트의 함수(Functions) 에 대해 알아봅니다. ES6와 작성하는 방법은 크게 다르지 않습니다. 좀 더 타입에 대해 명확해졌을 뿐입니다. 📝 목차 함수작성 Default Parameter Optional Parameter Rest Parameter Union Type Overloading this 함수작성 타입스크립트에서 함수작성하는 방법을 살펴보면 ES6와 크게 다르지않습니다. 매개변수의 타입과 return 타입에 대해 정해줄 뿐입니다. // ES6function add(num1, num2) { return num1 + num2;}// TSfunction add(num1: number, num2: number): number { return num1.. [typescript] 타입스크립트 클래스 typescript04 타입스크립트 클래스 자바스크립트는 애초에 프로토타입기반을 이용해 상속을 구현합니다. 하지만 이는 클래스기반 프로그래머들에게 익숙하지 않을 수 있습니다. ES6 에 존재하는 class 키워드를 이용해 구현할 수 있습니다. 타입스크립트도 이와 동일하게 class 키워드를 이용합니다. 📝 목차 클래스 키워드 생성자 상속 오버라이드 접근제어자 public protected private readonly 매개변수 프로퍼티 static 추상 클래스 Deep dive into Class 클래스 키워드 ES6 를 다루어보셨다면 기존에 생각했던 것과 동일합니다. class 키워드 뒤에 클래스 이름을 적어줍니다. // TSclass Button { constructor() { // ... }} 생성.. [typescript] 타입스크립트 인터페이스 typescript03 타입스크립트 인터페이스 기존에 자바스크립트에는 인터페이스라는 개념이 없었습니다. 하지만 타입스크립트를 이용해 인터페이스를 사용할 수 있게 됐습니다. 인터페이스라는 용어에 대해서 한번 짚고 넘어갈 필요가 있습니다. 인터페이스란 간단하게 어떠한 두개의 시스템 사이에 상호작용할 수 있게 해주는 조건, 규약 같은 것입니다.실생활에서 예를들어 '타이핑' 이라는 인터페이스가 있다고 친다면, 키보드의 K 를 누르면 알파벳 'K' 가 모니터에 출력된다. 는 눌렀을 때 어떠한 문자가 출력된다는 '타이핑' 인터페이스를 지키고 있는 것입니다. 역으로 타이핑 인터페이스(규약)를 지키고 있다면 특정 문자가 모니터에 출력이 될 것입니다. 어원을 살펴보자면, inter + face = 상호작용 + 표면 즉,.. [Webpack] 웹팩 튜토리얼 README 📖 웹팩 튜토리얼 웹팩 튜토리얼을 작성합니다. 처음에 웹팩을 처음 접했을 때 어려웠던 부분들을 하나씩 체크해보며 개념들을 짚고 넘어갑니다. 이 저장소는 보일러플레이트로 이용할 수 있습니다. :) 🚀 목표 가볍게 웹팩설정을 하며 웹팩의 주요 개념을 알아보고 빌드와 개발서버까지 설정하는 방법을 익히는것을 목표로 합니다. 추가적으로 ES6 이상의 문법들을 ES5로 변환하여 작동이 정상적으로 되는지 확인해봅니다. 📝 목차 웹팩에 관하여 웹팩이란? 웹팩의 4가지 주요개념 웹팩 설정하기 1단계 : 프로젝트 초기화 2단계 : 필요한 모듈들 설치하기 3단계 : 웹팩 설정파일 작성하기 빌드해보기 개발서버 열어보기 웹팩에 관하여 웹팩이란 무엇인지 알아보고 웹팩의 4가지 주요개념들을 알아봅니다. 웹팩이란? 웹팩.. [typescript] 타입스크립트 기본타입들 typescript02 Typescript - basic types 타입스크립트의 기본타입들을 살펴봅니다. 📝 목차 Boolean Number String Array Tuple Enum Any Void Null과 Undefined Never 참고문헌 Boolean true 또는 false 를 값으로 갖습니다. // TSlet isMe: boolean = true;// TS to ES5var is = true; Number Javascript 와 동일하게 타입스크립트도 부동소수점을 갖습니다. // TSlet num: number = 10;// TS to ES5var num = 10; String 작은따옴표('') 또는 큰따옴표("") 로 감싸 표현할 수 있습니다. Template Literal 을 이용하려.. [typescript] 타입스크립트를 들어가며 Typescript 동적타입언어인 자바스크립트에서는 타입에러를 만나는경우가 많은데 타입스크립트를 이용하여 컴파일단계에서 미리 타입체크를 하여 타입오류를 최소화 할 수 있고, 클래스기반 언어에 익숙한 개발자들에게 좀 더 친숙하게 다가갈 수 있기에 공부를 시작한다. Typescript 란? "Typescript is a typed superset of Javascript that compiles to plain Javascript" - 타입스크립트 공식 홈페이지 소개란 해석해보면 타입스크립트는 순수 자바스크립트로 컴파일되는 자바스크립트의 슈퍼셋이다. 슈퍼셋이란 상위확장을 말한다. Typescript 탄생배경 HTML5 가 등장하기 전까지 웹은 플래시, 실버라이트, 엑티브엑스와 같은 플러그인에 의존해 인터랙티.. 이전 1 2 3 4 ··· 9 다음