Web (22) 썸네일형 리스트형 [JavaScript] Object foreach 문 사용법 Object.entries() Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다). Object.entries() 에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없습니다. 배열 순서가 쓸 곳이 있다면, 다음과 같이 정렬을 먼저 하시는 것이 좋습니다 Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));. const object1 = { a: 'somestring', b: 42 }; for (const [key, value] of Objec.. [Html] EnterKey 입력시 Form Submit (새로고침) 막기 form 안에 input 태그가 한개만 존재할때 button 이 따로 없어도 자동으로 submit 되며 페이지가 새로고침된다. 이를 방지하기위해서 form 태그의 onsubmit 속성값을 이용하면된다. [JavaScript] 모바일 / PC 여부 확인 모바일 기기를 감지하는 방법 반응형 웹사이트를 만들다보면 모바일 / PC 구분을 확인하여 다르게 처리해줘야할때가있다 이때 아래 와같은 함수를 사용하면 구분이 가능하다. function isMobile() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); } //Mobile : retrun true; //PC : return false; [JavaScript] Ctrl 새탭 , Shift 새창 띄우기 a 태그에 href 가아닌 onclick 이나 button 에서 누른 Key에 따라 새창, 새탭, 링크이동하는 함수이다. Html 페이지이동 JavaScript function MovePage(event) { var url = "https://tjddnjs625.tistory.com" if (event.shiftKey) { var win = window.open(url); win.focus(); } else if (event.ctrlKey) { var win = window.open(url,'_blank'); win.focus(); } else { location.href = url; } } [Vue] async/await 사용시 regeneratorRuntime is not defined 에러 Vue.js 에서 async 와 await 사용도중 아래와 같은 regeneratorRuntime is not defined 에러가 발생했는데 해결방법은 아래와 같다. 해결방법 : babel-polyfill 관련 모듈을 설치해준다음 import를 해주면 해결된다! npm install --save-dev babel-polyfill npm install --save-dev babel-plugin-transform-regenerator npm i babel-plugin-transform-runtime import 'regenerator-runtime/runtime' 참조: [vuejs]regeneratorruntime is not defined vue async 에러 해결 vuejs 에서 store 관련 a.. [JavaScript] Event KeyCode 목록 및 코드예제 Javascript 코드 예제 //방법1 /*HTML input text*/ $("#test").keyup(function(event){ if(event.keyCode == 13){ alert('엔터키 입력!'); } }); //방법2 /*HTML input text*/ /*script function*/ function keycheck(event){ if(event.keyCode == 13){ alert('엔터키 입력!'); } } KeyCode ASCII 코드표 A~Z / a~z / 0~9 Numeric Keypad 기타키 Key Code Key Code Key Code A 65 Numpad 0 48 Backspace 8 B 66 Numpad 1 49 Tab 9 C 67 Numpad 2 50 Ente.. [Vue] Watch 와 Computed 속성 Computed 속성 computed 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다 {{ message.split('').reverse().join('') }} 위 코드는 message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드이다. 이와 같은 계산식이 템플릿에 많아지면 템플릿의 가독성이 현저히 떨어진다. 따라서 아래와 같이 computed 속성을 활용한다. {{ reversedMessage }} 해당 기능을 Methods 속성을 사용 할 수도 있지만 computed는 data 속성에 변화가 있을때 자동으로 다시 연산을 한다. computed에서 사용하고 있는 data속성인 message라는 프로퍼티가 변화가 있을때만 다시 연산을하고 한번 연산한 값을 캐싱 해놓았다가.. [Vue] Checkbox 체크 유무를 특정 값으로 바인딩 Vue.js에서 체크박스에 바인딩 된 모델의 값은 기본적으로 true / false 이지만 특정 상황에선 다른 문자로 치환이 필요한경우가있다 이럴때 체크 유무를 따져서 값을 변경해주는 방법 이외에 input의 true-value와 false-value props를 사용한다. 이때 주의할점은 form submit시 체크 되지않은 값은 전송되지 않는다. 참고 https://kr.vuejs.org/v2/guide/forms.html#%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4-1 폼 입력 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org [JavaScript] for each문에서 return false 처리 for each 문에서 결과값을 리턴 받을 때 아래와 같은 코드로 실행하게되면 원하는 값을 얻지 못합니다. Check: function() { $("input[name='chkgroup']:checked").each(function() { if (!$(this).is(":checked")) { alert("잘못 체크하셨습니다."); return false; } }); return true; } ... const result = check(); //항상 retun true 반환 정상적인 값을 반환 받을 수 없는 이유는 function 내에 들어있는 each 문은 또다른 function 이기때문에 each 문에서 return false 는 break 과 같은 역할을 하여 each 함수를 빠져나갈 뿐이기 때문.. [Vue] 4-2. Component 자식에서 부모로 데이터전송 이전글: [Web/Vue] - [Vue] 4-1. Component 부모에서 자식으로 데이터전송 [Vue] 4-1. Component 부모에서 자식으로 데이터전송 https://kr.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 컴포넌트 작성 컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기.. tjddnjs625.tistory.com Emit : 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용됩니다. 먼저, 상위 클래스에서 컴포넌트를 삽입할 때 v-on:xxx(약어 @xxx)를 사용해 커스텀 이벤트를 만듭니다. 여기서 cChangeName은 자식컴포넌트에서 this... 이전 1 2 3 다음
