STUDY/프론트엔드
-
JavaScript : ArraySTUDY/프론트엔드 2021. 6. 2. 17:11
1. 생성자 [element0, element1, ..., elementN] new Array(element0, element1[, ...[, elementN]]) new Array(arrayLength) - 매개변수 elementN : 배열을 초기화할 때 채워넣는 요소로, 항목이 하나고 그 항목의 자료형이 숫자일 경우 arrayLength 매개변수로 간주한다. arrayLength : Array 생성자에 제공한 매개변수가 하나이고, 매개변수가 0에서 232-1 이하의 정수인 경우, length 속성이 해당 값인 새로운 JavaScript 배열이 생성된다. - 사용 let fruits = ['가나다', 'abc'] -> 리터럴 표기법으로 생성 let fruits = new Array(2) -> 생성자와 ..
-
Array.forEach()STUDY/프론트엔드 2021. 5. 6. 15:33
개발을 하면서 아래와 같이 객체의 invalid를 check할 때 Array.forEach()를 사용했는데, subject.Name에 값이 없어도 함수가 반환되지 않고 다음 동작을 실행하는 문제가 발생했다. isInvalid(grade) { if (this.$StringUtils.isBlank(grade.name)) { return true; } grade.subjectList.forEach(subject -> { if (this.$StringUtils.isBlank(subject.Name)) { return true; } }); if (this.$StringUtils.isBlank(grade.year)) { return true; } return false; } return true/false를 하면 ..
-
Vue.jsSTUDY/프론트엔드 2021. 4. 28. 15:34
vue.js를 사용하면서 발생했던 문제 - 부모 component의 데이터 변화를 자식 component에서 감지하지 못함. 부모 component의 데이터를 자식 component에 props으로 전달. 자식 component에서는 전달받은 데이터를 기반으로 자신의 데이터를 set 부모 component에서 ajax로 새로운 데이터를 가져오지만, 자식 component의 데이터는 ajax로 가져오기 전 데이터를 계속 가지고 있는 문제 발생! 원인 : 부모 component의 데이터가 변경됐지만, 자식 component에서는 mounted()로 처음에만 데이터를 set하고 있기 때문에 변경된 것을 인식하지 못하고 계속 이전 데이터를 유지하고 있었다. 해결 : watch()를 통해 부모 component로..
-
Ajax CacheSTUDY/프론트엔드 2021. 4. 28. 14:01
Internet Explorer 11에서 데이터를 저장한 후 다시 조회할 때 새로 저장한 값을 가져오지 못하는 문제가 발생함. 데이터를 저장 또는 수정 변경된 데이터를 다시 조회해서 화면에 출력 변경된 데이터가 아닌 이전 데이터가 출력 => 검색해서 찾아보니 IE에서는 데이터를 조회할 때 브라우저의 캐시값을 사용하는 것이 원인이었다. * 해결 방법 쿼리스트링에 타임 스탬프를 전달하는 방법 POST 메소드를 사용하는 방법 캐시 컨트롤(Cache-Control) 헤더를 사용하는 방법 1. 쿼리스트링에 타임 스탬프를 전달하는 방법 jQuery.ajax({ cache : false }) cache (default: true, false for dataType 'script' and 'jsonp') Type: B..
-
CookieSTUDY/프론트엔드 2021. 2. 8. 15:40
Cookie란? - key와 value 값이 들어 있는 작은 데이터 조각으로 name, value, expires, path, domain, secure 정보를 가진다. - 서버와 클라이언트에서 모두 저장하고 사용할 수 있다. - 일정 기간 동안 데이터를 브라우저에 저장할 수 있다. * javascript document.cookie = "Name=Value; Expires=날짜; Domain=도메인; Path=경로; Secure"; name과 value : 데이터를 저장하고 읽는 데 사용하는 속성으로 쿠키를 사용할 때는 name과 value를 반드시 지정해야 한다. expires : 쿠키의 만료 날짜를 지정하는 것으로 GMT 또는 UTC 형식의 날짜를 입력해야 한다. 만료 날짜를 지정하지 않을 경우 브..
-
History.replaceState()STUDY/프론트엔드 2021. 2. 4. 18:28
History.replaceState() - 현재 history를 수정해 메소드의 매개변수에 전달된 stateObj, title, url로 대체한다. 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history의 URL을 업데이트하려는 경우 유용하다. history.replaceState(stateObj, title[, url]) - Parameters stateObj : state 객체는 replaceState에 전달된 history 항목과 연관된 JavaScript 객체입니다. state object는 null일 수 있다. const data = { name = 'history', value = 'replaceState' } title : 나중에는 사용할 수도 있지만, 대부분의 ..
-
DragEventSTUDY/프론트엔드 2021. 2. 4. 11:06
drag : 요소 또는 텍스트 선택이 드래그 될 때 시작된다. dragend : 드래그 작업이 종료 될 때 (마우스 버튼을 놓거나 Esc 키를 눌러) 시작된다. dragenter : 드래그 한 요소 또는 텍스트 선택 항목이 유효한 드롭 대상에 들어가면 시작된다. dragexit : 요소가 더 이상 드래그 작업의 즉시 선택 대상이 아닌 경우 시작된다. dragleave : 드래그 한 요소 또는 텍스트 선택이 유효한 드롭 대상을 벗어날 때 시작된다. dragover : 요소 또는 텍스트 선택이 드래그되고 마우스 포인터가 유효한 놓기 대상 위에있을 때 연속적으로 발생한다. dragstart : 사용자가 요소 또는 텍스트 선택 드래그를 시작하면 시작된다. drop : 요소 또는 텍스트 선택이 유효한 놓기 대상에..