헉; 지금 글을 쓰면 BEM 벌써 3번째 포스팅이다. 거의 1년마다 포스팅하는 것 같은데, 글로만 정리를하고 실제 내것으로 체화하지 않았다는, 나의 게으름의 반증이다. 이번이 마지막 포스팅이 되길........🙏🙏🙏🙏🙏 안그래도 javascript로도 유지보수 비용이 많이 드는데, css도 유지보수 비용이 많이 들게되면, 프론트엔드 개발자는 많이 힘들어질 것이다. 가장 대표적인 css 컨벤션으로는 카멜케이스가 아니라, 하이픈(-)을 사용하여 id, class등의 문자열을 표시하는 것이다. 또는, js- prefix를 사용하여 해당 DOM요소가 Javascript와 관계있다는 것을 명시시킬 수도 있다. 그럼 이제 BEM 네이밍 규칙을 알아보도록 하자. BEM을 사용할 때의 장점은 다음과 같다. 1. CSS..
"!important를 쓰는 것은 안티패턴이다." (그냥 !important를 검색하기만해도 사용을 지양해야 하는 이유에대해 여러가지 이유가있다.) 우테코 미션을 진행하면서, 내가 적용한 css가 반영되지 않길래, !important를 사용한적이 있다. 거기에 리뷰어님의 코멘트를 남겨주셨는데, "!important의 경우 특수한 상황에 쓰이기때문에 !important를 꼭 사용해야하는 경우에 주석으로 남기거나 코드리뷰에 왜 사용해야만 했는지 코멘트해주시는게 좋습니다 " 즉, !important를 되도록이면 쓰지 않는다는 뜻이다. 왜 그럴까? !important를 사용하면 적용되지 않는 css를 두고, 우선순위 고민없이 바로 적용했다고 가정해보자. 해당 프로젝트의 css 담당자가 바뀌어서 해당 스타일을 풀..
- attribute attribute는 html문서에서 elements에 추가적인 정보를 넣을 때 사용되는 요소이다. 위와 같은 코드가 있다면 class가 div라는 element의 attribute인 것이다. - property html DOM에서 attribute를 가리키는 표현이다. 위와같은 코드가 있을때 const $flex = ducument.querySelector('.d-flex') 위 코드로 html DOM 객체를 만들어 낼 수 있다. $flex의 property로 .className, .classList 등이 존재한다. 즉, html 문서 안에서는 class가 attribute이지만, html DOM에서는 property인 것이다. attribute는 html document/file ..
- 전역에서의 this 1) browser의 this는 window 2) nodeJS의 this는 빈 Object - 함수에서의 this 1) browser의 this는 window 2) nodeJS의 this는 global object 3) strict모드 undefined - 메소드에서의 this 1) browser의 this는 window 2) nodeJS의 this는 global object 3) strict모드 undefined 4) 기본적으로 this는 자기 자신의 객체를 반환한 값
1) undefined : 값이 없다, 초기화 한적이 없다 라는 의미, 즉 기본 타입 typeof undefined 는 undefined이다. 또한 undefined를 Boolean 값으로 사용할 경우, false 취급한다. new Number(undefined) 는 NaN이 된다. 2) null : 없는 값이다. Boolean으로는 false 취급한다. (즉 ,null == undefined이고 null !== undefined 이다.) typeof null은 object이다. new Number(null)은 0이다. 3) NaN : 이 값은 숫자가 아니다. Boolean 값으로 사용할 경우, false 취급한다. console.log(NaN==undefined);//false console.log(N..
- Window 객체란 무엇인가? : 브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있는 객체이다. 브라우저를 보면, 탭들도 있고, 주소창도 있고, 즐겨찾기, 툴바도 있고, 그 밑에 웹사이트가 표시된다. 여기서 브라우저 전체를 담당하는게 window 객체이고, 웹사이트만 담당하는게 document 객체이다. window 객체 아래에, screen, location, history, document 객체가 존재한다. 근데 왜, window.을 하지 않고도 history, document 객체를 사용할 수 있는 것일까? window는 모든 객체의 조상이라서, 전역객체라고 불린ㄷ. 모든 객체를 다 포함하고 있기 때문에, window는 그냥 생략가능하다. window아래에 String, Boolean..
- 실행 컨텍스트란 무엇인가요? : 컨텍스트란 한국말로 번역하면 '문맥'이다. 쉽게 말해서 코드의 실행 환경이라고 이해하면 된다. 여기 예제 코드가 있다. const name = 'zero'; function wow(word) { console.log(word + ' ' + name); } function say(){ const name = 'nero'; console.log(name); wow('hello'); } say(); 위 결과는 nero, hello zero가 출력된다. 이것을 이해하려면 lexical scope를 알아야한다. zereight.tistory.com/863 일단, 코드를 실행하는 순간 모든 것을 포함하는 전역 컨텍스트가 생긴다. 전역 컨텍스트는 모든 것을 관리하는 환경이고, 페이..
- 왜 자바스크립트에서는 전역변수를 지양해야할까? 변수가 섞일 수 있기 때문이다. 자바스크립트 앱을 만들면서 혼자만 개발하는 것이 아니라, 여러 명과 협동도 하고, 다른 사람의 라이브러리 (자바스크립트 코드 모음)을 사용하는 일도 많다. 그런데 전역변수를 사용하다 보면, 우연의 일치로 인해서, 같은 변수 이름을 사용해서 이전에 있던 변수를 덮어쓰는 불상사가 발생할 수 있다. 제일 간단한 방법은 전역변수 대신 한 번 함수 안에 넣어서 지역변수로 만드는 것이다. 또는 객체 안의 속성으로 만드는 것이다. var obj = { x: 'local', y; function(){alert(this.x)} } => 이런 방법을 네임스페이스를 만든다고 표현한다. 고유한 네임 스페이스를 만들어서 겹치지 않게 하는 것이다!..
