프로그래밍/Javascript (17) 썸네일형 리스트형 IE에서 [Syntax Error: ':'가 필요합니다] 발생하면 ES6를 사용한 것 오류 잘 되던 것이 IE에서 테스트를 하니 ':'가 필요합니다 오류 메시지가 뜬다. 사정상 Vue를 컴파일하지 않고 httpVueLoader로 불러 사용하고 있는데 코드 중 ES6가 있었기 때문이다. 정확하게는 다음 문제이다. 원인 ES6 문법 중 오브젝트의 프로퍼티로 함수를 지정할 때 다음과 같이 function 키워드를 명시하지 않고 ()축약해서 쓸 수 있다. var methods = { someFunction() { // ... } }; 해결 IE에서는 당연히 안된다. 다음과 같이 고쳐야 한다. var methods = { someFunction : function () { // ... } }; IE 없는 세상에서 살고 싶다. 대한민국 인터넷 브라우저 중 IE 점유율이 이미 10% 밖.. [Vue.js] 체크박스 값을 boolean(true/false) 대신 'Y/N' 으로 바꾸기 상황 Vue.js에서 체크박스에 바인딩 된 모델의 값은 기본적으로 true / false 이다. 근데 고객 놈들의 디비는 Y/N 문자로 관리한다. 해결 input의 true-value와 false-value props를 사용한다. 주의할 점은, 이 값은 form submit 시 체크되지 않은 값은 전송되지 않는다는 점이다. 나는 form submit 하지 않고 바인딩된 모델 json을 전송해서 사용하므로 상관없었다. 참고 https://kr.vuejs.org/v2/guide/forms.html#%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4-1 jQuery rotate 이미지 회전 시 함정카드 조심 여러가지 훌륭한 프론트엔드 프레임워크가 많은 시대에 jQuery로 일반적인 CRUD 화면을 개발해야 하는 것은 굉장히 난감한 상황이다. 그러나 제이쿼리의 오래된 역사와 생태계로 인해 UI 개발에는 여전히 jQuery의 여러가지 플러그인 없이는 무언가를 '쉽게' 구현하기 힘들다. jQuery rotate도 그 중 하나이다. 그 이름처럼 무언가를 회전시켜 주는 플러그인이다. jQuery rotate [http://jqueryrotate.com/]http://jqueryrotate.com/ 기본적인 사용법은 워낙 간단해서 공식 홈페이지에 나온 몇 가지 예제로 충분하다. 단순 회전 애니메이션과 함께 회전 애니메이션 시간 조절 완료 후 콜백 무한 회전 이 정도면 회전으로 하는 모든 것을 할 수 있다.. axios 요청 응답 시 오버레이 로딩 이미지 띄우기 (axios beforeSend) 결론부터 jQuery ajax의 beforeSend 같은 기능을 axios에서 구현하고 싶다면, interceptor를 설정하면 된다. 오버레이 로딩, 스피너(뺑글뺑글 이미지) 등 여러가지 이름으로 불리지만, 어쨌든 마음에 드는 것을 쓰면 된다. 주의: 로딩 띄우는 것은 요청 전에만, 나머지는 로딩 오버레이를 꺼야한다. 지금은 Vue.js로 개발하고 있기 때문에 store에 loading이라는 상태를 만들고 app.vue에 오버레이 로딩 컴포넌트를 삽입하여 $store.state.loading을 참조하게 했다. mutation에는 startLoading, endLoading을 만들어 아래 인터셉터에서 스토어의 상태를 바꾼다. 아래 코드는 axios 공식 문서에서 주석만 수정한 것이다. 해당 위치에서 오버.. Typescript / TSLint 오류 - Type boolean trivially inferred from a boolean literal, remove type annotation Vue 컴포넌트를 만들고 있는데 TSLint에서 경고를 했다. 문제가 된 코드 private resizable: boolean = true;TSLint 경고 내용 Type boolean trivially inferred from a boolean literal, remove type annotation원인 초기값을 할당하면서 true를 줬는데, 코드에서 타입을 명시하지 않아도 컴파일러가 초기값을 통해 타입을 추론할 수 있으므로 코드가 장황해진다. 수정된 코드 tslint.json을 이런 경우를 체크하지 않도록 수정하거나 코드를 수정하면 되는데, 나는 습관을 고치기 위해 코드를 수정하기로 했다. private resizable = true;만약 tslint 설정을 고치고 싶다면 tslint.json에서 다.. InternetExplorer ajax 파일 다운로드 처리 (msSaveBlob 사용) 백오피스의 일부 엑셀 다운로드가 IE에서 안 된다는 오류가 들어왔다. 열어보니 두 케이스였다. 프론트에서 데이터 내용을 만들어 a 태그에 넣어 클릭 발생 서버에서 받아오지만 ajax로 byte[]를 받아와 a 태그로 만들어 클릭 발생 어쨌뜬 의 download 어트리뷰트를 사용한다는 공통점이 있었다. 이건 IE에서는 안된다. download 어트리뷰트가 엣지부터 가능하기 때문이다. (IE를 안 쓰면 모두가 행복한데 ㅠㅠ) 그냥 서버로 처리할까 하다가 msSaveBlob라는 것을 찾았다. IE10부터 지원한다. if (window.navigator.msSaveBlob) { var blob = new Blob([datastring]); window.navigator.msSaveBlob(blob, fileNa.. document.querySelectorAll(...).forEach 오류 자바스크립트 오류 querySelectorAll은 NodeList를 반환하는데, 일부 브라우저(라고 쓰고 IE라고 읽는다)에서 안된다. 해결: Array.prototype.slice.call을 사용하여 오류를 회피한다. 다음 문서를 참조하자. Array.prototype.slice.call(document.querySelectorAll('.className')).forEach( function () { // ... }); MDN Web Docs - NodeList.prototype.forEach() 자바스크립트 클립보드 복사 (라이브러리 없이) 자바스크립트 클립보드 복사 원리: 더미 텍스트상자를 만들어 복사한다. 클립보드 복사 이전 1 2 3 다음