[DEV] App Dev ∕ Mobile 검색 결과
26 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] Segment & Slider 연동하기

# 개요- 하.. 좌우로 swipe하면서, 상단 Tab까지 이동될 수 있는 방법을 열심히 찾았으나, 못구할 뻔 했으나, 꾸역꾸역 해결책을 구했다.- 다만, scrollIntoView라는 오래된 HTMLElement의 function이 사용되는데, 이 함수가 IOS의 WKWebView?의 11.2 버전 이하에서는 제대로 작동 및 지원이 안되었다고 한다. 그리고, scroll이 smooth하지 않고, 끊길 수 있는데, 이것을 해결하는 방식은 scroll-polyfill 패키지나 smooth-scroll 패키지 둘중하나를 설치해서, 해결할 수 있을 것으로 보인다. Q. polyfill이란? 브라우저가 지원하지 않는 기능을 구현하여, 사용할 수 있도록 하는 것이다. 다만, 플러그인 로드 속도 때문에 성능 이슈가..

2020. 8. 7. 17:35
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

Ionic Storage란?

# Ionic-storage란?기본적으로 ionic 프로젝트에서 사용되는 npm 패키지이다.Ionic Storage. A simple key-value Storage module for Ionic apps based on LocalForage5MB로 제한되어 있고, 넘어갈 경우 자동으로 데이터가 초기화될 수 있다. # Ionic-storage 설치Npm I @ionic/storage —save

2020. 8. 7. 01:47
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

ServiceWorker과 PWA(Progressive Web App)

# PWA란? Web App을 만드는 접근방식 중 하나어떤 기술을 지칭하는 것이 아니라 웹 어플리케이션의 구현 방법에 가깝습니다. 그렇기 때문에 본인의 상황에 맞추어서 PWA로 구현하면 됨PWA의 핵심 기술인 Service Worker와 Web App Manifest에 대해 배우게 됩니다. 또한 Service Worker를 통해 Offline 모드를 어떻게 지원할 수 있음 # PWA나온 이유앱의 가장 큰 장점은 오프라인에서도 사용할 수 있다는 점입니다.사용자들이 이미 필요한 자원을 로컬에 이미 설치해두었기 때문에 일부 로컬에 남아있는 데이터들을 통해 오프라인 모드를 지원할 수 있습니다. 웹은 접속할 때마다 HTTP 리퀘스트를 날리고 리소스를 다운받아야하기 때문에 오프라인 모드 지원이 어렵습니다.PWA는 ..

2020. 8. 7. 00:43
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

Manifest.json과 PWA(Progressive Web App)

# PWA란?음, 아직은 명확하지 않지만, 어떠한 플랫폼, 모바일 환경이든지 동작할 수 있는 App을 의미한다. # src/Manifest.json 파일어떠한 환경에서도 모바일처럼 작동하기위해 PWA과 관련되 전반적인 설정을 담고 있는 파일이라고 생각하면 될 것 같다. { "name": "Ionic Conference", "short_name": "Ionic Conference", "start_url": "index.html", "display": "standalone", "icons": [ { "src": "assets/img/appicon.png", "sizes": "512x512", "type": "image/png" } ], "background_color": "#387ef5", "theme_co..

2020. 8. 6. 23:29
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

Bug Report

# 태그를 태그 안에 사용시, 화면이 적당하게 표시되지 않음 - 원인 : 가 load되는 시점하고, full-calendar가 load 되는 시점이 다른 듯 하다. - 해결책 : 를 삭제 후, 로 대체 - 출처 : # 태그가 포함된 Component 상에서, custom css가 먹히지 않음 - 원인 : Angular는 기본적으로 View Encapsulation이라는 작업이 되어 있어, 커스텀 컴포넌트나 모듈 내에 속하는 Style 속성을 외부로부터 접근하기 어렵도록 보호하고 있다. 그렇기 때문에, 커스텀 컴포넌트를 사용하는 컴포넌트가 커스텀 컴포넌트에 영향을 주는 css를 일반적으로 적용하면 적용이되지 않는 것이다. - 해결책 : " overwrite some of the CSS properties ..

2020. 8. 6. 17:17
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

Ionic 전체 프로젝트 구조 설계

# index.html # app.component.html # pages 생성ionic g page pages/login ionic g page pages/dashboard ionic g page pages/details # app-routing.module.tsimport { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', loadChildren: './pages/login/login.module#LoginPageModul..

2020. 8. 5. 14:24