FrontEnd71 TS 변수의 기본형과 변수 선언 1. 개요 Angular를 하기 전에 Angular에서 사용하는 TS 에 대한 정리가 먼저 필요할 것이다. 무턱대고 시작한 Angular는 개발시간을 오래 걸리게 하고, 디버깅에 혼선만 주기 시작했다. 기본적으로 TS를 사용하는 프레임워크이기 때문에 TS를 알아보도록 한다. 2. JS ES5와 ES6의 차이 ES5와 ES6에서 변수 선언 방식은 각각 다음과 같다 var a = 10; // ES 5 let a = 10; // ES 6 변수 선언 방식과 변수의 타입 지정 등 여러가지가 바뀌었다. 하지만 여전히 ES5의 선언방식을 ES6에서 사용할 수 있다. 주의사항은, 이 둘을 혼용했을 때, 디버깅을 어렵게 할 수 있다는 점이다. var로 선언한 변수는 다른 코드블럭에서도 접근이 가능하기 때문에, 변수가 꼬.. 2020. 3. 30. Angular 시작하기 - 1 1. 템플릿 문법 - 앵귤러의 템플릿 문법은 HTML과 JS의 문법을 확장한 것으로 볼 수 있다. - angular-cli를 활용하여 간단하게 컴포넌트 또는 프로젝트를 생성할 수 있다. 1) 컴포넌트 만들기 ng generate component product-list(컴포넌트 명) 또는 ng g c product-list ng 명령어를 활용하여 컴포넌트를 쉽게 만들 수 있다. ng generate component product-list 를 축약한 명령어가 ng g c product-list이다. 이 명령어를 실행시키면 src/app/product-list 디렉토리가 생성되고, 내부에 ts, html, css 파일이 생성된다. 기본적으로 실행되는 내용이 모두 포함되어 있기 때문에 간편하게 사용이 가능하.. 2019. 7. 10. 요즘 대세(?) TypeScript에 대해서 1. 자바스크립트의 한계 과거 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 좋은 점도, 나쁜 점도 많다. 1-1. 자바스크립트의 특성 Prototype-based Object Oriented Language Scope와 this 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosely typed) 언어 2. 타입스크립트란 무엇인가. TypeScript 또한 자바스크립트 대체 언어의 하나로써 자바스크립트(ES5)의 Superset(상위확장)이다. C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 Anders Hejlsberg(아네르스 하일스베르)가 개발을 주도한 TypeScript는 Microsoft에서 2012년 발표한 오픈소스로, 정적 타이핑을 지원하.. 2019. 7. 9. Angular 기본용어 정리 1. 컴포넌트란? - Angular의 핵심 구성요소 - Angular의 application은 컴포넌트를 중심으로 구성된다. - 뷰(view)를 생성하고 관리하는 역할을 수행 - 컴포넌트는 동작 가능한 하나의 부품 - 독립적이고 완결된 뷰를 생성하기 위하여 HTML,CSS,JS를 하나로 묶는 것 2. 디렉티브란? - DOM의 모든 것을 관리하기 위한 지시 - 동작 및 모양을 관리 - 공통관심사를 컴포넌트에서 분리하여 구현한 것으로, 컴포넌트의 복잡성을 낮추고, 가독성을 향상시킨다. - @Directive 데코레이터로 장식된 클래스 - 컴포넌트 디렉티브, 어트리뷰트 디렉티브, 구조 디렉티브, 사용자정의 디렉티브 등이 있다. 3. 파이프란? - 데이터 자체를 변경했을 때 발생하는 side effect를 방지.. 2019. 7. 8. Angular2 에서 jQuery 사용법 - Angular는 타입스크립트이기 때문에, 형 선언이 필요하다. - 따라서 jQuery를 사용하려면 jQuery 변수에 형 선언을 해주어야 한다. - 사용법은 간단하다. Angular 2.x 구성 요소에서 jquery 를 사용하려면 맨 위에 전역 변수를 선언한다. ex 1) jQuery에 $ 를 사용하는 경우 declare var $: any; ex 2) jQuery for jQuery를 사용하는 경우 declare var jQuery: any 이 내용을 최상단에 입력 후 사용하면 컴파일 오류 없이 jQuery를 사용할 수 있다. 2019. 7. 7. Angular 페이지 만들기 - 이전 포스팅을 보고 왔다면 Angular는 설치완료되어 있을 것이다. 2019/07/05 - [FrontEnd/Angularjs] - Angularjs 시작하기 Angularjs 시작하기 - 시작하기전에... Angular란? Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다. 웹 애플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션.. fathory.tistory.com - Angular를 처음 시작할 때, 아래의 명령어를 입력한다. "ng new 어플리케이션명" ng new my-app - 실행시킨 후 my-app 디렉토리가 생성된다. 해당 디렉토리로 이동한다. cd my-app - 디렉토리 이동 후 서비스.. 2019. 7. 6. Angular 시작하기 - 시작하기전에... Angular란? Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다. 웹 애플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트엔드 개발에 필요한 대부분의 기능을 갖추고 있다. 정적 타입을 제공하는 TypeScript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경을 제공한다. Angular angular.io NodeJS란? NodeJS 는 구글 크롬의 자바스크립트 엔진 (V8 Engine) 에 기반해 만들어진 서버 사이드 플랫폼이다. 2009년에 Ryan Dahl에 의해 개발되었다. - Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 Ja.. 2019. 7. 5. SPA 활용 사이트 모음(awwwards) https://www.awwwards.com/websites/single-page/ 2019. 6. 5. 이전 1 ··· 5 6 7 8 다음 반응형
