HTML
DOCTYPE 이란 무엇인가요?
DOCTYPE 은 DOCUMENT TYPE 을 의미하며 웹문서가 어떤 HTML 버전을 사용했는지 알려주는 브라우저에 알려주는 선언입니다. 예를들어 html5 를 사용했을경우 〈!DOCTYPE html〉이라고 합니다.
여러 meta 태그들에 대한 질문
meta태그란 웹페이지에 대한 메타데이터를 제공합니다. 이러한 메타데이터는 웹페이지의 설명, 작성자, 수정된 날짜, 키워드 등 수정 할 수 있으며 검색엔진(SEO) 최적화에 도움을 줍니다.
시맨틱 태그란 무엇인가요?
header, footer, article 처럼 이름으로 직접적인 의미를 알게 해주는 태그들로 정보의 표현을 명확하게 해주는 html 태그입니다.
CSS
position에 대해 설명해주세요.
position 속성은 요소의 위치를 결정하는데 사용됩니다. 값으로는 static, relative, absolute, fixed, sticky 등이 있습니다.
display에 대해 설명해주세요.
display 속성은 요소가 어떻게 화면에 표시될지를 결정합니다. 값으로는 none, block, inline, inline-block, flex, grid 등이 있습니다.
flex 에 대해 설명해주세요.
flex는 플렉시블 박스 레이아웃 모델을 의미합니다. 이는 요소 간 공간 분배와 정렬 기능을 제공하여 반응형 레이아웃을 쉽게 만들 수 있습니다.
grid는 무엇이고 flex 와 차이는 무엇인가요?
방향:
flex: 주로 1차원 레이아웃을 다루는데 사용됩니다. 요소를 행 또는 열로 배열하고, 그 안에서 유연한 공간 분배와 정렬을 제어할 수 있습니다.
grid: 2차원 그리드 레이아웃을 다루는데 사용됩니다. 행(row)과 열(column)의 그리드를 생성하고, 요소를 그 안에 배치할 수 있습니다. 행과 열의 크기와 배치를 다양하게 제어할 수 있습니다.
정렬:
flex: justify-content와 align-items 속성을 사용하여 요소를 가로 또는 세로 축에서 정렬할 수 있습니다. 이를 통해 요소들을 가운데 정렬하거나 공간 분배를 조정할 수 있습니다.
grid: justify-items와 align-items 속성을 사용하여 요소들을 그리드 셀 안에서 정렬할 수 있습니다. 이를 통해 요소들을 가로/세로 가운데 정렬하거나 셀 크기를 조정할 수 있습니다.
배치:
flex: 유연한 공간 분배를 통해 요소들을 배치합니다. 요소들이 한 줄에 나열되는데, 필요에 따라 다음 줄로 넘어갈 수 있습니다.
grid: 그리드 영역 내에 행과 열을 정의하여 요소들을 배치합니다. 요소들은 그리드 셀에 자유롭게 배치될 수 있으며, 필요에 따라 행과 열이 자동으로 생성됩니다.
구조:
flex: 주로 단일 행 또는 단일 열을 가진 컨테이너에 적용되며, 컨테이너 내의 요소들을 배치합니다.
grid: 복잡한 2차원 그리드 구조를 가지는 컨테이너에 적용되며, 행(row)과 열(column)의 그리드를 생성하고 요소들을 배치합니다.
이러한 차이점들로 인해 flex와 grid는 서로 보완적인 역할을 가지며, 프로젝트의 요구 사항에 따라 선택되어야 합니다. 일반적으로 flex는 요소들을 단순하게 배치하고 정렬하는 데 사용되며, grid는 더 복잡한 레이아웃 구조를 구성하고 배치하는 데 사용됩니다.
box model이란 무엇인가요?
박스 모델은 HTML 요소를 사각형 박스로 간주하는 CSS의 레이아웃 개념입니다. 이 박스는 content, padding, border, margin을 포함합니다.
margin, padding의 차이는 무엇인가요?
margin은 박스 외부의 공간을, padding은 박스 내부의 공간을 제어합니다.
inline, block, inline-block의 차이점은 무엇인가요
inline 요소는 줄바꿈 없이 나타나며, block 요소는 새로운 줄에서 시작되며 전체 폭을 차지합니다. inline-block은 inline과 block의 성질을 모두 가지며, 줄바꿈 없이 표현되지만 block처럼 폭과 높이를 가질 수 있습니다.
reset.css, nomalize.css는 무엇인가요?
이 두 CSS 파일은 브라우저 간 일관된 스타일링을 제공하기 위해 사용됩니다. reset.css는 모든 요소의 스타일을 제거하여 동일한 베이스라인을 제공하고, normalize.css는 많은 HTML 요소의 기본 스타일을 보정하여 일관성을 유지하면서 사용자가 커스텀 스타일을 적용하기 용이하게 합니다.
sass, css module, css in js에 대해, 각각 장단점.
SASS, CSS Modules, 그리고 CSS in JS는 모두 웹 개발에서 CSS 스타일링을 보다 효율적으로 다룰 수 있도록 도와주는 도구 또는 접근 방식입니다. 각각에 대해 더 자세히 알아보겠습니다:
SASS (Syntactically Awesome Style Sheets): SASS는 CSS의 확장된 문법을 제공하는 CSS 전처리기(preprocessor)입니다. SASS를 사용하면 변수, 중첩 규칙, 믹스인 등과 같은 고급 기능을 CSS에 추가할 수 있습니다. 이를 통해 코드의 재사용성과 유지보수성을 높일 수 있습니다. SASS는 .scss 또는 .sass 확장자를 가진 파일로 작성되며, SASS 컴파일러를 사용하여 일반적인 CSS로 변환됩니다.
CSS Modules: CSS Modules는 CSS를 모듈화하여 스코프를 지정하는 기술입니다. 각 CSS 모듈은 고유한 이름을 가지며, 스타일 규칙들이 해당 모듈 내에서만 유효합니다. 이를 통해 클래스 이름 충돌을 방지하고, 스타일 규칙을 컴포넌트 단위로 캡슐화할 수 있습니다. CSS Modules는 일반적으로 웹팩(Webpack)과 함께 사용되며, 개발자가 CSS 클래스 이름을 작성하는 데 있어 충돌과 관리의 어려움을 줄여줍니다.
CSS in JS: CSS in JS는 JavaScript 내에서 CSS 스타일링을 작성하고 관리하는 접근 방식입니다. 이는 컴포넌트 기반의 스타일링을 가능하게 하여, 스타일과 관련된 로직을 한 곳에서 관리할 수 있습니다. CSS in JS 도구들은 JavaScript 객체 또는 함수를 사용하여 스타일을 표현하며, 동적인 스타일링, 조건부 스타일링, 스타일의 상속 등을 지원합니다. 대표적인 CSS in JS 라이브러리로는 styled-components, Emotion, CSS Modules for React 등이 있습니다.
CSS를 head 위에 둬야하는 이유는 무엇인가요?
브라우저는 문서를 위에서 아래로 파싱하기 때문에, CSS를 내부에 위치시키면 페이지가 로드되는 동안 스타일이 적용되어 FOUC(Flash of Unstyled Content) 현상을 방지할 수 있습니다.
JS 관련
JS를 body 맨 밑에 둬야 하는 이유는 무엇인가요?
스크립트는 문서를 파싱하는 도중에 만나면 파싱을 멈추고 스크립트를 실행합니다. 그래서 HTML 요소를 조작하는 스크립트의 경우, 해당 요소가 정의되지 않은 상태에서 스크립트를 실행하면 에러를 발생시킬 수 있습니다. 이를 피하기 위해 태그 바로 전에 스크립트를 두는 것입니다.
head에 둬야 하는 경우가 있을까요? 어떨 때인가요?(defer async 제외)
스크립트가 문서의 렌더링을 막지 않고, 페이지의 내용과 상관없이 실행되어야 하는 경우에는 내부에 위치할 수 있습니다. 예를 들어, CSS를 조작하는 스크립트나 설정 값을 초기화하는 스크립트 등이 있습니다.
var, let, const의 차이는 무엇인가요?
var는 함수 스코프를 가지며 호이스팅되고, let과 const는 블록 스코프를 가지며 호이스팅되지 않습니다. 또한 const는 선언 시에 초기화해야 하며, 한번 할당한 값을 변경할 수 없습니다.
block scope란 무엇인가요?
블록 스코프는 중괄호 {}로 둘러싸인 범위에서 변수가 존재하는 스코프를 의미합니다. let과 const는 블록 스코프를 가집니다.
호이스팅이 무엇인가요?
호이스팅은 변수나 함수의 선언을 현재 스코프의 가장 위로 끌어올리는 것을 의미합니다. 실제로 코드가 이동하는 것은 아니며, 자바스크립트 엔진이 코드를 해석하는 방식입니다.
호이스팅은 개발자가 이해하기 어려운데 왜 만들었을까요? 일어나는 이유가 뭘까요?
호이스팅은 자바스크립트의 스코프 규칙과 실행 컨텍스트 생성 과정에서 변수와 함수 선언 정보를 먼저 수집하기 때문에 발생합니다. 이는 함수와 변수를 선언하기 전에 사용할 수 있는 유연성을 제공합니다.
이벤트 버블링, 캡처링, 위임
이벤트 버블링은 이벤트가 발생한 요소에서 시작해 DOM 트리를 따라 위로 올라가며 전파되는 현상을 의미하며, 이벤트 캡처링은 반대로 상위 요소에서 시작해 발생한 요소까지 내려가며 전파되는 현상입니다. 이벤트 위임은 상위 요소에서 하위 요소의 이벤트를 제어하는 기법을 의미합니다.
이벤트 위임의 장점은 무엇인가요?
이벤트 리스너를 하나의 부모 요소에만 부착하므로 메모리를 절약하고, 동적으로 추가되는 요소에 대한 이벤트도 처리할 수 있습니다.
캡처링은 어떨 때에 쓸 수 있을까요?
특정 요소에서 이벤트를 캡처하고 그 이벤트가 자식 요소로 전파되지 않게 하려는 경우, 캡처링을 사용할 수 있습니다.
클로저란 무엇인가요?
클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다. 외부 함수의 변수에 접근할 수 있는 내부 함수를 일반적으로 클로저라고 합니다.
클로저는 어떨 때에 쓰이나요?
데이터를 숨기고 캡슐화하거나, 고차 함수를 만들 때, 또는 비동기 작업을 관리할 때 클로저를 사용합니다.
이벤트 루프란 무엇인가요?
이벤트 루프는 자바스크립트의 비동기 동작을 관리하는 메커니즘입니다. 콜 스택이 비어있을 때마다 콜백 큐에서 함수를 가져와 실행합니다.
프로토타입이란 무엇인가요?
프로토타입은 객체 지향 프로그래밍에서 객체가 다른 객체로부터 속성과 메소드를 상속받는 메커니즘입니다. 자바스크립트는 프로토타입 기반 언어입니다.
프로토 타입의 장단점은 무엇인가요?
프로토타입의 장점으로는 메모리 효율성과 동적인 속성 추가가 가능하다는 점이 있습니다. 하지만 프로토타입 체인이 길어질수록 검색 성능이 저하될 수 있고, 프로토타입 체인을 이해하는 것이 복잡하다는 단점도 있습니다.
프로토타입을 실제로 사용해볼 일은 잘 없는데 어디에 사용할 수 있을까요?
프로토타입은 주로 객체 지향 프로그래밍 패턴을 구현할 때 사용됩니다. 예를 들어, 생성자 함수를 통해 만든 객체가 공통된 메소드를 사용해야 할 때 프로토타입을 활용할 수 있습니다.
실행 컨텍스트란 무엇인가요?
실행 컨텍스트는 코드가 실행되는 환경을 의미합니다. 실행 컨텍스트는 변수, 함수 선언, 스코프, this 정보 등을 담고 있습니다.
== 과 === 의 차이가 무엇인가요?
==은 추상적 동등 비교로, 타입 변환 후 값을 비교합니다. ===은 엄격한 동등 비교로, 타입을 변경하지 않고 값을 비교합니다.
NaN 과 NaN을 비교하면 어떻게 되나요? 어떻게 확인할 수 있나요?
NaN 비교 : JavaScript에서 NaN은 자기 자신과도 동등하지 않습니다. 따라서 NaN === NaN은 false입니다. NaN을 확인하려면 isNaN() 함수를 사용해야 합니다.
setTimeout(callback, 0) 은 어떻게 동작하나요?
이 코드는 이벤트 루프의 마지막에 callback을 실행하도록 예약합니다. 0ms의 지연시간이 주어졌지만, callback은 현재 실행중인 모든 코드가 완료된 후에야 실행됩니다.
Promise란 무엇인가요? async await 또한,
Promise는 비동기 작업의 최종 완료(또는 실패) 및 그 결과 값을 나타내는 객체입니다. async/await은 Promise를 좀 더 편리하게 사용할 수 있게 해주는 ES8의 문법입니다.
ES6에 추가된 문법에 대해 말해주세요.
ES6에는 let/const, 화살표 함수, 클래스, 모듈, 프로미스, 템플릿 리터럴, 디스트럭처링, 기본 매개변수, spread/rest 연산자, Symbol 등 다양한 문법이 추가되었습니다.
