코드 땜장이

글

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 () Tr...