Opendatabase

오늘시간에는 회원가입을 받는 페이지를 만들고 버튼으로 이동 해볼까 한다 자! 그럼 뭐 부터 해야할까? 1. sign-up 페이지 생성2. 버튼에 펑션부여 페이지를 생성하자ionic g page sign-up 페이지가 잘 생성됨을 확인하고 아래와 같이 버튼에 click이벤트를 부여한다 Sign-up 해당 펑션은 moveToPage(pageName: string) { this.navCtrl.push(pageName); } 라고 LoginPage class안에 넣어 주었다 그러면? 이동은 잘 될것이고 지난번에 작성한 ion-card를 그대로 복사해와서 signup페이지쪽에 나머지 작업을 하도록 하자 html에 아래의 내용을 작성하도록 하자 Sign-up Name Email Address Password Sig..

자 본격적으로 시작을 해보자 login page를 만들도록 하겠다 원래는 UI디자인을 해두고 해야하지만 그냥 막 하도록 하자 먼저 프로젝트를 새로 만들고 ionic start chat_dev 으로 생성을 해주고 로그인 페이지를 추가한다 ionic g page login이후 login 페이지를 lazy loading하도록 설정을rootPage:string = 'LoginPage';으로 해주자자 여기서 LoginPage는 새로생성한 pages/login/login.ts 안에 있는 class명으로 지정해야 한다 Ctrl + ` (1 옆에있는)을 누르면 터미널이 활성되고 해당폴더에 cmd창이 바로 열린다 거기서 ionic serve -o를 해서 페이지를 확인하자갤럭시 S5 기준으로 보이는 뷰이고 아래와 같이 수..

Blank부터 시작하는 아이오닉 / Text alignment, transformation main.html에 Text alignment 라고 기존 스타일로 해보자style="text-align:left" 가 기존스타일 아이오닉에서는 Text alignment 요렇게 text-left 로 간단하게 한다오른쪽은? 당연히 text-right 겠지?중간은? center 되시겠다 Text alignment Text alignment Text alignment Text alignment Text alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentText alignmentTe..

Blank 부터 시작하는 아이오닉 / theme 자! 오늘은 컬러를 조정해보도록 하겠다 기본적으로 src/theme/variables.scss 에 정의되어있는 컬러의 정의를 따른다 어떻게? Main 으로 달려가서 ion-navbar 에 컬러를 부여하도록 하자 main 이렇게.. primary는$colors: ( primary: #488aff, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222); 요기에 나와있다 뭐 컬러는 수동으로 하나하나 넣을 수 있겠지만 그러면 나중에 색을 바꿀때 어마어마한 작업이 필요하므로 왠만하면 정의된 색을 기준으로 일괄적용하도록 하자

Blank부터 시작하는 아이오닉 / 홈으로 페이지가 많고 깊은 depth를 가지는 경우 홈으로 한방에 가야하는데 요번시간에는 간단하게 그것만 알아보도록 하자 먼저 전에 만든 page2와 page3을 적절히 활용하여 진행 하도록 하자 main > page2 > page3으로 가도록 page2에 버튼을 하나 추가해서 page3으로 가도록 만들자 이정도는 스샷이 없어도 능숙히 하시리라 믿는다 쨘 그런데 Main으로 다시가기 위해서는? 뒤로버튼을 두번 눌러야 한다 한방에 가야하기 때문에 To the Root라는 버튼을 만들고 Main으로 한방에 가도록 하자 to The Root는 page3.html to the Root page3.ts navigatetoRoot(): void { this.navCtrl.setR..

Blank부터 시작하는 아이오닉 / component를 불러오자 지난번에는 page에 대해서 lazy loading을 이용해 봤다 이번에는 component를 불러와서 화면에 출력 해보도록 하자 module안에 n개의 component가 있는 형태라고 전에 설명 했듯이 page라는 모듈안에 component를 넣을 예정이다 component 하나를 item-list라는 이름으로 생성하고 ionic g component item-list 파일이 잘 생성 되었는지 확인을 하자 text라는 string변수에 Hello World라고 정의 되어있는데Hello World는 헷깔리니 다른 이름으로 변경하자나는 This is item-list component로 변경했다 그러면 이 컴포넌트를 MainPage에 출력을..

Blank부터 시작하는 아이오닉 지난번에 만든 Blank프로젝트를 가지고 아이오닉을 좀만져보자 짠Ionic Blank the world is your oyster.If you get list, the docs will be your guide 이라고 나온다 소스로 가서 src/pages/home/home.html을 보면? 쨘 글씨만 바꿔서 어떻게 변경되는지 볼까? 자 글씨가 변경되면 바로바로 적용된다 안드로이드 아이폰 윈도우폰 3플랫폼 모두 지원한다당연한것이 웹기반 이기때문이다 자 페이지를 추가해보자 해당 프로젝트 폴더로 가서ionic g page page2 를 입력하면 두번째 페이지가 추가된다 페이지가 추가되어도 두번째 페이지로 갈수 없으니 첫번째 페이지만 계속 보인다여기서 오류가 보이는 사람은src/..

자 이제 진짜 아이오닉 어플을 만들고 확인해보도록 하자 ionic start blankProject blank 생성되었고 cd blankProjectionic serve -o blank라 아무것도 없는 그것이 생성되었다그럼 다른것도 만들어볼까 ionic start tabsProject tabs 아래쪽에 tab이 있는 프로젝트가 생성되었고 실행 해봤다 더 많은 기본 템플릿은ionic start anyProject 라고 쳐서 한번 보자물론 anyProject는 아무이름이나 하면되고 구지 Project라고 안 넣어도 된다 tabs, blank, sidemenu, superconference, tutorial, aws가 있는데 super의 경우는 best practices라고 하니 한번 만들어 보자 여러가지가 ..

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 6. pipe pipe를 전에 "| json"를 통해 잠깐 볼일이 있었는데 더 많은 pipe들이 있다 ng doc pipe 하면 아래와 같이 여러 문서들을 볼 수 있다 uppercase를 예를 들면 이렇게 사용하고 결과는 저렇게 나온다왜? Hello는 대소문자가 섞여있지? 라고 엉뚱한 질문을 하는 사람들도 간혹 있겠지만3번째 줄을 보면 uppercase는 person.name만 영향 받도록 되어있다 그러면 파이프를 만들어서 진행 하도록 해보자ng generate pipe PersonNameUpper로 만들면 app밑에 person-name-upper.pipe.ts가 생성 되었다app밑에 pipe폴더를 만들고 만들어진 2개의 파일을 이동시키도록 ..

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 6. Component Communication "5." 시간에 만든 names를 실제로 person으로 만들어 보자 src/app 에서 우클릭 새폴더이름은 person생성된 person 폴더에서 다시 우클릭 새 파일 파일명 person.ts 그리고 내용은 export class Person { name: string;} export const PEOPLE = [{name: "Twoway"}, {name: "Greeting"}, {name: "JSON"}, {name: "Angular"}, {name: "Ionic"}]; 그 다음은app/greeting.component.ts에서 names: 줄을 주석 처리하고 app/greeting.compo..

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 5. ngFor 자.. 이번에는 for문이다 컴포넌트를 하나 생성하도록 한다 ng generate component greeting그 다음 app/app.component.html로 가서새로 추가된 app-greeting을 추가한다 성공했다면 아래와 같은 화면을 볼 수 있다. 그 다음 app/greeting/greeting.component.ts로 가서 names: string[] = ["Twoway","Greeting","JSON","Angular","Ionic"]; 를 추가한다names라는 array에 5개 값을 넣어줬다 그런다음app/greeting/greeting.component.html로 가서 {{name}} 라고 입력을 한다 그러면..

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 4. ngIf else 일단 지난 3. 에서 한 내용만 두고 주석처리를 하고 가도록 하겠다 app-twoway만 두고 if else 를 해보도록 하자 스샷이 귀찮으니 app/twoway.component.ts 가서 this.greeting = "Hello App?"; 를 삭제하고 저장 그러면 아무것도 안나오는 text field 만 뜬다 이 상태로 글을 입력하면? 글이 잘 입력된다 자 그럼 if else를 써보도록 하자 app/twoway/twoway.component.html로 와서 Type anything in the textbox를 최상단에 넣고 아래와 같은지 확인한다 그러면 어떻게 될까? greeting에 내용이 없으면? Type any..

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 3. Two-way data binding 이번엔 two-way data binding이다 지난시간 까지 작업했던 프로젝트에 계속 작업 하도록 한다 먼저 component를 생성 해보도록 할텐데 ng generate component twoway 로 생성하고vsc에서 확인을 해보면 폴더가 들어가있다cmd창을 보면 app.module.ts에 update가 발생했는데TwowayComponent가 import되어진것을 확인 할 수 있다 그럼? 기존화면에 컴포넌트를 뿌려볼까? app/app.component.html로 가서 를 추가하면?app/twoway/twoway.component.html의 내용을 가져와 아래와 같이 뿌려준다 twoway work..

ngModule에 대해서 알아보도록 하자 application에는 여러개의 module이 사용되고 module은 여러개의 component로 구성된다 프로젝트를 만들고 시작해보자 ng new myProject2cd myProject2code . 그러면 코드 스튜디오가 나올것이다 app/app.module.ts먼저 보도록 하자안에 @NgModule 이 선언되어있고bootstrap이 AppComponent인것을 볼 수 있다 그럼 상단에서 ./app.component에서 AppComponent를 import하기에 app.component파일로 넘어가도록 하자 class AppComponent 는 title = 'app' 을 가지고 있다해당 component는 app-root라는 이름으로app.component..

Angular부터 시작하자 기본적으로 Module안에 다수의 component가 있는 구성으로각 component는 metadata, template, class가 들어있다 angular cli를 설치해보자 npm install -g @angular/cling new newProjectcd newProjectcode . 'code . ' 은 해당폴더에서 visual studio code를 바로 실행 시키는 명령이다 visual studio code가 뜨면 크게 3개의 폴더가 보인다e2e, node_modules, src e2e는 end to end test를 위해 있고 지금은 그냥 올바른 테스트를 하기 위해 있는것이다 정도만 알고 넘어가도록 하자 node_modeuls는 @angular 를 비롯한 여러개..

개발을시작하자 배우면서 필요한부분 느낀부분에 기반해서 포스팅을 작성하도록 하겠다 환경구성 1. nodejs 설치https://nodejs.org/ko/최신버전으로 설치하도록 하자버전확인node -vnpm -v 2. ionic & cordovanpm install ionic cordova -g-g 옵션은 해당 개발세팅된 컴퓨터의 어느 유저든 사용할 수 있는 글로벌 퍼미션을 주는것 3. 코딩을 위한 에디터 설치https://code.visualstudio.com/비주얼 스튜디오 코드를 사용하도록 한다 플러그인angular language serviceangular v4 typescript snippets TSlint 여기까지 보면? 에디터 플러그인은? 왼쪽 하단에 확장을 누르고 검색을해서 설치하도록 하자1...