코드 땜장이

css에서 변수를 이용 하고 싶었던 때가 있었을 것이다. 위의 코드는 css에서 변수를 정의하고, 해당 변수를 사용 해보는 간단한 예제이다. 간단하게 내용을 뜯어보면 :root { --text-color: red; } // --text-color 변수에 red라는 값을 할당. .title { --text-color: green; } // 클래스가 title인 경우 --text-color 변수에 green라는 값을 할당. * { color: var(--text-color); } // 모든 태크에서 색상을 변수에서 색상을 가져오게 변경. Title 안녕하세요  그리하여 위처럼 title클래스를 가지고 있는 녀석은 녹색으로 일반 태그는 빨간색으로 보이게 된다. 조금더 꼬아보자. 위처럼 transform 처럼 여러속성을 정의할 수 있는 css속성에서는 변수 사용에 있어서 더더욱 절실하게 된다. css를 뜯어보자. .btn { transform: scale(var(--big, 1)) skew(var(--skew, 0deg)) } // scale을 --big변수를 참조하되, 정의 되어있지 않으면 1을 이용하게하고, skew를 --skew 변수를 참조 하되, 정의 되있지 않아면 0deg를 쓰게 하였다. .big { --big: 1.5; } // --big 변수에 1.5라는 값을 할당. .skew { --skew: 30deg; } // --skew 변수에 30deg라는 값을 할당. 위와 같이 정의 하여 4가지 경우를 각각 원하는 방식으로 정의를 할 수 있었는데, 만약에 변수를 사용 하지 않았다면,  .big { transform: scale(1.5) } .skew { transform: skew(30deg) } .big.skew { transform: scale(1.5) skew(30deg) } 위와 같이 조합 되는 css가지수에 따라 전부 정의해야 할 수도 있다. 종류가 많아지면 많아질수록 지옥이 될지도...

 요즘에, var를 쓰지 말라는 사람들이 많아서, es6이후에 자바스크립트를 배운사람들은 처음보는 키워드일 수도 있고, 그냥 변수 선언 하는 키워드정도로 생각을 하는데, 왜 쓰지 말라는 지에 대해서 잘 모르는 분들이 있을 것이다.  아래의 코드들로 하여금 어느정도 해당 키워드의 나쁜점을 좀 드러 낼 수 있게 let과 비교를 하며 설명을 드리고자 한다.  몇가지 집고 아래 코드를 보도록 하자, 않그러면 코드 자체가 이해 안 될 수 있으니.  1. var, let은 스코프의 차이가 있다. var의 경우에는 function scope, let은 block scope를 가진다. ( function () { //... function scope { //... block scope var a = 1 console . log (a) } console . log (a) })() ( function () { //... function scope { //... block scope let b = 1 console . log (b) } console . log ( b ) // Uncaught ReferenceError: b is not defined })()  var의 경우에는 블록 스코프 내에서 선언이 되었지만, 해당 함수내에서는 참조 가능 한것을 볼 수 있다 var는 function scope를 갖는다.  let의 경우에는 블록 스코프 내에서 선언이 되었고, 블록에서 벗어 나자마자 참조 불가능 한것을 볼 수 있다 let은 block scope를 갖는다.  2. TDZ ( function () { console . log (a) // undefined var a = 1 })() ( function () { console . log (b) // Uncaught ReferenceError: Cannot access 'b' befor...