Javascript 6

Label 태그를 클릭했는데 클릭이 두 번

이런 HTML과 체크 이런 Javascript가 있을 때, const outEl = document.querySelector('#output'); document.querySelector('#my-test').addEventListener('click', () => { outEl.innerHTML += 'click!!! '; }); '체크'라는 글씨를 클릭하면 output에 click!!!이 두 번 찍힌다. 이런 일이 발생하는 이유는 label 태그를 클릭하면 label 태그의 for 속성과 연결된 input tag에서 자동으로 클릭 이벤트가 발생하기 때문이다. 그래서 label을 클릭하면 -> event bubbling에 따라서 div#my-test에 클릭이 발생하고(click!!!을 한 번 찍고) -..

Javascript 2023.04.13

[Typescript] class to json

Typescript에서 class를 json 문자열로 바꾸는 방법에 대한 고민. 일단 평범?하게.. 별 문제없이 성공 class MyTest { first = 1; second = "It's my test!"; third: string[] = ["Hello", "World"]; } console.log(JSON.stringify(new MyTest()));​ 이렇게 하니까 무한루프를 탄다. class MyTest { first = 1; second = "It's my test!"; third: string[] = ["Hello", "World"]; toJSON(): string { return JSON.stringify(this); } } const o = new MyTest(); console.log(..

Javascript 2023.03.02

SQL 키워드는 대문자로.

SQL을 작성할 때, 키워드는 대문자로 사용하는 경우가 많다. 여기에 보면 여러가지 이유들이 있는데, SQL이 예전부터 있던 거라서 알아보기 쉬우려고 그랬고, 요즘은 툴이 워낙 좋으니 필요없다는 사람도 있고, 그래도 여전히 구분하기 편하니 필요하다는 사람도 있고 그렇다. 뭐 어쨌든, 일하다가 보면 대충 소문자로 쿼리를 짰지만 대문자로 바꿔야 하는 상황이 생긴다. 그런데 딱히 이런걸 쉽게 해주는 툴이 없는 것 같았다. 실제로 있는데 내가 못 찾았을 확률이 높지만... 내가 그냥 npm에 패키지 올려보겠다고 하나 만들었다. node.js가 설치되어 있는 상태에서 터미널에 아래와 같이 명령어를 입력해서 설치하고, npm install -g uppercase-sql 터미널에서 이렇게 쓰면 된다. uppercas..

Javascript 2019.05.04

편리한 레드마인

사내 이슈 관리를 레드마인으로 하고 있다. 여타 다른 툴이 모두 그렇듯이 레드마인 역시 좋은 점도 있고 나쁜 점도 있지만, 내가 쓰기에 영 불편한 부분을 몇가지 개선한 Javascript를 Firefox에 유명한 플러그인인 GreaseMonkey에 스크립트를 넣어서 쓰게 되었다. 그런데 옆에서 본 몇몇 사람들이 Chrome 쓰는데 쓰고 싶다고 했고, 그냥 TemperMonkey를 설치하고 내 스크립트를 설치해주었다. 그러던 어느날 쓰는 사람이 5명쯤 되고, 포맷하거나 했던 사람이 다시 설치해달라고 하고 게다가 쓰는 사람 중에 Javascript를 아는 사람, 브라우저 동작 같은 거 아는 사람도 나 혼자이다 보니 너무 귀찮은거다. 그래서 그냥 Chrome Extension을 만들기로 했다. 그리고 그렇게 ..

Javascript 2019.04.03

" (큰 따옴표, double quote) 앞에 \ 붙여주는 유틸

얼마전에 어떤 일을 하다가 복사 붙여넣기로 " 가 잔뜩 들어간 문자열을 프로그램 코드 문자열 ("") 안에 \를 붙여서 넣어야 하는 일이 있었다." 앞에 \ 를 넣는 방법은 텍스트 에디터에서 찾아 바꾸기로 넣는 방법, 간단한 인터프린터 언어로 바꾸는 방법 등등 여러 가지 방법을 생각해 볼 수 있겠고, 개발자라면 각자 나름의 방법을 찾아서 이용하고 있을 것이다.그런데 혹시, 정말 혹시라도 나처럼 그마저도 귀찮은 사람을 위해서 간단한 웹용 유틸을 하나 만들었다.http://gilchris.github.io/utils/escape_double_quotes.html바쁜데 하필 그 컴퓨터에는 쓸만한 에디터가 없었다거나 그냥 더 빨리 (에디터에서 찾아 바꾸기 보다 진짜 더 빠를지는 잘 모르겠지만.. ) 해결하고 싶..

Javascript 2016.07.17

Angular.js noop function

noop 함수는 아무것도 안하는 함수인데 유용하게 쓰일 때가 있다. 일단 예제를 하나 보자. function foo(callback) { var result = calculateResult(); (callback || angular.noop)(result);} 이 예제에서 callback이 함수라면 result를 전달인자로 넣어서 callback 함수를 실행하고,callback 가 함수가 아니라면(undefined라던가...) angular.noop 함수를 실행하게 된다. 즉, 위의 코드는 아래의 코드와 비슷한 동작을 한다. 정확히 똑같진 않지만, 그게 그거다. function foo(callback) { var result = calculateResult(); if (typeof callback == ..

Javascript 2015.12.05