Front-End

아이오닉 capacitor의 사용방법

Ionic capacitor란? 하나의 코드로 iOS, Android 웹 앱을 설치가능한 앱으로 만들 수 있도록 해주는 크로스 플랩폼 앱런타임입니다. 기존에는 이러한 하이브리드 앱 기능을 위해서 cordova를 사용해 왔는데, cordova에는 몇가지 한계점이 드러나게 되면서, capacitor가 등장 하였습니다. capacitor는 iOS, Android, Web가릴것 없이 거의 동일한 UI를 적용이 가능하게 하며, 일관된 웹 API 세트를 제공하게 됩니다. capacitor의 설치 1-1 새 capacitor 프로젝트를 생성 npm init @capacitor/app 1-2 기존 앱(프로젝트)에 설치 npm i @capacitor/core npm i -D @capacitor/cli 2 캐패시터 초기화..

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

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를 설치한다. → 코드 문법검사, ..

타입스크립트의 인터페이스

타입스크립트 Interface 자바에서의 인터페이스는 추상 메소드와 를 정의한 클래스를 위주로 다루지만, 타입스크립트에서는 객체를 위주로 다룬다는 점에서 차이가 있습니다. 인터페이스는 두개의 시스템 사이에 상호 간 정의한 약속 혹은 규칙을 포괄하여 의미하는데, 이는 객체의 껍데기 또는 설계도와 비슷합니다. 여거 개의 함수와 여러개의 변수 등이 구조적으로 어떻게 결합되어야 하는지에 대한 약속입니다. interface Person { name: String; age?: number; //optional, 해당 속성은 명시해도 되고 안해도 된다. move(): void; //인터페이스에는 객체에 대한 정의 뿐만 아니라 함수에 대한 정의도 들어갈 수 있습니다. } var person1: Person = { na..

타입스크립트의 함수선언

함수의 기본적인 타입 선언 매개변수와 반환값에 타입을 지정하였습니다. 반환 값에 타입을 정하지 않을 때는 void 라도 사용하는 것이 좋습니다. 함수 표현식 function sum1(a: number, b: number): number { return a + b; } 함수 선언식 //* 함수 선언식 let sum2 = function (a: number, b: number): number { return a + b; }; 화살표 함수 //* 함수 선언식 let sum3 = (a: number, b: number): number => { return a + b; }; Call Signature(함수 타입) 타입스크립트에서는 함수를 표현하는 타입을 미리 선언하는것이 가능하다. 위의 함수 표현식에서는 함수 리..

타입스크립트의 변수선언

변수 Variable 선언자 변수 앞에 위치하는 키워드 선언자에 따라서 변수의 scope level이 달라진다. 함수 level : 해당 변수는 함수 안에 개별 선언으로 인식된다. 블록 level : 해당 변수는 블록안에 개별 선언으로 인식된다. 전역 level : 해당 변수는 프로그램 모든 범위에서 개별 선언으로 인식된다. 우선 순위 : 블록 > 함수 > 전역 선언자 종류 scope 가능 범위 특징 var 함수, 전역 호이스팅이 가능하다. ( 변수를 나중에 선언해도 해당 선언을 코드 최상단으로 올리는 것) let 함수, 블록, 전역 1. 같은 블록 내에서 같은 이름의 변수 중복 x 2. 변수를 초기화 하기 전에는 변수에 접근 할 수 없게 해서 호이스팅을 방지 3. 선언할 변수에 블록 레벨 스코프를 적용..