면접 예상 질문: CSS, Javascript 고급

CSS

position 속성이란?

요소들을 어떻게 배치할지 결정하는 속성입니다.

종류

• absolute: 원하는 위치를 지정해 배치 (부모 요소의 position이 relative면 부모 위치 기준으로 결정)
• relative: 이전 요소에 자연스럽게 연결하여 배치
• fixed: 화면상의 지정한 위치에 고정하여 배치 (스크롤해도 고정)
• static: 요소를 문서 흐름에 맞게 배치

display 속성이란?

요소를 어떻게 보여줄지 결정하는 속성입니다.

• none: 요소를 렌더링하지 않음. visibility: hidden과 다르게 영역을 차지하지도 않음
• inline: 줄 바꿈이 되지 않음 (span 태그의 기본 속성)
• block: 가로 영역을 모두 차지하며 항상 줄 바꿈이 됨
• inline-block: 요소 자체는 inline처럼 줄바꿈이 되지 않지만 해당 요소 내부는 block처럼 작동함
• flex: 1차원 (가로 or 세로) 적으로 배치할 수 있는 방식
• grid: 2차원 (가로, 세로 동시에) 적으로 배치할 수 있는 방식
• table: 레이아웃을 table로 표현

reset.css vs. nomalize.css

둘 다 크로스 브라우징을 위해 사용됩니다.

• reset: 브라우저마다 다른 스타일 기본값이 지정되어 있으므로 이것을 모두 초기화
• normalize: 브라우저마다 보기 좋은 스타일 기본값을 최대한 유지하면서 사용.

normalize는 reset보다 코드를 효율적으로 작성하는데 도움을 주며 최근에는 점점 더 자주 사용되는 추세입니다.

sass vs. css module vs. css in js

• sass
  • css의 전처리기로서, 확장판
  • 셀럭터, 변수, 함수, mixin 생성 가능
  • nesting 기능으로 관련 속성 그룹화
  • css와 비교하여 재사용성 향상
• css module
  • 모듈별로 스타일이 정의되기 때문에 다른 모듈의 스타일과 충돌 X
  • 다른 모듈과 클래스명 중복 X (자동으로 클래스명에 해시값 추가)
• css in js
  • css 코드를 js 파일 안에서 작성
  • 다른 컴포넌트와 클래스명 중복 X (자동으로 클래스명에 해시값 추가)
  • props를 받을 수 있음
  • 삼항연산자 사용 가능 w/ 템플릿 리터럴

Javascript

이벤트 캡처링이란?

버블링과 반대로 하위 요소에서 이벤트 발생시 최상위 부모 요소에서부터 이벤트가 발생하여 타고 내려오면서 해당 요소까지 이벤트가 순서대로 발생하는 것

주로 사용되는 경우: 어떤 요소에 이벤트가 발생하여도 그 상위 요소의 이벤트가 발생하도록 하고 싶을 때

클로저는 어떨 때 사용?

• 외부 함수의 변수를 기억하고 항상 최신 상태를 유지해야 하는 상황에서 유용
• 외부 함수의 변수를 private하게 사용 가능

프로토타입의 개념과 장단점, 사용 예시는?

어떠한 객체의 인스턴스 생성시 해당 객체의 prototype __proto__를 참조하기 때문에 프로퍼티와 메서드를 바로 사용할 수 있습니다.

장점

• 재사용성, 메모리 절약
• 유연한 프로그래밍

단점

• 예측성, 안정성 떨어짐 (예상치 못하게 프로토타입에 정의된 메서드 있을 수 있음)

사용예시

toString() 메서드가 있습니다. 해당 객체의 프로토타입에 정의된 메서드가 없다면 prototype chaining을 통해 상위 객체의 프로토타입의 메서드를 검색합니다.
그렇게 계속 타고 올라다가 결국에는 모든 객체의 조상인 Object의 프로토타입의 메서드를 검색하여 toString()를 정상적으로 실행시킵니다.

호이스팅의 발생 이유는?

1. JS 엔진은 함수 선언문 해석 -> 변수 초기화 -> 코드 실행 순서로 진행
2. 코드 실행 시점엔 이미 함수와 변수가 생성되어 있는 상태
3. 따라서, 어디에서든 함수나 변수 호출 가능

실행 컨텍스트란?

실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.
JS는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생합니다.

• 호이스팅 발생
• 외부 환경 정보 구성
• this 설정

실행 컨텍스트는 크게 2가지로 분류됩니다.

• 전역 컨텍스트: 프로그램의 모든 코드, 동작 환경을 포함하는 전역 환경 (페이지 종료될 때까지 유지)
• 함수 컨텍스트: 함수 호출시 지정되는 함수 동작 내부 환경

