삼바의 성장 블로그

What is the difference between the equality operators == and ===?동등연산자 ==와 ===의 차이는 무엇입니까? 나의 답변JS에서 ==와 ===의 차이점은 ===은 비교대상의 자료형(type)까지 비교한다는 점입니다. 추가 학습내용ECMAScript 표준에서는 7개의 자료형을 정의한다.BooleanNullUndefinedNumberStringSymbolObject ==와 ===의 차이점이 type까지 검사한다고 할 때, 쉽게 생각할 수 있는 오류는 기본타입(Primitive values)외의 타입에서 일어나기 쉽다.xvar a = [1, 2, 3]var b = [1, 2, 3]​console.log(a === b)// falseObject의 경우 생성할 ..

What are the advantages of using CSS preprocessors?CSS 전처리기를 사용할 때, 장점은 무엇입니까? 나의 답변CSS를 작성 할 때, 프로그래밍적 요소(변수, 함수, 상속)을 사용하여 도움을 주는 도구입니다. 추가 학습내용CSS preprocessor은 CSS를 좀더 촘촘하고 DRY 방법론에맞추어 개발할 수 있게 합니다.CSS preprocessor를 사용하여 유지보수가 쉽고 확장에 용이한 CSS를 만들 수 있게 됩니다. CSS preprocessor 장점재사용성: 공통 요소 혹은 반복적인 항목을 변수, 함수로 대체 가능합니다.시간적 비용 감소: 임의 함수 및 Built-in 함수로 인해 개발 시간적 비용을 절약할 수 있습니다.유지 관리: 중첩, 상속과 같은 요소로..

What is the purpose of cache busting and how can you achieve it?Cache busting의 목적은 무엇이고 어떻게 적용할 수 있습니까? 나의 답변브라우저에서 Cache를 남겨 변경하지 않은 소스에 대하여 다시 가져오지 않기 때문에 개발 중 코드를 변경하더라도 이가 적용되지 않는 경우가 있는데 이 때, 기존의 Cache를 없애고 변경한 코드를 반영하기 위한 행위를 Cache busting이라 한다.Cache busting을 위해서는 크롬의 개발자 도구를 활용하여 캐시 비우기 및 강력 새로고침을 하거나 수정되어야할 파일 이름에 버전정보를 넣는다. 추가 학습내용Cache busting은 방문자가 자주 수정되는 파일을 사용하는 경우 유용하다.Cache busti..

What is CSS BEM?CSS BEM은 무엇입니까? 나의 답변BEM(Block Element Modifier)은 CSS 아키텍쳐로 클래스명을 .block__element--modifier와 같은 형식으로 나타냅니다. 추가 학습내용CSS-in-JS의 scope문제를 해결하기 위한 대체 해결책다양한 CSS 구조를 개선시키기 위한 CSS 개발 방법론 예시Block문단 전체에 적용된 요소 혹은 요소를 담고 있는 컨테이너를 말합니다.Block의 이름은 그 블록의 목적으로 기술되어야 하며, 그 Block의 상태를 나타내지 않습니다.Block은 자신의 환경에 영향을 끼쳐서는 안됩니다. (Block의 positioning이나 margin 값과 같은 외부 기하학적 요소를 설정해서는 안됩니다.) → Block의 재사..

What is the purpose of the alt attribute on imagesHTML에서 이미지에 alt속성을 사용하는 이유는 무엇입니까? 나의 답변alt속성을 사용하는 이유는 이미지 정보를 제공하기 위해서 입니다.alt속성은 이미지의 로드가 실패하여 이미지가 비어있거나 로딩이 지연될 경우, 이미지의 정보를 제공할 수 있습니다. 추가 학습내용웹크롤러들은 alt태그를 통해 이미지의 내용을 이해합니다. 따라서 SEO(Search Engine Optimization)를 적용하는데 중요한 요소로 고려되야 합니다..을 alt속성 값 마지막에 넣어 접근성을 향상시킬 수 있습니다. 예시xxxxxxxxxx참조https://www.w3schools.com/tags/att_img_alt.asphttp://we..

화면에 붙여보자xxxxxxxxxx - +​ ​ (() => { const data = { value: 0 } const counterDesc = App.ClickCounter(data).setCountFn( v => v - 1 ) const counterInc = App.ClickCounter(data).setCountFn( v => v + 1 ) const updateEl = document.querySelector('#counter-display') const btnDesc = document.querySelector('#btn-desc') const btnInc = document.querySelector('#btn-inc')​ const descCounterView = App.ClickCountV..

인프런에서 견고한 JS 소프트웨어 만들기를 수강하며 적은 강의노트입니다.보다 자세한 내용은 강의를 통해 확인하실 수 있습니다. 클릭카운터 모듈 - 스펙3감소버튼, 추가되는 수의 변화가 필요할지도 모른다.모듈을 바꿔야할텐데...ClickCounter모듈은 데이터를 주입받는다.테스트 코드 작성xxxxxxxxxx it('초기값을 주입하지 않으면 에러를 던진다', () => { const actual = () => (counter = App.ClickCounter()) expect(actual).toThrowError() })모듈수정xxxxxxxxxxvar App = App || {}​App.ClickCounter = _data => { if(!_data) throw Error('_data') const dat..

로만 HTML의 거의 모든 태그를 사용하던 도중, 이는 문서자체가 구조적이지 못하게하고, HTML5에서 추가된 Sementic(의미론적인)특징을 사용하지 못하는 것이라는 유튜브를 보고 이를 정리한 글입니다. 사용해야 하는 이유의미부여의미요소(Semantic Element)는 HTML로 만든 문서에 추가적으로 의미를 부여해줍니다. 무의미한 요소(Non-Semantic Element)로 문서를 작성할 경우, HTML문서를 접하는 사람이 어떤 데이터를 봐야할지, 어떤 데이터를 제공하는지 파악하기가 어렵습니다.사실 만능 를 사용하다가 Semantic 마크업들을 찾는 행위자체가 개발하는데 시간을 더 잡아먹을 것은 사실입니다. 하지만, Semantic 마크업을 사용하여 의미를 부여해준다면, 유지보수하거나 소프트웨어..

인프런에서 견고한 JS 소프트웨어 만들기를 수강하며 적은 강의노트입니다.보다 자세한 내용은 강의를 통해 확인하실 수 있습니다. 모듈 이용해서 화면 만들기화면(index.html)에 붙여보자xxxxxxxxxx Increase​ ​ (() => { const clickCounter = App.ClickCounter() const updateEl = document.querySelector('#counter-display') const triggerEl = document.querySelector('#btn-increase')​ const view = App.ClickCountView(clickCounter, {updateEl, triggerEl})​ view.updateView() })() 개선된 점기존 i..

인프런에서 견고한 JS 소프트웨어 만들기를 수강하며 적은 강의노트입니다.보다 자세한 내용은 강의를 통해 확인하실 수 있습니다. 클릭카운터 모듈 - 스펙1전역공간에 있는 counter변수를 ClickCounter안에서 관리ClickCounter모듈의 getValue()는 카운터 값을 반환한다. 테스트 코드 작성 (적색단계)xxxxxxxxxx describe('getValue()', ()=> { it('초기값이 0인 카운터 값을 반환한다', ()=> { const counter = App.ClickCounter() expect(counter.getValue()).toBe(0) }) }) 모듈 생성 (녹색단계)xxxxxxxxxxvar App = App || {}​App.ClickCounter = () => {..