본문 바로가기
  • 일하면서 배운 내용 끄적이는 블로그

JavaScript7

명시적으로 UI 렌더링 이후 동작하는 방법 최근 KendoUi의 프로그레스바를 사용하다가 이상한 오류가 생겼는데 프로그레스바 호출을 분명 ajax 호출 이전에 선언 했는데도 프로그레스바가 나오지 않거나 혹은 ajax가 끝난 다음 잠깐 나왔다가, ajax 호출의 complete 부분에 선언해둔 프로그레스바를 없애는 코드에 의해 바로 사라져버리는 문제였다. KendoUi 라이브러리 자체를 못불러오는건가 싶어서 jsp에서 kendoui 라이브러리 가져오는 스크립트 위치도 바꿔보고 했는데 그냥 ajax 호출만 제외하면 잘만 나왔다 그러다 원인을 찾은게 현재 ajax 호출을 비동기로 하고있는데 KendoUi를 호출 -> (아직 KendoUi 프로그레스바 호출된 화면이 렌더링 안된 상태) ajax 호출 -> ajax 호출이 비동기라 해당 ajax 호출이 완.. 2025. 2. 21.
trim() 함수 Javascript에서 문자열의 앞뒤 공백을 제거하는 함수이다 let password = " secret ";if (password.trim() === "secret") { console.log("Password is correct");} else { console.log("Password is incorrect");} let password = "       secret     "는 trim을 사용하면 "secret"이 된다 하지만 문자열 중간 중간에 있는 공백은 제거되지 않는다 예) "      Hello World     "는 "Hello World"가 된다 " HelloWorld"가 되지 않는다 2024. 6. 10.
객체 속성을 정의하는 두가지 방법 자바스크립트에서 객체를 생성했을때 속성을 정의하는 방법은 두가지가 있다. 1. 객체 축약 문법을 사용한 방법export default { name: 'app', data() { return { testStatus: false, }; },}; ES6의 객체 축약 문법을 사용한 방법이고 2. 객체 리터럴 문법을 사용한 방법export default { name: 'app', data: { loadingStatus: false, },}; 이 두 가지 방법의 가장 큰 차이점은 자바스크립트 객체를 생성하는 방식이다.첫 번째 방법은 data 속성을 함수로 정의하고, 그 함수가 호출될 때마다 새로운 객체를 생성하여 반환한다. 이렇게 함으로써 각 컴포넌트 인스턴스가 고유한 데이터 객.. 2024. 5. 2.
JavaScript 문법 메모3 var obj = { name : "crong", age : 20} console.log(obj["name"]); console.log(obj.age); 결과: crong 20 const myFriend = { key : "value", key2 : "value" }; console.log(myFriend); // 객체 속성 추가 myFriend["name"] = "crong"; console.log(myFriend["name"]); 결과: crong myFriend.age = 34; console.log(myFriend.age); 결과: 34 // 객체 속성 삭제 delete myFriend.key; delete myFriend["key2"]; console.log(myFriend); var obj =.. 2024. 2. 28.
DOM 정의 및 활용 브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체 형태의 모델로 저장한다 따라서 DOM은 문서 객체 모델이다 그렇게 저장된 정보는 DOM Tree 라고 함. 따라서 HTML element는 Tree형태로 저장된다. getElementById() ID정보를 통해 찾을 수 있다. document.getElementById("id"); document.getElementById("id").id; document.getElementById("id").className; document.getElementById("id").style.display = "none"; document.getElementById("id").innerText = "있어"; document.query.. 2024. 2. 22.
JavaScript 문법 메모2 function a() { console.log(arguments); } a(1,2,3); 함수는 선언한것 보다 더 많은 인자를 받을 수 있다. 결과: { '0': 1, '1': 2, '2': 3} function a() { for(var i=0; i "Kim " + name; arrow 함수로도 표현 가능 2024. 2. 22.