Null 병합 연산자 (??) 란?

왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.

null, undefined 이외의 falsy한 값은 그대로 나타낸다는 점은 주의하여야 합니다.

let temp = null ?? 0;
console.log(temp); // 0

temp = 1 ?? 0;
console.log(temp); // 1

temp = NaN ?? 0;
console.log(temp); // NaN

optional chaining의 개념과 장점은?

좌항의 피연산자가 null이나 undefined일 경우에 undefined를 반환하고 그렇지 않으면 참조를 이어갑니다.

장점

optional chaining을 사용하기 전에는 && 연산자로 우선적으로 확인하고 연산에 들어가야 했습니다.
optional chaining은 변수가 null 또는 undefined인지 확인하고 프로퍼티를 참조할 때 유용합니다.

for ... of의 동작방식은?

• 이터러블의 인터페이스인 Symbol.iterator 메서드를 실행한다.
• 이터러블은 Symbol.iterator 메서드를 실행하면 이터레이터를 리턴한다
• 이터레이터는 next() 메서드를 실행하면 { value, done } 객체를 리턴한다.

iterator란?

객체를 next 메서드로 순환할 수 있는 객체입니다.
iterator는 next() 메서드를 포함하고, next 메소드는 아래의 규칙을 따릅니다.

• argument 없음
• 반환값은 { done: boolean, value: any }를 포함하는 object여야 함
• 반복이 끝날 때 done은 true를 반환하여야 함

generator란?

일반적인 함수는 호출시 종료될 때까지 중간에 멈추지 않습니다.
하지만, generator는 원하는 부분에서 yield를 통해 멈추었다가 next로 다시 이어나갈 수 있는 함수입니다. (중간에 종료하고 싶을 때는 return)

function *foo(x) { ... } // 함수 이름 앞에 * 붙임

구체적인 특징은 https://velog.io/@dkdlel102/자바스크립트에서-제너레이터와-asyncawait 을 참고해주세요.

yield의 뜻은 함수 실행의 제어권을 양도 (yield) 한다는 의미입니다.

JS의 GC란?

GC는 메모리 관리 기법 중 하나로 프로그램이 동적으로 할당했던 영역 중에서 필요없게 된 영역을 해제하는 기능입니다.
C와 같은 저수준의 언어는 직접 메모리를 할당하고 해제합니다. (malloc, free)
JS와 같은 고수준의 언어에서는 자동으로 메모리를 할당하고 필요 없어졌다고 판단되었을 때 자동으로 해제합니다.

GC의 순환참조 문제와 그 해결 방법은?

function phone() {
    const apple = {};
    const samsung = {};

    apple.iphone = samsung;
    samsung.galaxy = apple;

    return 'circular';
}

phone();

phone() 함수가 호출되고 완료되어도 서로에게 참조가 걸려있기 때문에 GC는 메모리를 해제하지 않아서 계속 메모리에 남아있게 됩니다. 이것은 메모리 누수의 주요 원인입니다.

mark and sweep 방식으로 순환참조 문제를 보완할 수 있습니다.
이 알고리즘은 이 값이 참조되고 있는지에 중점을 두지 않고 도달가능성에 중점을 둡니다.

도달 가능성이란 JS의 root라는 글로벌 object에서부터 해당 값까지 도달이 가능한가에 대한 여부입니다.

couple()이 호출되고 완료된 후에는 더 이상 root에서 apple과 samsung에 도달할 수 없기 때문에 해당 값들은 GC에 의해서 메모리가 해제됩니다.

throttle vs. debounce

throttle: 여러 번 발생하는 이벤트를 일정 시간 동안 한 번만 실행시킵니다.
debounce: 여러 번 발생하는 이벤트를 그룹화하여 특정 시간이 지난 후 한 번만 실행시킵니다.

debounce는 입력이 끝날때까지 계속 기다리지만, throttle은 입력이 시작되면 일정 주기로 계속 실행됩니다.

예시

throttle의 설정시간을 1000ms로 주면 해당 이벤트는 1000ms 동안 최대 한 번만 실행하게 됩니다.
debounce의 설정시간을 1000ms로 주면 이벤트가 발생하고 1000ms 이내에 다시 발생되면 계속 기다리다가 마지막으로 이벤트가 발생한 지 1000ms가 지나면 이벤트를 한 번 발생시킵니다.

NodeJS vs. JS

JS

• browser 내부에서만 사용 가능

NodeJS

• JS chrome v8 엔진으로 빌드된 JS 런타임
• browser 외부에서 사용 가능하고 주로 server side에 사용됨

polyfill이란?

구버전의 브라우저에서 사용할 수 있도록 구버전의 JS 코드로 JS의 최신 기능을 똑같이 구현한 것입니다.