코드 땜장이

글

htmlString 을 dom으로 변경

html string을 dom으로 간혹 만들어야 하는 경우가 있을 것이다. 예를 들면 1. ckEditor와 같이 게시판을 만들때, 에디터를 적용 해야 하는 경우, html을 검색을 하게 하는게 아니라, 해당 내용에 적혀 있는 텍스트만을 기준으로 해야 하기 때문에 html에서 태그를 제외한 내용을 따로 저장을 해둬야 하는 경우도 있다. 2. html string을 분석하여 특정 처리를 해야하는 경우도 있을 것이다. 예를 들면 검색후 매칭 되는 글자의 하이라이트 처리나, 해당 html 문자열이 단 하나의 부모만 있는지 등... 뭐 위의 내용 말고도 필요한 경우는 있을 것이다. 뭐 옛날에는 xml을 파싱 해야 했을 때도 있었지만... innerHtml function htmlStringToNodeList (htmlString) { const tempNode = document . createElement ( 'div' ) tempNode. innerHTML = htmlString return tempNode. childNodes } 위 처럼 현재 document에 문서에 연결되지 않은 dom을 하나 생성 후 innerHTML로 htmlString을 세팅을 하게 되면, 모든 자손을 제거하고 htmlString을 html로 파싱하고, 생성된 노드로 대체 되는 특성을 사용 한 것이다. 사용법이 매우 심플하고, 널리 쓰고 있는 방법이기에 꽤 추천 하는 코드이다. * 텍스트만 뽑고 싶다면 아래 처럼 return만 변경 해주면 된다. return tempNode. innerText 출처: https://developer.mozilla.org/ DOMParser function htmlStringToNodeList (htmlString) { return ( new DOMParser ()) . parseFromString (htmlString , 'text/html' ) ...

CustomElement (2)

