기본 콘텐츠로 건너뛰기

9월, 2022의 게시물 표시

console.log 보다 더 좋은 console

 개발을 하다가 디버깅을 하기 위하여 console.log를 사용 합니다. 뭐 물론 console.log만을 사용하여 개발을 할 수도 있고, 틀린방향이 아닙니다. 하지만, 조금 더 편하게 개발을 해보자구요.  1. console.error / console.warn  이 정도는 다들 사용 하고 있는 함수들일 것 입니다. 뭐 물론 console.warn은 사용 빈도가 그렇게 많지는 않을 것 입니다. 그래도 에러가 나서 로그를 작성해야 하는 경우 console.error로 작성 해주는 것이 다른 개발자들 혹은 오래된 코드에서 문제가 발생한 것을 확실히 알 수 있게 해주어 오류를 파악하기 쉽기 때문에 매우 추천하는 바입니다.  console.log는 검은색 / console.warn은 노란색 / console.error는 빨간색으로 표기 된다.  2. console.time / console.timeEnd  만약에 이 함수를 모른다면 특정 코드가 얼마나 걸렸는지 확인을 하기 위하여 이렇게 사용 하였을 것 입니다.   뭐 물론 이렇게 하더라도 얼마나 오래 걸리는 함수를 확인하는 대에는 큰 문제가 없을 것 입니다.  하지만 위의 코드에는 두가지 문제가 있지요. 1. 1ms 미만으로 걸리는 작업에 대해서 확인이 불가능 하다. 2. startTime, endTime을 다른 개발자나 혹은 자기자신이 테스트를 하기위한 코드였는지 까먹는 것 입니다.  여기서 대안이 console.time / console.timeEnd 입니다.    3. console.table  데이터를 다루다 보면, 배열을 많이 다루게 됩니다.  console.table은 말처럼 배열과 같은 데이터를 table형태로 노출 시켜줍니다.  각각의 필드를 클릭하여 정렬도 가능하니, 데이터를 확인하는 것에도 꽤 편합니다.  4. console.trace  자바스크립트에서 함수는 일급객체입니다. 즉 다른 함수에 인자로 함수를 넣어서 호출을 하고 그 함수를 다른 함수에서 실행 하게 되었을 때, 어떠한 경로로 호출이

Shadow DOM - 사용해보기

 지난 포스팅에 Shadow DOM이 어떠한 것인지 소개까지는 하였지만, 정작 사용법에 대해서는 언급을 하나도 하지 않았다. 이번 포스팅은 사용법 위주로 소개를 할 것이다.   기본 사용법 기본 사용법은 매우 간단한 편이다. <html lang ="en" > <head></head> <body> <div id ="app" > loading... </div> <script> setTimeout (() => { const app = document . getElementById ( 'app' ) const appTemplate = document . createElement ( 'div' ) appTemplate. innerHTML = ` <h1>Hello World!</h1> ` const shadowRoot = app. attachShadow ({ mode : 'open' }) shadowRoot. append (appTemplate) } , 3000 ) </script> </body> </html>  엘리먼트에 attatchShadow함수는 실행하게 ShadowRoot의 인스턴스를 리턴한다.  ShadowRoot는 DocumentFragment를 상속 받는데, DocumentFragment는 우리가 사용하는 window.document의 클래스인 Document와 유사한 클래스라고 보면 된다.  간단하게 append 함수를 이용하여 컨텐츠를 채워줄 수 있다. attatchShadow함수의 필수 속성은 mode로 'open', 'closed'양자 택일이다. 차이점이라고 하면 외부 스크립트에서 element.shadowRoot가 closed면 null, open이면 접근 가능하다 정

