Angular
앵귤러 튜토리얼 - tour-of-heroes 만들기 (5)
앵귤러 튜토리얼 - tour-of-heroes 만들기 (5)이어서, 오늘은 서비스에 대해서 알아보고자 한다.서비스가 필요한 이유는 무엇일까?현재 HeroesComponent는 가짜 데이터를 받아 표시하고 있다. 컴포넌트는 고의적으로 가짜 데이터를 표시하면 안되며, 데이터를 직접적으로 가져오거나 저장해서는 안된다.컴포넌트는 데이터를 표현하고, 액세스를 서비스에 위임하는데 집중해야한다.쉽게 말하면, 서비스는 여러 컴포넌트에서 필요로 하는 기능을 묶은 클래스다. 즉 앵귤러 사이트에서 사용되는 특정한 기능들을 서비스로 생성한 후, 해당 기능이 요구되는 컴포넌트는 이 서비스로 불러와서 사용할 수 있다.따라서, 코드가 중복되는 것을 막아주며 코드 관리의 편의성이 증가해 프로그램의 효율성을 높일 수 있는 장점이 있다..
앵귤러 튜토리얼 - tour-of-heroes 만들기 (4)
앵귤러 튜토리얼 - tour-of-heroes 만들기 (4)이번 시간에는 세부 구성 요소를 꾸며보려고 한다.HeroDetailCompnent를 만들어보도록 하자ng generate component hero-detail app.module을 확인하면, 자동적으로 선언된 hero-detail 컴포넌트를 확인할 수 있다. (지난시간에 배운 부분)이제 hero-detail 컴포넌트에 세부사항을 옮길 것이다.기존의 heroes.component.html에서 세부사항에 해당했던 코드를 잘라내어 hero-detail.component.html으로 옮기자.이제 참조하는 형식이 변경되었기 때문에, 기존 코드의 selectedHero를 hero로 다시 모두 변경해주어야 한다. 따라서 html 템플릿 코드는 다음과 같다...
앵귤러 튜토리얼 - tour-of-heroes 만들기 (3)
앵귤러 튜토리얼 - tour-of-heroes 만들기 (3)저번 시간에는 컴포넌트를 활용해 문자열 형태의 영웅 클래스를 만들어 출력하는 것까지 해보았다. 이제, 영웅의 수를 늘려볼 차례다. 영웅의 수가 늘어난다면 지금과 같은 형태로는 html에서 모두 나타낼 수가 없다. 이제 앵귤러의 중요한 기능 중 하나인 *ngFor를 이용해 볼 것이다.임의로 영웅들을 미리 만들어놓은 배열을 만들어보자.src/app에 ‘mock-heroes.ts’라는 이름으로 파일을 만든 후, 다음과 같이 코드를 작성해보자.import { Hero } from './hero'; export const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' },..
앵귤러 튜토리얼 - tour-of-heroes 만들기 (2)
앵귤러 튜토리얼 - tour-of-heroes 만들기 (2)이제 영웅 구성 요소들을 만들어보자ng g(generate) c(component) heroes CLI app에 heroes라는 새로운 폴더가 생성된 것을 확인할 수 있다.heroes.component.ts부터 살펴보자import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit { constructor() { } ngOnIni..
앵귤러 튜토리얼 - tour-of-heroes 만들기 (1)
앵귤러 튜토리얼 - tour-of-heroes 만들기 (1)앵귤러 CLI install하기npm install -g @angular/cli 새로운 애플리케이션 만들기ng new angular-tour-of-heroes 해당 애플리케이션 접속cd angular-tour-of-heroes ng serve --open ng serve를 하면, http://localhost:4200/ 에서 내 브라우저를 보여준다.자신이 사용하는 코드 편집기(VScode 등)으로 만든 애플리케이션 폴더를 열고 src/app를 살펴보자.이 파일 중에 3가지로 분리되어 있는 AppComponent 쉘이 구현되어 있는 것을 찾을 수 있다.app.component.ts : 타입스크립트로 작성된 구성 요소 클래스 코드app.compone..
Angular - 단일 페이지 웹 애플리케이션
Angular는 단일 페이지 웹 애플리케이션2018.02.13 배운 내용Angular는 자바스크립트로 만든 클라이언트 MVC 프레임워크로, 단일 페이지 웹 애플리케이션이다.따라서, JSP나 HTML 등 에서 하이퍼링크를 통해 여러 페이지를 옮겨다니는 것과는 달리, 오직 ‘하나’의 페이지에서 모든 걸 보여주도록 만들어 주는 것이 Angular라고 말할 수 있다.그렇기 때문에 JPG 사진에 하이퍼링크를 넣어 이를 클릭하면, 다른 페이지를 보여주도록 만드는 것은 Angular에서 구현이 되지 않았던 것이다. 이에 대한 해결책은 ngIf나 ngFor 등 Angular가 가지고 있는 기능들을 더 공부해서 알아봐야 할 것 같다.이러한 기능들은, 단일 페이지 내에서 내가 보길 원하는 것들을 설정할 수 있도록 도와주며..
Angular 개발 툴 및 모듈 설명
Angular 개발 툴 및 모듈 설명CLI를 통해 파일을 생성하고, 여러가지 구성 요소들을 살펴보자.가장 중요한 것은, src에 위치한 ‘angular-cli-json’이 곳은 앵귤러 CLI에서 사용되는 앵귤러 프로그램에 대해 기술하는곳이다.Index.html – 앱루트라는 태그만 보일 뿐, 따로 스타일 등 태그가 보이지 않는다. 하지만 cli가 자바스크립트나 css파일을 웹팩을 통해 번들링해서 서버를돌릴 때 동적으로 추가시켜준다.Main.ts 파일이 시작 지점이다.Main.ts에서 부트스트랩 할 모듈을 지정해야 하는데 이게 루트모듈. 이건 일반적으로 app.module.ts가 된다. 이 곳에서 일반적으로 부트스트랩할컴포넌트를 지정하고, 우리가 사용할 다양한 컴포넌트들을 import를한다.Module 알..
Angular CLI를 통한 프로젝트 시작하기
Angular CLI를 통한 프로젝트 시작하기CLI(커맨드라인 인터페이스) → 기본 구조, 컴포넌트 생성, 빌드, 유닛테스트, 개발서버, 배포관리* CLI 설치 : npminstall –g @angular/cli(이미 rc버전이 설치되어 있을 경우 → npm install –g @angular/cli@latest)* 프로젝트 생성 : ng new ‘프로젝트명’생성과 동시에, 모든 의존성 라이브러리가 설치된다.* 개발 서버 실행 : ngserveWebpack 빌드과정이 끝나면 http://localhost:4200으로 접속하여 개발 서버를 확인할 수 있다.CLI에서는 컴포넌트, 디렉티브, 서비스, 파이프의 생성이 가능컴포넌트 생성 : ng generate(=g) component [컴포넌트명]→ 컴포넌트 ..
[자바스크립트] 변수로 이해하기
변수로 자바스크립트 이해하기자바스크립트에서 변수는, 단순히 값을 설정하고 사용하는 개념에 그치지 않는다.일반적으로 우리가 생각하는 변수는 int, string, date 등 데이터 타입들이 있다. 하지만 자바스크립트에서는 느슨한 데이터 타입이기에 모든 데이터 타입을 var로 지정할 수 있다. 따라서 문자열이나 숫자 뿐만 아니라, 객체나 함수도 변수로 지정한다.이처럼 자바스크립트에서는 변수가 단순히 값을 설정하고 사용하는 개념에 그치지 않는다.참조변수, 스코프, 클로저, 컨택스트, this 등도 자바스크립트를 제대로 이해하기 위한 핵심적인 개념을 담고 있기 때문에 반드시 이해하고 넘어가야 한다.변수 선언자바스크립트에서 변수는 선언하는 위치를 반드시 신경 써줘야 한다. 그 변수의 위치에 따라 의미하는 바가 ..
[타입 스크립트] 기본 개념 정리
타입 스크립트 기본 개념 정리타입과 문자열let 선언자let 선언자가 나오게 된 이유? 호이스팅 문제 발생 때문(호이스팅 : 지역 스코프에 선언된 변수가 전역 스코프에 선언된 변수에 영향을 미치는 현상)호이스팅이 발생하는 예시var emotion="happy"; { var emotion="sad"; } console.log(emotion); 실행결과 sad 코드를 보면 emotion 변수가 2번 선언되어 있다.첫번째 emotion은 전역 스코프, 두번째 emotion은 지역 스코프에 선언되어있는 모습이다.전역에서 설정되어 있는 happy가 출력되어야 맞지만, 실행결과는 지역 스코프의 sad가 출력되는데 이것이 전형적인 호이스팅 문제다.이유 : 지역 스코프에 선언된 emotion이 동일한 이름을 가진 전역..
[앵귤러] 컴포넌트 사용하기
[앵귤러] 컴포넌트 사용하기컴포넌트 생성ng g c 컴포넌트명이렇게 생성하면 ts, html, css, spec.ts 총 4가지가 만들어짐만약 ts만 만들고 싶다면?ng g c 컴포넌트명 -it -is -spec false양방향 바인딩 [(ngModel)]을 사용할 때는 app.module.ts에 다가 import 추가import { FormsModule } from '@angular/forms'; imports: [ FormsModule ] 부모 컴포넌트에서 자식 컴포넌트로 데이터 보내기클래스 안에 자식으로 보낼 데이터를 입력msg = "i am a parent"; 템플릿(html)에 불러오는 자식 컴포넌트의 selector안에 데이터를 입력 이제 자식 컴포넌트에서 name이라는 이름으로 msg 데이터..
[앵귤러] 기초 정리
앵귤러는?모바일과 데스크탑을 위한 하나의 완성된 자바스크립트 프레임워크다.구글의 앵귤러 + 마이크로소프트의 타입스크립트서버측 프레임워크가 아닌, 클라이언트측 프레임워크다.jQuery나 React같은 자바스크립트 라이브러리가 아니다. (MVC와 같은 디자인 패턴 X)최근 추세는, 멀티페이지 (MPA) -> 싱글페이지로 이동 중 (SPA)Header/Footer 컴포넌트 생성 해보기ng generate component header –dry-runng g c header -dng g c header –spec false -dng g c footer –inline-template –spec false -dng g c footer -it –spec false -dng g c footer -it –inline-s..