FrontEnd/Interviews 6

React Element와 Component 차이

What is the difference between an element and a component in React?React에서 Element와 Component의 차이는 무엇입니까? 나의 답변Element는 React내에서 DOM node를 가리키는데 사용하곤 합니다.React내에서 Component는 function혹은 class이며, state를 가지고 있습니다. 추가학습ElementsElements는 React Application을 구성하는 블럭과 같습니다. Element는 immutable 하며, 우리가 화면에서 보게되는 것을 이야기합니다.Element는 바로 사용되지는 않으며, Component에서 리턴받아서 사용되곤 합니다.​xconst element = Hello, World!;Co..

FrontEnd/Interviews 2019.11.24

Javascript ==와 ===의 차이

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의 경우 생성할 ..

FrontEnd/Interviews 2019.11.21

CSS preprocessor 장점 단점

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

FrontEnd/Interviews 2019.11.20

Cache busting

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..

FrontEnd/Interviews 2019.11.20

BEM (Block Element Modifier)

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의 재사..

FrontEnd/Interviews 2019.11.19

alt 속성

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..

FrontEnd/Interviews 2019.11.19