유지보수 어렵게 프로그래밍 하기

  자 우리는 왜 유지보수를 어렵게 만들어야 하는가? 우리는 우리의 코드의 보안을 유지 할 필요가 있다. 그 중에서 가장 큰 이유로는 동료 및 고용주에게 인정을 받기 위함이 클 것이다. 내가 짠 코드를 나만 수정을 할 수 있게 되면 고용주는 나를 해고 하기 어려워지며, 동료들에게는 실력의 격차를 겸허하게 받아들이게 할 수 있을 것이다. 또한 소스가 유출이 된다고 하더라도, 꽤나 시간이 걸려서 해석을 할 수 밖에 없을 것이다.  이 포스팅을 따르게 된다면 단점으로는 동료들에게 수많은 수정 요청을 받아서 회사에서 나만 일하게 되는 상황이 벌어질 테니 주의 바란다.   변수명으로 장난치기  변수명으로 장난치는 것은 꽤나 전통적인 놀이이다. 실제로 당했던 변수명으로는 그 당시에 유행 하였던 아이돌 이름일 것이다.  아이돌 이름 function GirlsGeneration() { let taeyeon let sunny ... }  자 위와 같은 함수를 받아들였다고 치자. 과연 이것을 유지보수 하는 사람은 어떤 정보를 알 수 있을까? 당연하게도 함수 작성자의 취향이다.  하하하하 아주 좋은 변수명이다.  변수명에 그렇게 많은 정보를 넣을 수 있다니 대단 하다.  한 글자 변수 let g = this  이것 또한 참 재미있는 변수명 짓기 이다. 자 여기서 g는 뭐의 약자 일까? 가장 자주 쓸만한 단어는 global일 것이다. 만약에 저 코드에서 this가 window를 가리키고 있다면 global이라는 단어는 꽤 그럴싸 할 수 있다. 한 글자로 변수를 짓는 것은 소스를 컴파일없이 불러와야  하는 브라우저 입장에서는 조금이라도 빠르게 페이지를 로드 할 수 있게 해준다.  뭐 물론 아이돌 이름을 쓰지 말라고 한 동료 개발자에 억압에 못이겨서 girlsGeneration의 약자로 g를 쓴 것일 수 있다.  동의어의 반복  동료 개발자들은 우리의 코드를 보며 한숨을 쉬고 있고, 변수명을 줄이지 말라고 요청을 하였다. 그렇다면 우리는 유지보수를 더욱 어렵게 만들어줘야

Shadow DOM (웹 컴포넌트 캡슐화)

  우리는 지난 시간 customElement를 생성하는 방법을 확인하였다. 하지만 지금까지 포스팅한 내용만 가지고는 웹 컴포넌트을 만들기에는 역부족 일 것이다.  가장 첫번째 문제로 직면할 내용이 위처럼 외부 css 정의 역시 내부 엘리먼트에 영향을 끼친다는 것이다. 이는 css를 작성함에 있어서 커스텀 엘리먼트의 하위 속성인지 전부 확인하며 피해서 css정의를 해야 한다는 게 큰 문제이다.  => 이는 당연하게도  document . getElementsByTagName ( 'div' )  와 같은 dom을 셀렉트하는 과정에서도 영향을 받는다.  이 내용은 컴포넌트를 만드는데에 있어서 큰 문제이다. 웹 컴포넌트를 만드는 입장에서도 외부에서 절대로 사용 안 할 만한 class, name, id등을 정의 하여야 한다.   DOM tree  브라우저는 우리가 작성한 html tag들을 가지고 DOM tree를 생성한다. 예시는 아래와 같다. <html> <head></head> <body> <div> div 1 </div> <div> div 2 <div> div 2 - 1 </div><div> div 2 - 2 </div><div> div 2 - 3 </div></div> </body> </html>  위와 같이 우리가 작성한 html은 위와 같이 브라우저가 해석하여 DOM tree를 만들고 해당 tree를 근거로 자식 노드들, 부모 노드, 형제들을 판단한다. TreeWalker . parentNode () TreeWalker . firstChild () TreeWalker . lastChild () TreeWalker . previousSibling () TreeWalker . nextSibling () TreeWalker . previousNode () TreeWalke