Ionic 기본 – 기초 정리

여기서는 Ionic 을 사용하는 데에 있어 가장 기초가 되는 프로세스들을 정리해본다. Contents1 Ionic 프로젝트 생성하는 법2 IONIC src 폴더 살펴보기3 Ionic navigation4 Ionic2 와 Inoic3 의 페이지 네비게이션 차이4.1 일반 페이지 네비게이션4.2 Lazy Loading 을 이용한 페이지 설정5 다른 페이지로 변수값 전달하기6 현재 페이지를 View 에서 제거하기 (Pop)7 navPush, navParams, navPop 디렉티브를 이용한 네비게이션8 페이지 …

Ionic Contact 가져오기 및 디바이스 전화번호 가져오기

디바이스 사용자의 연락처 목록을 보여주는 아이오닉 앱을 만들어보자. (ic-1) 연락처 목록 가져오기 먼저 새 아이오닉 프로젝트를 생성하고 필요한 플러그인을 설치하자. ionic start caller blank ionic cordova plugin add call-number npm install –save @ionic-native/call-number ionic cordova plugin add cordova-plugin-contacts npm install –save @ionic-native/contacts 위에서 두가지 플러그인을 설치했는데, 하나는 연락처 목록을 가져오기 위한 Contacts 플러그인이고 나마지 하나는 …

[워드프레스 REST API] 간단한 글 불러오기 및 쓰기

얼마전까지만 해도 REST API 에 관한 정보를 찾으면 제대로 된 것을 구하기가 힘들었다. 메뉴얼도 복잡하고 엉성하고 예제도 없었다. 그래서 여태 손놓고 있다가 검색해보니 많은 발전이 있었던 것 같다. 배우기 좋은 토양이 갖추어져있다. 그럼 이제 시작해볼까. 쉬운 것 부터. 간단한 읽기오 쓰기. 워드프레스 REST API 를 이용하여 POST를 불러오기 http://localhost:8080/wp-json/wp/v2/posts 이 주소를 치면 최근 post 를 …

Javascript Date 와 Moment 활용

작업을 하다보면 늘 Date의 형식이 얽혀서, 헤깔리게 된다. Date 를 일관성있게 잘 정리해서 활용해야할 것 같다. Date 에 관한 문서 => mdn date Date 을 타임으로 변환하여 사용. Jan 1st 1970 00:00:00 am 을 0점으로 하여, 1 초를 1000으로 계산한다. 예를 들어, new Date().getTime() => 현재 시간을 타임으로 변환한다. Month var date = new Date(); …

Angular MEAN Stack 설정 다시 정리 : 서버 사이드 랜더링 미루자.

Angular의 SEO 문제 때문에, 최근 일주일 Angular Universal 이나 SSR (Server Side Rendering) 에 관한 starter 들을 들여다보고 있었다. starter 들을 분석하고 이해가 가능해야 사용해볼 수 있는데, 웹프로그래밍 공부를시작한지 겨우 6개월된 나로써는 역부족이라는 판단을 했다. 억지로 따라하면, 작동이야 시키겠지만 자유롭게 활용할 수 없다면 차라리 워드프레스가 나으리라. 그래서 훗날을 기약한다. 6개월즈음 더 지나면 왠만큼 이해하고 활용할 …

[memo] AOT Don’ts

AOT Don’ts The following are some things that will make AOT compile fail. Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time. Don’t use default exports. Don’t use form.controls.controlName, use form.get(‘controlName’) Don’t use control.errors?.someError, use control.hasError(‘someError’) Don’t use functions in …

Angular Universal (앵귤라 유니버살) – 서버사이드 렌더링 SEO 구현

[경고] 이 포스트는 Server Side Rendering 을 구현하려고 시도하는 중에 개인적인 노트로 작성된 것 입니다. 완성도가 있는 것도 아니고 바로 프로덕션에 쓸 수도 없습니다. 참고하세요. angular4 만으로는 아직 검색 엔진에 대응하는 seo 를 구현하기 어렵다. rendering 이 client side 에서 실행되기 때문에, 검색엔진이 해당 페이지를 접속하면, 내용이 입력되지 않은 간단한 html  프레임만 건지게 된다. 이런 …

세로 점 세 개 css 로 만들기

세로 점 세 개를 웹페이지에 넣으려고 특수문자표를 찾아봐도 도통찾을 수가 없다. 여기 저기 검색을 해보니 일목요연하게 정리된 곳이 있어 블로그에 복사해 놓는다 유니코드를 사용해서 만들기 .test:after { content: ‘\2807’; font-size: 100px; }   <div class=”test”></div> background 를 사용해서 만들기 div { width: 100px; height: 300px; background-image: radial-gradient(circle at center, black 10px, transparent 10px); background-size: 100px …

강화권 낚시터

낚시에 취미를 좀 붙여볼까? 어디로가지? 하고 돌아보면, 서울에서 접근 가능한 왠만한 저수지는 유료낚시터로 바뀌어있다. 산천이 모두 누군가의 이익 사업으로 독점되고 있으니, 참 팍팍한 세상이다. 무릇 어머니같은 자연은 개인이 소유할 수 있는 것이 아니다. 그런데, 실상은 물도 돈을 내고 먹어야하고 수렵채집 조차 돈을 내고 해야하는 세상이 되어버렸다. 앞으로는 공기도 돈을 주고 숨을 쉬어야하는 세상이되어버리면 어떻하지? 생각만해도 …

[ Angular2 : Renderer ] View Control 예제

Angular2 에서 View Control 은 처음 공부하는 입장에서 상당히 헤깔릴 수 있다. JQuery 나 Javascript 에서 Dom에 접근하는 방법이 Angular2 에서는 통하지 않는 경우가 있다. 혹자는 jquery를 angular2 에서 사용할 경우에 angular2 자체 해결책을 사용하는 것보다 심하게는 수십배의 속도차이가 난다고도 하더라. 그러니, 과거의 습관은 버리고 Angular2 에서 자체적으로 어떻게 View Control 을 하는 지 익혀둘 …