Front
-
[ES6] Arrow FunctionFront/JavaScript 2020. 7. 31. 16:41
1) - 정적으로, 선언시 this가 정의된다. 리터럴은 동적으로, 호출시 정의된다(감싼 객체) - this는 가까운 non-arrow 펑션의 this를 참조한다. var literal = function(){console.log(this)}; // Window var arrow = ()=>{console.log(this)};// Window var obj = { literal : literal,// Object arrow : arrow// Window }; var obj = { outer(){ literal();// Window arrow();// Window (function(){console.log(this)})();// Window (()=>{console.log(this);})();// Obje..
-
[JS] FileReaderFront/JavaScript 2020. 7. 29. 16:48
FileReader - 사용자 컴퓨터에 저장된 FIle(or raw data buffers) 의 내용을 비동기로 읽는 객체 # readyState - 현재상태 error - 읽기 실패시 발생한 오류 result - 읽은 결과물 # FileReader() - Internet Explorer 10 이전 버전에서는 지원하지 않음 # .readAsDataURL(File) - Blob이나 File을 읽음 - 결과물은 base64 인코딩 된 스트링 형태로 result 속성에 담는다 .onloaded - 파일을 읽은 뒤 트리거되는 이벤트. https://developer.mozilla.org/en-US/docs/Web/API/FileReader
-
[JS] 정규식 RegExpFront/JavaScript 2020. 7. 29. 16:33
자바스크립트에서는 '정규식'을 객체로 정의함 1) 리터럴생성 : //로 감싼다. 스크립트 읽을 때 컴파일 된다. 상수정의시 유리. var reg = /e/ 2) RegExp 생성자 : 사용시 컴파일 된다. 다시 정의할 경우 유리. var reg = new RegExp("e"); RegExp.exec(str) - 일치한 텍스트 반환. 없으면 null RegExp.test(str) - match와 같은 기능 String.split(reg) - 문자열 -> 배열 String.match(reg) - 정규식에 일치한 문자열이 있는지 boolean으로 반환 String.search() - 정규식에 일치한 문자의 index 반환 String.replace(reg,a,b) ** https://www.w3schools...
-
[Vue]Front 2020. 6. 15. 15:42
[Vue.js] NPM -패키지관리도구 WebPack -모듈번들러 ------------------------------------------- [배경] - 자바스크립트 생태계 stateofjs.com/ - 잔인한 프레임워크 생명주기 stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/ ** 제이쿼리에 vue.js 변환이 쉽다 ** html+css+js 한파일에 다룬다 .vue ------------------------------------------- *live server *vetur night owl or github plus --테마 Material Icon Theme Eclipse Keymap ----------------..
-
[thymeleaf] 타임리프Front 2019. 12. 16. 23:36
템플릿엔진 ${..?} null체크. 값이 null이면 빈값이 출력된다 ${board?.idx} @{...}- 링크표현 @{/oreder/details(id=1, action='show_all')} #temporals - 날짜 포맷팅 함수 .arrayFormat(...)Array 타입 -> 날짜값 .listFormat(...) .setFormat(...) th:href th:src th:text th:style th:class th:fragment - 레이아웃 이름지정 th:insert = "경로:: fragment이름" th:replace ="경로:: th:include th:if - 화면에 띄울 조건 th:each - 순차접근 th:with - 변수정의 // th:with="startNumber=..