hsunny study blog

사용중인 IONIC을 기준으로 포스팅한 글입니다. sentry를 사용하는 IONIC 앱을 빌드하면, 빌드할 때마다 센트리에 기록되는 릴리즈 아이디가 자동으로 변경됩니다. 출시되는 버전에 맞는 센트리 릴리즈 아이디를 고정하면, sentry에서 오류를 더 쉽게 확인할 수 있습니다. 이 때 사용하는 명령어는 SENTRY_SKIP_AUTO_RELEASE입니다. $ SENTRY_SKIP_AUTO_RELEASE=true ionic cordova build android $ SENTRY_SKIP_AUTO_RELEASE=true ionic cordova build ios ※ 주의 : SENTRY_SKIP_AUTO_RELEASE는 실행하려는 명령어의 가장 앞에 써야 합니다. ionic 이하에 작성할 경우 오류가 발생합니..

발생한 원인 javascript 코드 괄호를 잘 닫지 않아서 발생한 오류 해결방법 {} () 괄호 제대로 닫기

Mac 카탈리나 버전부터 기본쉘을 bash에서 zsh로 변경했습니다. 따라서, 2020년형 13인치 맥북에서 터미널의 기본 쉘은 zsh입니다. 설정후기를 기록합니다. 사실 터미널의 쉘을 신경쓰지 않고 사용해왔습니다. 최근 강의를 듣다가 강사는 bash, 저는 zsh를 사용하고 있어서, 이때부터 차이점이 궁금하여 서치를 시작했습니다. *MAC을 기준으로 설명합니다! zsh z 쉘이라고도 부릅니다. Zsh는 bash, ksh, tcsh의 일부 기능을 포함하고 있습니다. 더보기 위의 특징으로 리눅스에서는 bash 사용이 대부분이나 zsh로 바뀌는 추세입니다. 커맨드 쉘간의 기능 차이를 알고 싶다면, https://en.wikipedia.org/wiki/Comparison_of_command_shells 를 방..

IONIC에서 기본적으로 제공하는 range 값은 정수형입니다. ion-range로 소수점을 조절할 경우가 필요할 수 있는데요, 이러한 경우에 유용하게 사용할 수 있습니다. 사용예 min, max: range의 최솟값, 최댓값 pin: 사용자가 설정한 값이 노출되도록(손가락을 왔다 갔다 하면 현재 내가 선택한 값이 뭔지 보입니다.) step: 조절되는 값 (여기서는 0.5씩 조절합니다) _ngModel: weight의 기본값으로 설정하기 위해서 사용 changedValue: 사용자가 변경하는 대로 weight의 값을 변경하기 위해서 사용 float-range 컴포넌트를 위와 같이 사용할 수 있습니다. 그렇다면 float-range 컴포넌트는 어떻게 만들어야 할까요? FloatRangeComponent 1..

템플릿 참조 변수(#) 란 템플릿 요소 내에 있는 DOM 요소를 참조합니다. 또한 directive ( component를 포함하는 ), 요소, TemplateRef 또는 웹 컴포넌트를 참조할 수도 있습니다. 사용예 위와 같이 사용한 값은 아래와 같이 활용할 수 있습니다. Call 특징 1. 템플릿 참조변수 (#phone) 는 input 변수 (let phone)와는 다릅니다. 2. 참조 변수의 범위는 전체 템플릿입니다. 따라서 하나의 템플릿 안에서 템플릿 참조변수명은 두개 이상 사용되어선 안됩니다. 3. # 대신에 ref-를 사용하는 것도 가능합니다. 더 자세한 설명은 공식사이트를 확인해주세요. https://angular.io/guide/template-syntax#template-reference-..

border-width 요소 테두리의 너비를 지정할 수 있는 CSS 속성입니다. 속성 지정하기 1. thin | medium | thick 를 이용하여 굵기를 지정할 수 있습니다. #css1 { border-width: thick; } 2. 굵기를 직접 지정할 수 있습니다. #css1 { border-width: 4px; } 단위는 px, em, rem 등 자유롭게 사용하면 됩니다. 3. 상, 우, 좌, 하 각각 굵기를 지정할 수 있습니다. #css1 { /* 위 | 오른쪽 | 아래 | 왼쪽 */ border-width-4: 1px 2em 0 4rem; } 자세히 알아보기 데모 및 더 많은 정보는 공식문서(바로가기)에서 확인할 수 있습니다.

구글 플레이 스토어에서는 Android App Bundle (.aab) 로 배포하는 것을 추천합니다. 이유: 앱의 용량이 대폭 줄어듦 Android Studio 없이 IONIC 앱을 .aab 파일로 만드는 방법은 아래와 같습니다. 1. 프로젝트를 엽니다. 포스팅에 사용하는 IONIC 프로젝트의 정보 cli packages: (/usr/local/lib/node_modules) @ionic/cli-plugin-proxy : 1.5.8 @ionic/cli-utils : 1.19.2 ionic (Ionic CLI) : 3.20.0 global packages: cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) local packages: @ionic/app-scripts..

현재 페이지를 떠나지 않고 팝업 형식으로 창을 띄우고 싶은 경우 사용하는 ionic API는 ModalController 입니다. ModalController는 기본적으로 화면에 꽉 차게 뜹니다. 개발을 하다보면 아래와 같이 작은 크기의 모달을 만들어야 할 때가 있습니다. 위 모달을 호출하는 함수의 내용은 아래와 같습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // ... showGuide(e: Event) { e.preventDefault(); // ... loadOpt = { cssClass: 'mini-modal', enableBackdropDismiss: false, // 백드롭을 클릭했을 때 모달이 꺼지지 않도록 showBackdrop:..