웹프로그래밍 (130) 썸네일형 리스트형 validate JSON (JSON 여부 검사) const isJson = (str: string) => { try { const json = JSON.parse(str); return json && typeof json === 'object'; } catch (e) { return false; } }; get only text by clipboard Copy & Paste 시에 텍스트만 가져오도록 처리 onpaste 이벤트에 걸면된다. const getTextByPasteClipboard = (e) => { e.preventDefault(); let text; const clp = (e.originalEvent || e).clipboardData; if (clp === undefined || clp === null) { // eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-ignore text = window.clipboardData.getData('text') || ''; if (text !== '') { text = text.replace(/]*>/g, ''); if (windo.. get Image width and height const getImageSize = (file: File, callback: (width: number, height: number) => void) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (e) => { const image = new Image(); image.src = e.target.result as string; image.onload = function () { // eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-ignore callback(this.width, this.height); }; }; } Vertical scrolling in iOS not smooth div에 overflow를 사용해 scroll 를 만들었을때, ios 등에서 smooth scroll이 안될 경우. * { -webkit-overflow-scrolling: touch; } 위 코드 삽입. * 로 설정은 부담이 될 수 있으므로 해당 태그에만 적용시켜도 된다. iphone X 웹뷰 safe-area-inset 관련 프로젝트에서 상단 하단 position:fixed된 레이아웃 상태에서 아이폰X 웹뷰 대응 방법이다. 메타태그 뷰포트쪽에 viewport-fit=cover 를 추가 padding-top: env(safe-area-inset-bottom); 2번의 속성값을 응용하는 건데 기본적으로 env(safe-area-inset-bottom); // IOS 11.0 이상 (신) constant(safe-area-inset-bottom); // IOS 11.0 버전 (구)ios 11.2 업데이트에서 constant가 제거됨 env를 사용. 해당 값이 필요한 부분에 위값을 응용하여 집어 넣었다. (저는 커스텀한곳에 위 env,constant 둘다 삽입 했습니다;) safe-area-inset의 기본값이 있어 값을 수정하고 .. CSS overflow scrolling and hidden scrollbar (iOS) I just played with this CodePen and it seems that if you set the background-color to transparent for all three properties below (and in this example also remove box-shadows), the scrollbar is not visible at all: #style-1::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1); background-color: transparent; } #style-1::-webkit-scrollbar { background-color: transparent; } #.. 안드로이드 웹뷰 스크롤바 안보일 때 (Android Webview scrollbar not visible, div overflow auto, scroll case) 앱 내에 웹뷰 방식으로 서비스를 런칭할일이 있는데, body scroll 이 아닌 div overflow auto 로 스크롤을 만들었는데 스크롤바가 나타나지 않았다. (어디서 영향을 준걸까...) 아래 css 코드를 적용하니 해결되었다. 스타일은 취향에 맞게 맞추면 된다. ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); -webkit-border-radius: 10px; border-radius: 10px; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px;.. 안전한 any 타입 만들기 타입스크립트에서 가장 유용한 타입은 무엇일까요? 저는 any 라고 생각합니다. 항상 타입 검사를 만족시킨다는 특성이 타입스크립트에서도 자바스크립트 모듈을 손쉽게 사용할 수 있게 해주기 때문입니다. 이렇게 자바스크립트의 거대한 생태계를 그대로 활용할 수 있게 해준다는 점에서, any는 타입스크립트의 생산성을 높여주는 유용한 타입입니다. declare const untypedModule: any; 그럼 타입스크립트에서 가장 유용하지 않은 타입은 무엇일까요? 저는 이 또한 any라고 생각합니다. 항상 타입 검사를 만족시킨다는 특성이 타입 검사의 의의를 퇴색시키기 때문입니다. 어떤 비정상적인 연산이라도 any 타입이 붙어버리면 타입 검사를 통해 걸러낼 수 없기 때문에 any는 프로그램의 안전성을 낮추는 유용하지.. 이전 1 2 3 4 5 6 7 ··· 17 다음
