[javascript] 주요 이벤트 처리기
이벤트 처리기 의미 onClick 마우스로 클릭했을 때 onDbClick 마우스로 더블클릭했을 때 onMouseDown 마우스 버튼을 눌렀을 때 onMouseUp 마우스 버튼에서 손가락을 떼었을 때 onMouseMove 마우스 포인터가 HTML 요소 위에서 움직일 때 onMouseOut 마우스 포인터가 HTML 요소를 벗어났을 때 onMouseOver 마우스 포인터가 HTML 요소 위에 놓여 있을 때 onKeyDown 키보드의 키를 눌렀을 때 onKeyPress 키보드의 키를 누르고 손가락을 떼었을 때 onKeyUp 키보드의 키에서 손가락을 떼었을 때 onChange input 요소의 값이 바뀌었을 때 onBlur input 요소가 포커스를 잃었을 때 onFocus input 요소가 포커스를 맞추었을 때..
개발 공부 일지/Javascript | 2020. 10. 11. 00:25
[HTML.CSS] 폰트 단위: px, em, rem 차이
요즘 포트폴리오 웹 페이지를 만들고 있는데 생각보다 퍼블리싱 작업, 그러니까 화면을 그리는 작업이 쉽지 않다는 걸 느끼고 있다. 무엇보다도 모바일, 태블릿, 랩톱, 데스크톱 등 모든 디바이스에서 화면을 봐도 전혀 불편하지 않게끔 만드는 게 정말 어렵다. 모바일 버전과 데스크톱 버전을 각각 디자인해서 퍼블리싱을 해도, 아이폰에서 보여지는 게 다르고 갤럭시에서 보여지는 게 다르니, 매 작업을 할 때마다 옛날 폰들을 다 꺼내서 내가 갖고 있는 장비 모든 걸 다 동원해 화면을 확인하는 노가다를 하고 있다. 크로스브라우징과 반응형 웹 디자인에 대한 이해가 이렇게나 중요한 건 줄 몰랐지...... 개발자가 되겠다고 결심하고 지금까지 공부를 해 오면서 복잡한 코드를 능수능란하게 다룰 줄 아는 것만 내가 지향해야 할 ..
개발 공부 일지/HTML.CSS | 2020. 10. 2. 17:07
[Vue.js] 문자열 데이터 바인딩 줄바꿈하기 (바인딩된 문자열에 html 태그 적용하기)
위와 같은 화면을 출력하려고 한다. 그런데 위의 텍스트가 에 있는 것이 아닌 ...(생략) { subTitle: "환불/취소 요청 시 먼저, 다음의 내용으로 접수하여 주세요. \n세부사항에 대한 확인이 필요합니다." } 이렇게 prop으로 상단 컴포넌트에서 넘어오는 데이터에 잡혀 있는 텍스트였다. 원래 코드는 {{ propsData.subTitle }} 이렇게 나타나던 것을 아래와 같이 {{ propsData.subTitle.replace("\n", " ") }} replace 함수를 사용해서 JSON 데이터 개행 문자인 '\n'을 html 개행 태그인 ' '로 바꿔주었더니 응? 태그가 그대로 잡히는 문제가 발생. 콧수혐 괄호 {{ }}는 바인딩되는 문자열을 문자열로만 인식하기 때문에 위와 같은 상황에선..
개발 공부 일지/Vue.js | 2020. 9. 20. 16:53
[Vue.js] 숫자 자릿수 잘라서 보여주기(?)
위와 같은 형태를 화면에 구현해야 했다. 이를 위해 데이터로부터 받아 오는 숫자를 하나하나 쪼개서, div에 각각의 숫자를 집어넣는 방법을 생각했다. ₩ {{ priceTotal(priceLength, i) }} export default { props: ["paymentData"], data() { this.paymentData.slicePrice = String(this.paymentData.paymentPrice).split("") return { priceLength: 10, } }, methods: { priceTotal(length, i) { const calcuIndex = this.paymentData.slicePrice.length - length + i return calcuIndex ..
개발 공부 일지/Vue.js | 2020. 9. 15. 17:45
[javascript] 숫자 천 단위마다 콤마 찍는 함수
두 가지 방법이 가능하다. 1. toLocaleString() toLocaleString() 메서드는 배열의 요소를 나타내는 문자열을 반환하는 함수로, locale 고유 문자열에 의해 분리되는데 숫자의 경우는 쉼표(.)로 분리된다. const array1 = [ 123450 ] array1.toLocaleString() 2. 정규표현식 /* 숫자 1000단위마다 , 표시하게 하는 함수 */ function commaAdd(num) { const regexp = /\B(?=(\d{3})+(?!\d))/g return num.toString().replace(regexp, ",") } (commaAdd는 함수 이름으로 각자 임의로 만들어서 넣어주면 된다.)
개발 공부 일지/Javascript | 2020. 9. 15. 06:06