02. Angular 앱을 실행하기 위한 기능 Angular 앱을 실행하기 위한 기능 앱을 실행하기 위한 기능을 알아보자. 아래 모든 기능은 app폴더 내에서 관리된다. 1. Index.html 프로젝트를 생성하면 src 폴더 안에 index.html 파일이 존재한다. index.html 파일을 보면 메타태그가 보이는데 여기에 루트 컴포넌트( app.componet.ts )가 임베드 된다. 참고 : 여기에서 '임베드 된다' 라는 의미는 컴포넌트에 의해 생성된 최종 마크업 소스로 대체 된다는 의미이다. src > index.html 2. 컴포넌트( View Model ) 뷰( 템플릿 )와 모델( 데이터 )를 관리한다. 컴포넌트가 실행되려면 생성 후 반드시 모듈 클래스에 등록해야 한다. 모듈 클래스에 대해서는 이후 별도로 설명하기로 한다. 먼저 컴포넌트.. 더보기 01. Angular 시작하기 Angular 시작하기 Angular( angular js 2 )는 SPA( single page application ) 개발에 최적화된 자바스크립트 Framework이다. 1. Node.js를 먼저 설치한다. https://nodejs.org/en/ 2. Angular 커맨드라인 설치 및 앱 실행 터미널에 노드 커멘드라인을 전역적으로 설치한다.npm insall -g @angular/cli 프로젝트 그룹 폴더로 이동 한 후 프로젝트 폴더를 생성하고 앱을 실행한다. cd /Applications/myProjectGroup/ ng new myApp cd myApp ng serve 설치 후 프로젝트 폴더 구조 myApp --- e2e |- node_modules |- src |- app src 폴더 안에 .. 더보기 04. Node 개발자동화 테스트 Grunt 설치( 맥북에어 ) 맥북에어 Grunt 설치방법 1 npm ( Node.js ) 및 그런트 다운 받기https://nodejs.org/en/http://gruntjs.com/sample-gruntfile 2. 노드 설치하기 다운받은 그런트 실행 파일을 클릭 후 설치 진행한다.그러면 아래와 같이 설치완료 문구가 출력된다.(맥북에어 기준) Node.js was installed at-/usr/local/bin/nodenpm was installed at- /usr/local/bin/npm 여기까지 노드 환경 설치는 끝났다. 3. 그런트 설치하기 그런트를 설치하기 전 맥북 터미널을 켠다.터미널 위치 : 응응 프로그램 > 유틸리티 > 터미널 그런트는 커맨드라인 도구이므로 터미널 창을 열고 전역적으로 설치한다.입력어 : sudo n.. 더보기 03. 자바스크립트 OOP구현과 상속에 대해... Javascript OOP구현과 상속에 대해... 1. 개요 오랫동안 UI를 개발해 오면서 자주 사용해 오던 개발방법 중 하나가 객체지향방법(Object-Orientied Programming )이다. OOP에서 중요한 몇가지 개념만 알아보자. 클래스 - '객체( 인스턴스 )를 정의해 놓은 원형이 되는 것'객체 - new 클래스를 이용해서 생성된 자료형 변수 또는 '인스턴스'라고도 한다.은익성 - 객체 또는 클래스 속성 중 외부 접근을 허용하는 것 이외의 모든 것들은 접근을 막는다.상속 - 이미 만들어진 기능을 파생시켜 하위 클래스를 만든다.오버라이딩 - 상위 클래스의 메서드를 하위클래스에서 기능만 바꿔 동일하게 선언해서( 덮어써서 ) 사용한다.다형성 - 여러개의 객체 내에 동일한 메서드가 있지만 모두 .. 더보기 02. jQuery를 이용한 데이터 출력 방법 JQuery를 이용한 데이터 출력 방법 1. 개요 프론트엔드 개발 시 ajax 통신을 이용해 외부에서 데이터를 가져와 UI에 값을 넣어주는 방법을 많이 사용한다. 이번 포스팅에는 UI구성이나 특성에 적합한 데이터 출력방법을 알아본다. 2. 구현방법 및 설명 첫번째, 템플릿을 활용한 값 출력a 설명: 복잡한 마크업형태의 묶음으로 구성되어 있고, 반복적으로 ui가 뿌려진다.참고: jQuery를 이용한 출력에 대한 전반적인 구성이나 기능위주로 설명되기 때문에 css와 같이 레이아웃 관련 내용은 생략한다. - 데이타 구성- 파일명 : person.jsonvar data = [{ name: "홍길동", age: "20", address: "서울", birth: "2016" },{ name: "이순신", age: .. 더보기 자기소개서 2 보호되어 있는 글입니다. 더보기 01. scope에 대한 이해 Javascript Scope에 대한 이해 1. 개요 자바스크립트를 이해하는데 아주 중요한 요소인 동적 생성 메모리 공간과 var, this 키워드에 대해 알아본다. 2. 설명 및 예시 첫번째, 동적 생성 메모리 공간 프로그래밍을 하는 동안 일정기간 동안 데이터를 저장해서 사용할 수 있다.자바스크립트에서는 크게 두가 종류의 메모리 공간을 사용할 수 있다고 생각하면 된다. 1. 오브젝트( Object )의 key-value 공간 오브젝트 내에서 키, 밸류 형태의 값을 생성해서 사용한다. - 예시var object = {key: value} - 사용방법object.key 또는 object["key"] 2, 함수의 스코프 공간 함수 내에서 var 키워드와 함께 생성해서 사용한다. - 예시function set.. 더보기 홍콩여행 4일째 보호되어 있는 글입니다. 더보기 홍콩여행 3일째 마카오 보호되어 있는 글입니다. 더보기 홍콩여행 2일째 보호되어 있는 글입니다. 더보기 이전 1 2 3 4 ··· 9 다음