SCSS
데브코스에서 sass 과제를 내주었다.
이를 위해 node-sass를 설치하여 진행하였다.
node-sass란?
LibSass (C/C++로 작성된 Sass의 구현체)에 바인딩된 Node.js 라이브러리이다.
sass 냅두고 왜 node-sass를?
블로그에 있는 sass 셋팅 글을 읽고 그대로 따라했다.
그리고 node 환경이기 때문에, 코드를 수정하고 저장하면 별도의 새로고침 없이도 페이지를 수정 시켜주는 환경을 좋아하기 때문.
(나중에 알고보니, 그냥 sass 사용해도 충분히 가능하던 일이었다..)
과제를 진행하던 중, 난관에 빠졌다.
자동 저장을 위해 parcel을,
scss 파일 저장 시 자동 저장을 위해
node-sass -w -r styles/common.scss styles/common.css
위 커맨드를 입력해야 하는데, 이때는 여러개의 커맨드를 동시에 구동시킬 수 있다는 사실을 생각해내지 못했다.
항상 하나의 터미널에서 프론트 파트만을 실행시키다보니 그랬던 것 같다.
이에, 어떤 상황에서 여러 터미널을 사용할까? 하는 궁금증이 생겼다.
서버와 클라이언트를 동시 실행시키거나, DB관리, 배포 및 자동화 스크립트 실행 및 테스트 및 모니터링 등에서 사용되는 것 같다.
TS
강의 수강 중
const $btn = document.querySelector('btn');
$btn.classList.add('box')위 코드는 에러를 발생시킨다
왜? HTML에서 btn 태그가 없을 수도 있으니까.
해서 as를 사용해서 btn이 존재함을 단언하여 해결하는 상황이었는데,
($btn as HTMLButtonElement).classList.add('box');
// 위 방식도 가능하고 아래 방식으로도 가능하더라?
($btn as Element).classList.add('box');두가지 방식 모두 해결이 가능하니까, 각각의 타입이 어떤 것들인지 궁금해졌다.
두 타입에 대하여 알아보자.
Element를 먼저 알아보자.
lib.dom.d.ts를 보면 Element는 아래와 같이 정의되어 있다.
interface Element extends Node,
ARIAMixin,
Animatable,
ChildNode,
InnerHTML,
NonDocumentTypeChildNode,
ParentNode,
Slottable { ~ }Node, ARIAMixin, InnerHTML 등등을 상속받고 있다.
그렇다면 이번엔 HTMLButtonElement.
interface HTMLButtonElement extends HTMLElement,
PopoverInvokerElement { ~ }얘는 HTMLElement를 상속받고 있다.
그렇다면 한번 더, HTMLElement를 찾아봐야지.
interface HTMLElement extends Element,
ElementCSSInlineStyle,
ElementContentEditable,
GlobalEventHandlers,
HTMLOrSVGElement { ~ }아하! Element를 상속받고 있음을 알 수 있다.
정리하자면, Element -> HTMLElement -> HTMLButtonElement 순서대로 상속받는 구조의 타입들이구나~
다시 본론으로 돌아와서,
($btn as 타입)위와 같은 상황에서 타입을 지정해줄땐, 최상위 Element 타입 보다 Button 태그만을 가르키는 하위 HTMLButtonElemnt 타입을 지정해주는게 조금 더 구체적이겠구나~를 알게되었다.
