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

[Ionic 5] Light/Dark Theme 적용하기

# 개요Ionic 상에서는 prefers-color-scheme 미디어 속성(쿼리) 라는 표준으로, 사용자 App의 Light/Dark 여부를 판별하여, Theme를 적용한다. Q. prefers-color-scheme 미디어 속성이란?prefers-color-scheme CSS 미디어 특성은 사용자의 시스템(크롬, 파이어폭스, 안드로이드 웹뷰, 아이폰 웹뷰)이 App이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다. - prefers-color-scheme 미디어쿼리의 가능 속성no-preference : 사용자가 시스템에 선호하는 테마를 알리지 않았음을 나타냅니다. 이 키워드는 boolean context에서 false로 판정됩니다.(특정 브라우저에서는 light로 기본으로 지정됨)l..

2020. 8. 14. 01:15
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] Main Color 색상 정의하기

# 개요Ionic 상에서는 css에 색상을 지정해도 좋지만, primary, secondary, dark, success 와 같은 색상을 global로 지정한 후에, ionic 태그에 간편하게 color="(색상값)" 형식으로 사용한다. When there is no color set on the button it uses the primary color by default.어떠한 색상도 버튼에 대해 설정이 되어 있지 않으면, 기본적으로 primary color로 지정된 값에 따라 스타일링 되게 된다. # 실제 ionic 태그상에서 사용 예제 DefaultPrimarySecondaryTertiarySuccessWarningDangerLightMediumDark # 기본 색상 변경하기 Each color ..

2020. 8. 13. 23:55
[DEV] App Dev ∕ Web Front/Lang ∕ Css, Scss, Less

Css 상에서 !important의 의미란?

# 간단 설명 Css는 폭포수처럼 흘러내리면서, 스타일을 적용하게 되는데, !important를 붙이게 된다면..? CSS 작성시 !important; "다른 것보다 가장 최우선으로 적용해라" 정도의 의미라고 생각하면 된다.

2020. 8. 13. 22:48
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

[Ionic 5] Ionic Infinite Slide

# 개요fullcalendar library가 기본적으로, swipe를 제공하지 않는 관계로, 여러가지 hammer.js 라이브러리 등을 시도해본 결과, 결국은 ionic slides를 사용하는 것이 가장 안정적인 방법으로 결론이 났다. 많은 검색을 해보았지만... 아래 방법이 지금까지는 최선인 듯하다. Best Practice를 구하고 싶었으나, 세상은 그렇게 호락호락하지 않았다. # 요건- 성능 저하를 최소화할 것- swipe 모션이 정확하면서, 기타 기능을 저해하지 않을 것 # 수정사항- mousedown 이벤트는 브라우저에만 해당하므로, pointerdown이라는 이벤트 함수로 변경(touch screen이나 mouse에서 동시에 작동함) # component.html swipetest2 {{nu..

2020. 8. 13. 17:11
[DEV] Programming Lang/JavaScript

Node JS Date Library 비교

# 개요Date 관련 작업이 많이 사용되는 Application을 구현할 때, 완전하게 성능만 본다면 Native Date가 최고의 퍼포먼스를 보여준다. 그러나, Native Date의 경우, 기본적으로 제공되는 기능이 한계가 있는 편이고, 사용자 편의성이 떨어지게 된다. 개발자들의 유지보수성, 가독성을 생각한다면, 외부 Date 라이브러리를 선택하는 것이 가장 합리적인 선택이 될 것이다. # moment.js가장 많은 star를 받고 있는 moment.js는 방대한 locale과 편의기능을 제공한다. 간편하게 앱을 작성하고자 한다면 좋은 선택이 될 것이다. 그러나, 패키지 용량이 과도하게 큰 편이고(400k?), 객체 생성시 불필요한 함수들이 많이 계산되는 성능상의 단점이 존재한다. # date-fns..

2020. 8. 13. 00:28
[DEV] App Dev ∕ Mobile/Framework ∕ Ionic

Ionic 성능개선하기 - Slide 최적화

# 개요 slider 사용시, 성능이 급격하게 나빠지는 현상 발생 # 해결책 onSlideChanged 이벤트 발생시, 꼭 필요한 경우에만 호출하도록 조치한다.import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'page-my', templateUrl: 'my-page.html', changeDetection: ChangeDetectionStrategy.OnPush }) export class MyPage implements OnInit { slides: number[] = []; methodCounter: number = 0; ngOnInit() { let n..

2020. 8. 12. 10:33