Blog Content

관계성이 없는 Component간의 통신은 어떻게 할까?Service로 Data를 공유하자! siblings, grandchildren 등 직접적인 연결성이 부족한 Component간의 데이터 공유는Service를 사용하면 된다. 그 중 RxJS를 이용해 데이터를 공유하는 방법이 있는데,BehaviorSubject를 사용하는 것이다.BehaviorSubject는 Observable의 특별한 형태인데,연관된 데이터를 쉽게 구독할 수 있는 method와데이터를 변경하기 위한 method등 사용하기 쉬운 몇가지 method를 제공하여보다 쉽게 RxJS기능을 이요할 수 있도록 고안된 class라고 한다. 물론, RxJS에서 제공하는 Subject를 사용해도 되지만, BehaviorSubject를 선호하는 이유는..

1. Angular 개념Angular는 SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다.웹 애플리케이션은 물론 모바일 웹, 네이티브 모바일과 데스크탑 애플리케이션까지 프론트앤드 개발에 필요한 대부분의 기능을 갖추고 있다.정적 타입을 제공하는 Typescript를 주력 언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경을 제공한다. Angular 1 버전을 AngularJS, Angular2 버전 이상을 Angular라 부른다.Angular는 AngularJS(version 1)의 후속 버전으로 2014년 ng 컨퍼런스에서 처음 소개되었다.2016년 9월 14일 Angular2 버전이 공개되었고, Angular3를 뛰어 넘어 2017년 3..

HTML이란 : Hypertext Markup Language의 약자 Hypertext란 문서와 문서가 링크로 연결되어 있는것HTML의 중요한 요소 링크는 HTML의 본질이다.HTML의 본질은 웹의 본질 -> 링크와 링크가 모여 웹을 만든다. Markup이란 Tag : 옷에 붙어있는 Tag는 옷의 원산지, 치수 등을 기재해서 소비자에게 알려주듯이 HTML에서도 같은 의미로 쓰인다.ex: 마크업 (시작태그와 끝태그, 가운데 있는 내용은 컨텐츠) link : 링크를 클릭했을 때, 새창에서 열고 싶을 경우 : target=“_blank” 리스트를 표현하고 싶을 경우 : html별도의 그룹으로 리스트를 묶고 싶을 경우 태그로 를 감싼다순서가 필요한 경우에는 대신 사용. 숫자가 자동으로 붙게됨 Semantic이란..

Speed : Angular 2 가 많은 면에서 더 빠르다Components : Angular 1 의 Controller, Scope 대신에 사용Simpler Directives : Custom Directives 를 생성하기 쉬워짐Intuitive Data Binding : HTML 요소나 버튼에 이벤트 리스너를 설치할 떄 더 직관적인 신택스 제공Services : 이제는 클래스로 선언 Angular2는 주요 성능 향상 요소인 Hierarchical Dependency Injection 시스템을 사용하고 있다.Angular2는 Angular1에 비해 5배 빠르다. Angular2는 Typescript로 작성되었으며, ES6 사양을 충족시킨다. Angular1.x의 업데이트가 아니다.Angular 1.x..

모든 Chrome Extension은 중요한 정보를 제공하는 manifest.json이라는 이름의 json 포맷으로된 파일을 가지고 있습니다.몇몇의 Filed들을 살펴볼까요?{ "manifest_version": 2, "name": "tetoda_robot_chromeExtension", "description": "Hello!", "version": "1.0.0", "background": { //Recommended "scripts":["background.js"] "persistent": false }, "content_scripts":[{...}], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "p..

1. 준비사항JavascriptHTMLChrome BrowserGoogle extension api documentation : https://developer.chrome.com/extensions/api_index 2. Chrome Extension 예제→ 간단한 샘플 프로그램 만들기→ https://developer.chrome.com/extensions 를 방문하면 다양한 것을 익힐 수 있다.2.1. manifest.json 만들기manifest.json은 확장 프로그램의 정보가 담긴다. 확장 프로그램의 이름, 설명, 어떠한 파일들을 사용하는지, 브라우저의 어떤 퍼미션을 필요로 하는지 등을 기술한다.{ "manifest_version": 2, "name": "tetoda_robot_chromeEx..