전 시간에 CustomElement를 만드는 방법에 대해서 확인해보았다. 이번 시간부터는 조금더 상세하게 확인해보도록 하자. 정의요소 class MyElement extends HTMLElement { constructor () { super () // element 생성 } connectedCallback () { // document 에 element 가 추가 되면 브라우저에서 호출이 된다 . } disconnectedCallback () { // document 에 element 가 제거 되면 브라우저에서 호출이 된다 . } static get observedAttributes () { return [ /* 모니터링 될 속성의 이름 . */ ] } attributeChangedCallback (name , oldValue , newValue) { // observedAttributes 에서 나열되어있는 속성중 하나의 속성이라도 값이 변경되면 호출 된다 . } adoptedCallback () { // 해당 엘리먼트라 다른 document 로 이동될 시 호출 된다 . } } customElement를 정의하게 되면 위의 메서드들을 정의할 수 있다. 각각의 메서드들 중 constructer를 제외 하고는 처음 보는 것들일 것이다. 각각의 속성에 대해서 설명을 해보겠다. constucter 당연 하게도, new MyElement()를 호출하게 되면 constructer가 호출되는 것은 당연하게 여길 것이다. 그 외에 엘리먼트로써 생성되는 경우가 두가지가 있다. html 본문에 태그로 작성 되어있는 경우 customElements.define이 되어있다면, 해당 태그가 해석 될 때 constructer가 호출 되고, customElements.define가 태그 해석이 완료 후에 호출된다면, define이 되었을 때 호출이 ...

CustomElement

프런트엔드 개발자라면 프레임워크등을 사용하여 컴포넌트를 만드는 것은 익숙 할 것이다. 뭐 물론 백엔드 개발자라고 하더라도, custom tag를 정의 해 본 사람도 있을 것이다. 오늘은 프레임 워크없이 우리가 컴포넌트라고 부를수 있을 만한 custom element를 정의를 해볼 것이다. Window.customElements window의 기본객체에는 위와 같은 객체가 있다. 이름만 보더라도 아 새로운 element를 등록하기 위해서 만들어진 것이구나 생각 할 수 있을 것이다. 그러면 지원하는 함수들을 한번 확인해보자. define, get, upgrade, whenDefined define: 우리가 이번 포스트에서 주로 살펴볼 함수이다. 커스텀 엘리먼트를 정의 하는 함수라고 볼수 있다. * document.registerElement와 유사한 행위를 하지만 document.registerElement는 deprecated이니 사용 하지 말자. get: 특정이름으로 정의 된 커스텀 엘리먼트의 클래스를 반환한다. upgrade: 특정 dom의 트리를 정의한 커스텀 엘리먼트로 업그레이드 한게 된다. whenDefined: 특정이름의 컴포넌트가 정의 될때 알 수 있도록 promise를 제공한다. => 이는 미리 html을 로드후 정의 되지 않은 엘리먼트를 특정 시점에 upgrade를 하거나 대치 할 수 있도록 정의 필요 할 것으로 보인다. Window.customElements.define window의 기본객체에는 위와 같은 객체가 있다. 이름만 보더라도 아 새로운 element를 등록하기 위해서 만들어진 것이구나 생각 할 수 있을 것이다. 그러면 지원하는 함수들을 한번 확인해보자. 커스텀 엘리먼트를 정의 하는 것은 어렵지 않다. <html> <head> <script> class TestElement ...

메서드 vs 함수

함수는 무엇일까? 하나 이상의 문장, 식이 특정 하나의 기능을 위해 작성 된 것이라고 표현 할 수 있겠다. 뭐 물론 문장이라고 하였지만, 하나의 식(expression)으로도 표현 가능 할 것이다. 그러면 메서드란 무엇일까? 객체지향 언어를 배우다보면 메서드라는 표현을 처음 듣게 된다. 간단하게 클래스혹은 구조체 내에 정의된 함수라고 표현 하면 될 것 같다. 당연하게도 자바스크립트도 (프로토타입기반) 객체지향 언어이기 때문에 메서드라는 개념이 있다. (참고 ES6 표준으로 제시된 class는 새로운 객체지향 모델을 지원하는 것이 아니라 기존의 프로토타입 기반의 객체지향을 위한 Syntacitc Sugar일 뿐 오해하지 말자.) 자바스크립트에서의 메서드 const person = { name : 'sejiowrk' , hi () { console. log ( `안녕하세요. ${ this . name } 입니다.` ) } } 자바스크립트에서의 메서드정의는 Java, C++등과 비교하여 간편하다 class를 따로 정의할 필요도 없으며, new 키워드를 사용 하여 인스턴스화 할 필요없이 리터럴 객체를 만들어서 정의할 수 있다. 뭐 물론 필요하다면, class 혹은 function을 이용하여 좀 더 다른 언어들과 유사하게 만들어주는 것도 가능 하므로 선택은 자유이다. hi 함수는 메서드이기 때문에 자신이 속해있는 객체의 name을 사용할 수 있게 된다. 당연하게도 hi는 메서드이전에 함수이다. 잃어버린 this (person. hi || function () { })() 엄격 모드 사용시에는 name을 찾을수가 없고, 엄격 모드를 사용 하지 않는 경우에는 window가 this를 대체 하였다. 두 경우 모두 hi가 속해 있는 객체 person의 name을 가져올 수 없게 되었다. 해당 내용이 의아 할 수 있는데, 간단하...

팝업이 차단 되었습니다. (회피하기)

우리는 인터넷을 하다보면, 아래의 그림처럼 팝업이 차단되는 경우가 많이 있다. 브라우저가 팝업을 여는 동안 해당 페이지가 사용자를 괴롭히고 있다고 판단 하는 경우에 노출이 된다. 몇몇 분들은 어렸을 적 친구의 피씨에 설치하였던 무한 팝업을 해본 기억이 있을 것이다. 바로 그것을 막는 것이라 보면 된다. 자 그러면 괴롭히고 있다고 판단한 경우라고 하였는데, 그러면 그것이 무엇일까? 사용자 몰래 띄운 팝업 사용자 몰래 팝업을 띄우는 거는 꽤나 많이 볼 수 있다. <!DOCTYPE html > <html> <head> <meta charset ="UTF-8" > <script> window . open ( 'https://www.google.com' , '_blank' ) </script> </head> <body></body> </html> 위의 코드는 아무런 맥락 없이 해당 페이지에 들어가자 팝업을 열게 하는 코드이다. 저런 상황을 팝업을 차단 하지 않게 된다면, 해당 페이지가 새로운 팝업을 여는 페이지를 열고 또 그페이지는 또 새로운 페이지를 여는 페이지를 열고 계속 반복하게 된다면 사용자를 괴롭히는 것이 될 수 있을 것이다. 공공 사이트에서 예전에 공지사항을 노출시키기 위하여 이러한 행위를 많이 했었고 해당 팝업들은 열심히 차단당했다. 즉 우리는 해당 페이지를 열기 위해서 유저의 행위를 받아야 한다. <!DOCTYPE html > <html> <head> <meta charset ="UTF-8" /> <script> function openNewPage () { window . open ( 'https://www.google.c...

javscript getter, setter

일반 적으로 자바 C# 등등의 객체지향언어를 이용하여 개발하신 분들이라면 getter, setter는 아주 친숙한 내용일 것이다. 하지만, 자바스크립트에서는 전통적인 방법으로는 private 변수를 지원 하지 않기 때문에 _name 이런식으로 이름만 지어서 내부에서만 사용변수라는 표시만을 하여 내부 데이터이니 읽거나 쓰지 마세요 정도로 사용 하고 있다. 그렇다면 자바스크립트에는 getter, setter가 없을까? 접근자 프로퍼티(accessor property) get, set getter, setter를 이용하는 이유 중에는 데이터를 신뢰하고, 복잡한 로직을 밖으로 노출 하고 싶지 않아서 일 것이다. 간단한 예를 들어보자. const person = {} person . age = - 3 과연 사람 중에 -3 세인경우가 있을까? 뭐 개념적으로 2000년생의 경우 1997에 몇살이었냐고 물어본다면 가능하겟다만.... 이럴 때 사용 가능 한 것이 get, set이다. 간단하게 코드를 변형 해보자. const person = { get age () { return this . _age } , set age (age) { if (age > 0 ) { this . _age = age } } } 위 처럼 우리는 나이에 대해 정합성 체크를 하여 age속성을 사용 할 수 있게 되었다. private 변수처럼 사용 해보기 위 처럼 특정 속성에 대해서 정합성이 필요 한경우 특정 데이터를 위한 모델일 가능성이 높다. Person이 필요 할 때마다 literal object로 매번 정의 하는 것은 꽤나 불편한 내용일 것이다. 이때는 class가 유용 하겠지만 사용하기 애매하다면 function또한 꽤 좋은 대체재라고 말하고 싶다. function Person () { let _a...

new Date() - new Date() (javaScript 형변환)

우리는두 시간의 차이를 구하기 위하여 new Date() - new Date() 와 같이 분명 Date객체를 가지고 두 값의 차이를 구하는 -연산을 수행 하고 있고, 그리고 그것을 또 해주는 것을 볼 수 있다. 우리는 그런 특성을 보면서 형변환 중 묵시적 형변환이 되었구나, 라고 생각하곤 한다. 묵시적이라는 말의 뜻은 이와 같다. 말이나 행동으로 직접 드러내지 않고 남이 모르는 사이에 뜻을 나타내 보임. <출처: Naver Korean-English Dictionary> 직접 드러내지 않고 남이 모르는 사이에 바뀌었다는 것인데, 그렇다면 우리 개발자들에게 드러내지 않고 있는 규칙은 무엇일까? Symbol.toPrimitive 첫번째 규칙이다. obj[Symbol.toPrimitive](hint) 형변환이 필요한 경우 자바스크립트는 해당 객체의 Symbol.toPrimitive의 키를 갖는 함수를 연산을 할 때 필요한 자료형을 요청 하는 것으로 형변환을 수행한다. 자 그러면 형변환이 필요한 경우를 몇개 구성해보자. 첫째로 예제를 들었던 obj1 - obj2 와 같을 것이다. obj1, obj2 두 값과의 차이를 구한다는 것은 숫자일 수 밖에 없을 것이다. 두번째로 alert(obj1) 같이 obj1을 문자열로 표현을 해야 하는 경우가 있을 것이다. 세번째로 "나무" + obj1 , 1 + obj2 와 같이 덧셈 연산이 있을 것이다. 이 때에는 첫번째 연산의 경우 문자열과의 덧셈이기 때문에 obj1이 식혜라는 값이면 "나무식혜"와 같이 문자열로 변환이 필요 하며, 두번째의 경우에는 숫자와의 연산이기 때문에 obj2가 2라면 3과 같이 값이 나와야 할 것 이다. 자 그러면 위의 연산들이 과연 obj[Symbol.toPrimitive] 함수를 호출 할 때 어떤 값을 hint로 제공하는지 확인 해보...

세미콜론 찍을까 말까(ASI)

C-like 언어들은 세미콜론을 찍어줘야 하지만, 자바스크립트는 선택사항이다. 선택사항이다. 선택사항이긴 한데... 무조건 써야 한다는 파와 쓰지않아도 될때는 쓰지 말자라는 파가 있다. 뭐 나또한 써야 할 때만 쓰자는 파이다. 꼭 써야 한다는 파는 자동으로 입력 해주는 것이 개발자 에러코드를 수정해주는 것이지, 쓰지 말라는 것이기 아니기 때문에 써야 한다는 것이다. 나의 경우에는 뭐 에러에 대한 수정이라 생각 하지 않고 언어의 특성이라 생각 한다. ASI를 끌 수 있고, 다른 언어처럼 에러를 발생 시킬 수 있다면 뭐 그또한 나쁘지 않다 생각한다. 쓰지 않아도 되는데 작성했을 때, 아 이건 쓴 이유가 있구나 이 생각도 할 수 있다. 자동으로 작성 되는 규칙 자동으로 작성 되는 규칙 몇가지 예를 들어보겠다. 1 . 두 statement(문장) 라인종결자(엔터)로 구분 된다. 2. 두 statement(문장) 닫는 중괄호('}')로 구분 된다. 3. break, continue, return, throw 등은 라인종결자(엔터)로 구분 된다. 4. 웬만해서는 엔터로 구분되고 예외사항이 있다고 생각하는 것이 좋을 정도로 많은 부분이 자동적으로 입력된다. 이는 대부분의 기본서에서도 언급하는 내용이기도 하다. 괜히 메신저에서 어미에 ;를 붙이는 것이 습관화 된 사람이 많은게 아니다. 자동으로 입력되는 경우 예시 입력된 코드 자동으로 입력된 세미콜록 원래 작성하려고 했던 코드 return 2a + 1; return; 2a + 1; return 2*a + 1; function getObject() { return { // some lines }; } function getObject() { return; { // some lines }; } function getObject() { return { // some lines }; } i ++; i...

웹에 제스처 적용해보기 ( hammerjs )

스마트폰이 나오고 나서 모바일에서 사용하는 유저의 액션은 엄청 늘어나기 시작했다. 간단하게 마우스 클릭과 유사한 탭 부터 마우스 휠에 대응 되는 핀치, 스프레드, 터치가능한 디바이스에서만 가능한 투탭(두손가락으로 터치) 이상의 행위들... 우리는 사용자의 경험에 맞게 개발을 하여야 한다. 무슨말이냐 하면, 모바일기기에 휠이 없다고 해서 확대해 가면서 보아야 하는 컨텐츠를 마우스를 무조건 연결하여 보아야 하는 것은 말이 안된다는 뜻이다. Hammerjs 여기서 우리의 개발을 편하게 만들어 줄 수 있는 라이브러리가 있다. Hammerjs가 지원하는 제스처는 아래와 같습니다. Tap : 클릭과 같습니다. Press : 일정시간 이상 같은곳을 누르고 있습니다. Pan : 포인터가 특정위치를 클릭후 한 방향으로 이동시 발생 합니다. Swipe : 포인터가 특정위치를 클릭후 한 방향으로 특정시간 정도 특정거리 이상 이동시 발생합니다. Pinch : 두개 이상의 포인터가 특정방향에서 멀어지거나 가까워질때 발생 합니다. Rotate : 두개 이상의 포인터가 원을 그리게 되면 발생합니다. 위에서 보면 pinch와 rotate의 경우에는 두개이상의 포인터가 필요하여 마우스 만으로는 불가능한 액션이지만, 나머지는 하나의 포인터만으로 가능한 제스처이기에 충분히 마우스만으로 구현이 가능한다. 사용해보기 모바일과 PC에서 같이 사용해볼수 있는 Swipe 제스처를 사용해 보도록하자. 위 처럼 간단하게 스와이프 제스처를 추가해볼 수 있다. 이것저것 사용해보면 트렌디한 웹사이트를 만드는데에 꽤나 도움이 될 것 이다.

css 트릭2 (작은 글자)

폰트의 크기는 사용자에게 꽤나 중요한 정보이다. 읽는 순서에도 영향을 끼칠정도이니까 말이다. 이런 이미지를 본적 있나? 솔직히 나는 폰트 크기순으로 읽혔다. 그래서 이 포스팅을 쓰는거기도 하다. 작은 폰트로 글써보기. <div style =" font-size : 14 px" > font-size: 14px </div> <div style =" font-size : 13 px" > font-size: 13px </div> <div style =" font-size : 12 px" > font-size: 12px </div> <div style =" font-size : 11 px" > font-size: 11px </div> <div style =" font-size : 10 px" > font-size: 10px </div> <div style =" font-size : 9 px" > font-size: 9px </div> <div style =" font-size : 8 px" > font-size: 8px </div> <div style =" font-size : 7 px" > font-size: 7px </div> <div style =" font-size : 6 px" > font-size: 6px </div> <div style =" font-size : 5 px" > font-size: 5px </div> <div style =" font-size : 4 px" > font-size: 4px </div> 간단하게 ...