Front-End/Angular

앵귤러를 이용해서 동적 설문조사 페이지를 만들어 보기

0. 개요 현재 앵귤러를 사용해서 설문조사하고, 데이터를 축적시키는 페이지를 만드는 일이 생겼습니다. 특이사항으로는 설문조사를 받는 사람들의 상태에 따라서, 다른 설문들이 보여져야 한다는 것이고, 이는 설문 페이지를 여러개를 만드는 과정이 될 것입니다. 이를 해결하기 위해서, 설문 내용만 입력하면, 해당 설문페이지를 만들수 있게 페이지를 작성해 보려고 합니다. 1. 공통 설문내용 및 서비스 생성 먼저, 설문을 할 데이터의 양식을 정했고, 이를 설문 받는 사람에 따라 변동시켜 사용할 수 있게 변수로 저장했습니다. survey.ts // text는 input-text 형식의 질문란 입니다. [ 질문, 입력한 값이 바인딩 될 key값] // select는 input-radio 형식의 질문란 입니다. // ti..

Angular - 데이터 공유(Inject, Service)

모듈에서 다양한 기능을 사용할 수 있게 import를 통해서 외부 모듈을 참조하도록 하였습니다. Angular에서는 마치 컴포넌트에 주사기로 넣어주듯이 데이터를 전달 해줄수 있습니다. Inject를 사용하는 방법 데이터 생성 및 공유 /src/app/MyTypes.ts export declare type INFORMATION = { // 전달할 데이터 양식 data1 : string, data2 : number, data3 : any, } export const myData : INFORMATION = { // 내가 전달할 데이터 data1 : 'data', data2 : 1433, data3 : ['data3_1','data3_2'], } 전달할 데이터 양식과 해당하는 데이터를 만들어 줍니다. expo..

Angular - 데이터바인딩 심화

ReactiveFormsModule 을 활용한 바인딩 사진처럼 N개를 그릴 데이터를 group으로 묶은뒤에 배열로 처리할 것입니다. 이해를 위해서 single이라는 배열이 아닌 단순한 대상을 1개 추가하였습니다. 기존 소스코드를 변경해 보겠습니다. dashboard.component.ts import {Component, OnInit} from '@angular/core'; import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; declare type MyType = { text: any; number: any; }; @Component({ selector: 'app-dashboard', templ..

Angular - 디렉티브, 반응형 모듈

디렉티브 속성 디렉티브: html관련된 모양, 동작을 제어합니다. (ngClasss, ngStyle 등) 구조 디렉티브: 구조를 변경 할 떄 사용합니다. (ngif, ngFor, class 등) 속성 : html 속성에 값을 지정합니다(style, value, class 등) 반응형 모듈 사용 app모듈에 ReactiveFormsModule을 사용하게 추가합니다. app.module.ts @NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule //반응형 폼 사용 ], providers: [], bootstrap: ..

Angular - 컴포넌트의 연결과 데이터 전달방법

컴포넌트와 컴포넌트의 연결 앵귤러에서 index.html 과 main.ts 파일은 앵귤러가 가장 처음 동작하는 파일을 의미합니다. 컴포넌트 ts파일에 존재하는 셀렉터 값이 다른 컴포넌트 html파일 또는 index.html 파일에 사용된다! → 셀렉터를 다른 컴포넌트 html파일이나, index.html 파일에 등록해야만 컴포넌트가 생명(동작)을 부여받습니다. 셀렉터가 어디에도 사용되지 않는다면 해당 컴포넌트는 아무런 행동도 할 수 없습니다. 가장 맨 처음 만들어지는 app컴포넌트는 빈 화면으로 두는 경우가 많습니다. → 이는 app컴포넌트에 따라서 다양한 컴포넌트를 붙여두고 조건에 따라서 나타나게, 보이게 하기 위함입니다. (app컴포넌트는 다른 컴포넌트를 컨트롤하는 역할을 주로 합니다.) 컴포넌트와 ..

앵귤러란?

앵귤러란? 앵귤러는 웹 화면을 구성하는 데 사용되는 프레임워크입니다. Javascript, Jquery 처럼 각종 명령어와 규칙을 통해서 웹 화면이 이벤트와 기능을 부여하고, 사용자가 원하는 행동을 하기 위해 만들어 졌습니다. 앵귤러는 타입스크립트 기반으로 앵귤러의 문법대로 개발하는 언어 라고 생각하면 될 것 같습니다. 기본 개발 환경구성 Node.js를 설치해야한다. - https://nodejs.org/ko/ 개발 도구를 설치 해야 한다. - https://code.visualstudio.com/ or 인텔리제이 타입스크립트를 Node.js의 라이브러리 설치명령어의 도움을 받아 설치한다. vs코드를 실행 시키고 Extensions 탭에서 Angular Snippets를 설치한다. → 코드 문법검사, ..