hsunny study blog

EventTarget.addEventListener()의 옵션 중 하나로 passive가 지원된다. passive를 true로 설정함으로써 스크롤 성능을 향상시킬 수 있다. // Chrome 49 부터 EventListenerOptions 지원 document.addEventListener("touchstart", handler, { capture: false, // Chrome 49 once: false, // Chrome 55 passive: false // Chrome 51 }); 어떻게 향상하는걸까? 스크롤 할때 발생하는 터치 이벤트들이 브라우저에서 발생하면, 브라우저는 터치 이벤트 수신기가 스크롤을 취소할지 여부를 알 수 없으므로 항상 수신기가 끝날 때까지 기다렸다가 페이지를 스크롤한다. pas..

문자열, 통화, 일자와 같은 데이터를 원하는 형태로 바꾸기 위하여 파이프를 사용한다. Angula는 기본 파이프를 제공하며 이외에 데이터를 변환하는 로직이 별도로 필요하면 커스텀 파이프를 만들어서 사용할 수 있다. 템플릿에 파이프 사용하기 1. 문자열 바인딩 문법({{}}) 안에 작성한다. 2. 표현식의 오른쪽에 파이프(|)를 적고 파이프 이름을 적는다. Wait for it... {{ greeting | async }} 파라미터와 체이닝 파이프로 데이터를 변경하기 파라미터 사용 파이프의 결과물을 조정하기 위해 추가적인 파라미터를 사용할 수 있다. 추가적인 파라미터를 사용하기 위해서는 콜론(:)을 붙여서 전달할 값을 작성하면 된다. 아래 예제는 CurrencyPipe 를 사용하는 예이다. 더보기 Curr..

1. 정확한 타입을 지정하기 (any 사용 피하기) 타입 지정은 타입스트립트로 코딩할 때 얻을 수 있는 장점 중 하나입니다. 자바스크립트는 런타임 때 데이터 타입이 지정됩니다 타입스트립트에서 데이터 타입을 정의하면 실수로 발생할 수 있는 이상한 런타입에러를 방지할 수 있습니다. 'any' 변수의 데이터 유형을 알고 있는 경우 'any'를 사용하지 마세요. 새 변수를 선언할 때마다 데이터 유형을 정의하는 것이 좋습니다. 2. strict 모드 사용하기 ES5에서 use string 기능이 추가되었습니다. 문자 그대로 '코드는 엄격한 모드에 있어야 함'을 의미합니다. 타입크스립트 코드의 tsconfig 파일에서 'strict' 환경설정을 찾을 수 있습니다. 이는 선언되지 않은 변수를 사용하거나 타입지정을 하..

현재 실행되는 컨텍스트를 말합니다. 여기서 컨텍스트는 값과 표현식이 표현되거나 참조될 수 있음을 의미합니다. 만약 변수 또는 다른 표현식이 해당 스코프 내에 없다면 사용할 수 없습니다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가능합니다. 함수는 자바스크립트에서 클로저 역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근할 수 없습니다. 예를 들어 다음과 같은 상황은 유효하지 않습니다. 그러나 다음과 같은 코드는 변수가 함수 외부에 전역에서 선언되었기 떄문에 유효합니다. insight 전역으로 선언한 변수와 동일한 이름의 지역 변수를 사용할 떄 의도하지 않은 결과가 나올 수 있습니다. 따라서 스코프..

개발을 하다보면 여러 버전의 노드를 사용해야 하는 경우가 있습니다. nvm을 사용하면 프로젝트 별로 필요한 노드버전을 쉽게 선택할 수 있습니다. 아래 과정중 이미 설치되어 있는 경우는 건너뛰면 됩니다. nvm이란 node.js 버전 관리 매니저로, 사용자별로 설치되도록 설계되었으며 shell별로 호출됩니다. nvm은 POSIX-compliant shell(sh, dash, ksh, zsh, bash)에서 작동하며, 특히 unix, macOS 와 window WSL 플랫폼에서 작동합니다. *WSL: Windows Subsystem for Linux *POSIX-compliant shell: Portable Operating System Interface - 운영 체제 간의 호환성을 유지하기 위해 IEEE ..

현상 iOS 다크모드를 킨 채로 앱을 실행 홈화면에서 status bar 위치의 배경의 흰색(#ffffff)이라 status bar 의 글자가 같은 색상(#ffffff)이라 보이지 않음 추가정보 - 해결방법 다크모드 해제하기 config.xml 에 아래 코드 추가하기 ... Light ... 참고사이트 더보기 https://github.com/apache/cordova-plugin-statusbar/issues/148

인터폴레이션으로 값을 표시하기 이중 중괄호로 감싼 표현 방법 {{ }} // src/app/app.component.ts currentCustomer = 'Maria'; Current customer: {{ currentCustomer }} 위의 경우에서 화면에 출력되는 값은 `Current customer: Maria`이다. 이미지의 속성 값으로 넣는 것도 가능하다. // src.app/app.component.html 템플릿 표현 인터폴레이션 표현으로 해결하기 앵귤러는 {{ }} 안을 먼저 평가한 뒤에 결과물을 string 형태로 변경한다. The sum of 1 + 1 is {{1 + 1}}. 메서드를 호출하는 것도 가능하다. The sum of 1 + 1 is not {{1 + 1 + getVal..

현상 브라우저 내에 cannot GET / 메시지만 출력 추가정보 - 발생한 때 아래 코드 실행 후 발생 $ ionic serve 발생한 원인 코드 작성 오류 해결방법 아래 코드를 실행하여, 코드오류를 점검하고 ionic serve 다시 실행 $ ionic build --verbose --verbose: 상세보기 모드 (verbose: 말이 많은) 참고사이트 더보기 https://stackoverflow.com/questions/60161879/ionic-serve-cannot-get-cannot-find-module-ionic-native-splash-screen-ngx