Front_End/Angular

05. Angular로 개발하기 - 3 - 구조 지시자

Angular로 개발하기 - 5 데코레이터 ( 이건 이전에 것 보충 ) export class simpleComponent { }컴포넌트는 하나의 클래스다 위 처럼 simpleComponent라는 클래스가 있다고 가정해보자. 이 클래스는 아직까지는 순수한 타입스크립트 클래스이다. 여기서 순수하다라는 표현은 아직까지는 컴포넌트가 아니라는 뜻이다. 즉 컴포넌트로 사용하기 위해서는 앵귤러에게 컴포넌트임을 알려주어야한다. 여기서 사용하는 것이 Component 데코레이터이다. 데코레이터가 대상을 장식한다는 의미를 가진 것처럼 컴포넌트데코레이터는 앵귤러가 평범한 타입스크립트 클래스를 컴포넌트로 인지할 수 있도록 하는 역할을 한다. import { Component } from '@angular/core&#..

04. Angular로 개발하기 - 2 - 서비스/의존성주입

Angular로 개발하기 - 2 서비스와 의존성 주입 서비스는 애플리케이션의 비즈니스 로직을 담는 클래스이다. 서비스를 이용하는 이유는 컴포넌트에서 비즈니스 로직을 분리하기 위해서이다. 일단 서비스를 만들어보자! ng g service 서비스(클래스)명 서비스를 생성하고 나면 서비스명.service.ts와 서비스명.service.ts 파일이 생성된다 ~.service.ts : 속성들과 메소드들로 이루어지는 서비스의 핵심적인 파일이다. ~.service.spec.ts : 테스트를 위해서 만들어지는 파일이다. (테스트관련은 추후 공부 예정) ser-a.service.ts import { Injectable } from '@angular/core'; @Injectable() export clas..

03. Angular로 개발하기 - 1 - src/app, Component, Data Binding

Angular로 개발하기 개발하기에 앞서 Angular라는 프레임워크를 이용해서 웹 애플리케이션을 개발하려면 크게 두가지를 생각해야 한다. 1. 사용자와 상호작용할 뷰를 구성 일반적인 웹 애플리케이션은 API혹은 배치 프로그램과 같이 다른 애플리케이션과 통신하며 구현된 기능에 따라 동작한다. 하지만 사용자용 애플리케이션의 핵심은 사용자와의 상호작용이다. 해당 애플리케이션의 실행 전반에 걸쳐 사용자와 반복적으로 상호작용하므로 사용자와 소통할 매개로서 뷰가 반드시 필요하다. 이 말이 무엇일까 고민을 많이 해보았는데 이 뷰라는 녀석이 직접 사용자와 소통을 한다는 뜻인 것 같다. 즉 사용자가 보게되는 페이지 중 에서도 사용자와 상호작용할 수 있는 뷰가 반드시 필요하다라는 것 같다. 2. 뷰와 연결된 일련의 로직..

02. Angular 시작하기

Angular 시작하기 타입스크립트의 개념과 특징 HELLO, Angular! 타입스크립트 타입스크립트(TypeScript)는 마이크로소프트에서 개발 및 유지되는 자바스크립트 슈퍼셋이다. 타입스크립트는 자바스크립트로 대규모 애플리케이션 개발을 위해 개발되었다. 자바스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. - 위키백과 - 핵심은 안정적으로 어플리케이션을 개발하기 위해서 자바스크립트에 Something을 추가한 언어입니다. Sth 1. 자바스크립트 문법에 타입 정보 추가 Sth 2. 코드를 안정적으로 수정하고 오류를 검사할 수 있는 기능 추가 즉, 타입스크립트는 자바스크립트를 포함하고 있다고 생각하시면 됩니다. *'자바스크립트의 문법을 그..

01. Angular 준비하기

Angular 준비하기 Node.js의 기본 구성 및 개념 Node.js가 프론트엔드 개발에 필요한 이유 package.json 개념 Node.js의 기본 구성 및 개념 Node.js란? Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있습니다. NPM 이란? NPM은 Node Package Manager의 약자로 현재 Node.js에서 기본으로 사용하는 패키지 관리 도구입니다. 여기서 패키지란 JavaScript, HTML, CSS 등을 포함한 리소스들의 묶음입니다. node.js 설치 https://nodejs.org..

00. Angular의 개념/구조

00-1. Angular란? 무엇이냐고 묻는다면 '구글에서 개발한 SPA 프레임워크다' 라고 할 수 있다. 여기서 SPA는 Single Page Application의 약자로서 하나의 웹 페이지가 실행할 때 View 단에 해당하는 부분이 페이지의 주소가 바뀌지 않으면서 또 다른 새로운 view를 동적으로 로드하여 사용하는 것을 SPA라고 한다. view는 클라이언트 측 기술인 html/css/javascript들을 모아둔 컨테이너를 의미한다. 직관적인 설명을 위해 예를 들자면 facebook처럼 계속해서 스크롤을 내려도 view단이 새로고침이 되서 정보를 불러오는 형식이 아닌 추가되는 것이다. 다만 facebook은 react를 사용한다. 00-2. Angular의 구조 수식으로 표현하자면..