본문 바로가기

Javascript/Vanilla Javascript8

브라우저에게 이벤트란? 브라우저가 이벤트를 감지하는 방법은 2가지로 나눌 수 있습니다. 이벤트 버블링(Event Bubbling) 어떤 특정 요소에서 이벤트가 발생했을 경우 상위 요소로 이벤트를 전파하는 방식(단, 상위 요소가 같은 이벤트 핸들러를 가지고 있다는 가정) 이벤트 캡처링 위의 이벤트 버블링과 반대되는 방식으로 어떤 특정 요소에서 이벤트가 발생했을 경우 최상위 요소(body)부터 해당 요소로 내려가는 방식 위의 2가지 방식으로 이벤트가 발생하기 때문에 개발자는 원리를 숙지하고 있어야 예상치 못한 동작이 발생했을 경우 추론하여 해결 할 수 있습니다. 그럼 기본 동작을 개발자가 조작 하기 위해서는 어떻게 해야 할까요? 이벤트 조작 방법 3가지 event.preventDefault() 현재 이벤트의 기본 동작을 중단(예:.. 2019. 3. 13.
정규식. 규식이형! 사용하기 정규식. 애타게 불러보는 그 이름 개발자에게 정규식은 아픈 손가락이다. 사용할 때 마다 찾아봐야 하는 번거로움이 있다.(머리속에 도저히 저장되지 아니한다.) 그래서 내가. 자주. 사용하는. 정규식을 정리하려고 한다. 단순 문자열 매칭 (exec 함수) const patt = /abc/; const str = 'haha abc'; patt.exec(str); // 결과 값은 ["abc"] 문자열 존재 여부 (test 함수) const patt = /abc/; const str = 'haha abc'; patt.test(str); // 결과 값은 true 거의 위 2개 함수에 패턴만 만들어서 사용 한다. 2018. 12. 3.
String replace 사용법 모든 문자를 바꾸고 싶다면? 자바스크립트로 개발을 하다보면 자주 사용하는 함수 모음들이 있다. String.replace도 그런 함수 중 하나이다. const str = 'Hello world'; const replacedStr = str.replace('l', ''); 위의 코드의 결과 값은 l 하나만 바뀌게 된다. 모든 l을 바꾸려면 어떻게 해야 할까? 답은 규식이형이다. 규식이형! const str = 'Hello world'; const replacedStr = str.replace(/l/gi, ''); 위에서 따옴표를 대신 슬래쉬로 감싸고 끝에 특정 문자열을 추가했다. g: 정규식에서 발생하는 모든 패턴에 대한 탐색 i: 대/소문자 구분 안함 m: 여러 줄 검색(멀티라인) 2018. 12. 3.
비트연산자? 써야하나? 비트연산자 금지! 레거시 C, C++ 프로젝트를 보면 비트 플래그를 사용해서 연산하는 경우를 많이 볼 수 있다. 이런 레거시 프로젝트를 웹 어플리케이션으로 포팅하는 과정에서 그대로 비트 연산을 자바스크립트 측에서 구현하는 경우가 있는데, 자바스크립트는 기본적으로 비트 연산 속도가 느리다. 자바스크립트에서는 비트 연산 시 부동 소수점 숫자형을 정수형으로 변환 후 비트연산을 하고 다시 원래타입으로 되돌린다. 또한 비트연산은 하드웨어에 친근하고 속도가 빠른게 장점인데 자바스크립트에서의 비트연산은 하드웨어와 아무 상관이 없다. 그러므로 레거시 프로젝트를 포팅 시에는 이러한 연산은 서버 측에서 해야한다. 제발 2018. 8. 1.
switch문 Fall Through switch Fall Through 금지! switch Fall Through란? switch 문에서 case 내에서 의도적으로 break문을 생략하여 다음 case로 이동 시키는 방법 위의 방식은 의도적으로 사용할 때도 있다. 그럴 경우에는 무조건 주석을 달아줘야 한다. 하지만 실수로 break문을 생략한 경우를 직접 겪어보니 에러가 어디에서 발생하는지 정말 찾기 힘들었다. 그러므로, 사용하지 말자 제발 2018. 8. 1.
#반복문 #중요 #매우중요 #매우매우중요 프로그래밍은 반복문과 조건문, 2가지만 있으면 할 수 있다. 그만큼 중요한게 반복문 이다. 먼저 결론부터 얘기하겠다. for-in 사용하지 마 for-in을 제외한 반복문에 관한 문법은 모두 허용이다. 물론 통일성 있게 작성하면 더 좋고. 그럼 왜 사용하지 말라는 건가? for-in 반복문은 목적 자체가 객체의 속성 탐색이다. 그러므로 내부적으로 탐색 알고리즘이 일반 반복문과 다르다. 그리고 객체의 속성 탐색도 미리 배열 또는 객체로 색인을 구성해놓고 탐색하는 방식을 이용하라. 아! 그리고 한 가지 더! 기존에 컴파일러가 존재하는 환경에서 프로그래밍을 했다면 반복문의 탈출 조건을 사용할 때 메소드 또는 속성 length를 많이 사용하는데 이것도 캐싱하라. // C++에서는 굳이 필요없는 지역변수지만 자바.. 2018. 7. 28.