모의면접 3주차 - CSS / JavaScript 심화

H Kim·2022년 3월 7일

모의인터뷰

목록 보기

4/9

CSS

Q. CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.

SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판(CSS를 확장하는 스크립팅언어)이다.

불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.

코드 중복을 줄이고 변수, 함수, 연산자를 사용할 수 있고 mixin을 사용해 자주 쓰이는 CSS 그룹을 만들고 재사용할 수 있다. extend는 특정 셀렉터를 상속할 수 있게 하여 셀렉터에 정의된 값을 한 곳에서 관리할 수 있게 해 준다.

Q. CSS, SCSS, SASS의 차이점과 리액트와 사용할 거면 무엇을 쓸 건지 설명하세요.

SCSS와 SASS는 CSS의 preprocessor(전처리기)로, CSS에 기능을 추가한 것이다. 기능을 추가한 것이지, CSS 표준 자체를 확장한 것은 아니다.

CSS와 SASS/SCSS의 차이점
- SASS/SCSS에서는 Nesting을 이용해 연관된 코드를 그룹화 할 수 있다.
- SASS/SCSS에서는 변수, 함수, 연산자를 만들어 사용할 수 있다.
- SASS/SCSS에서는 mixin을 이용해 CSS 그룹을 만들고, 재사용할 수 있다.
- SASS/SCSS에서는 extend를 사용해 특정 셀렉터를 상속할 수 있다.
SASS와 SCSS의 차이점
- 문법 차이
  - SCSS는 CSS 문법을 사용해야 할 때 사용하는 반면, SASS는 CSS 문법을 따르지 않아도 될 때 사용한다. SCSS는 CSS의 문법을 그대로 사용하는 반면, SASS는 인덴테이션으로 구별한다. 따라서 SCSS가 CSS와의 호환성이 비교적 좋다.
    - SASS는 들여쓰기와 줄 바꿈이 문법의 요소이기 때문에 여러 줄 쓰기를 지원하지 않는다.
    - SCSS는 CSS 문법을 따라가기 때문에 세미콜론을 사용해야 한다. 반면 SASS는 세미콜론을 사용하지 않는다.
리액트와 사용할 경우 SASS와 SCSS 중 어느 것을 사용할지?
- 먼저, node-sass 라이브러리를 사용하면 SASS를 CSS로 변환해준다. 또한 SASS는 SCSS와 완전히 호환되기 때문에, 사용성에 있어서는 큰 차이가 없다. SCSS는 CSS 문법에 SASS 문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일 될 수 있다. SASS보다 SCSS가 뒤에 나왔고 여러가지 문법의 차이가 있지만 SCSS가 더 넓은 범용성과 CSS의 호환성 등의 장점으로 SCSS를 사용하기를 권장하고 있다.

Q. id와 class 셀렉터의 차이점에 대해 설명하세요.

id는 문서 안의 유일한 요소를 식별하고 싶을 때 사용하며, class는 공통점이 있는 여러 요소를 그룹화하여 식별하고 싶을 때 사용한다.

CSS에서 id는 샾(#)를 앞에 붙이며, class는 피리어드(.)을 붙여서 구별한다.

또한 id는 class의 속성보다 우선순위가 높으며, id의 속성은 해당 요소에 부여된 class의 속성과 관계없이 작동한다.

Q. CSS 박스 모델에 대해서 설명하세요.

모든 HTML 요소는 박스 모양으로 구성되기 때문에, 이를 박스 모델이라고 한다.

크게 4부분으로 나뉘어지며 아래와 같다.

content: 박스의 실질적 내용으로, 텍스트나 이미지 등 요소의 실제 내용이 들어간다.배경색과 배경 이미지를 가지고 있기도하다.
padding: content와 border 사이에 있는 안쪽 여백이며 눈에 보이지 않는다.
border: content와 padding을 감싸는 테두리이다.
margin: border를 기준으로 이웃하는 요소 사이의 간격이며 눈에 보이지 않는다.

Q. CSS에서 px, em, rem, vh, vw 단위들의 차이점은 무엇인가요?

절대 길이 단위(물리적인 측정 거리)
- px
  - 일반적인 모니터 디스플레이의 1 픽셀

상대 길이 단위
- 글꼴 상대 길이(길이값을 특정 문자나 현재 사용하는 폰트를 기준으로 설정)
  - em: 부모 요소의 폰트 사이즈를 기준
  - rem: 루트 요소(일반적으로 html 요소)의 폰트 사이즈를 기준
- 뷰포트 백분율 길이(길이값을 뷰포트를 기준으로 설정)
  - vh: 뷰포트의 초기 컨테이너 블록의 높이의 1%를 기준
  - vw: 뷰포트의 초기 컨테이너 블록의 너비의 1%를 기준

Q. CSS 레이아웃 기법의 종류와 특징에 대해서 설명하세요. (grid, flexbox)

flexbox는 X축 또는 Y축 방향으로 요소를 배치, 정렬할 수 있으며, 각 요소의 순서를 변경할 수 있기 때문에, 기존 CSS 레이아웃 기술에 비교했을 때, 손쉽게 멀티 스크린에 대응할 수 있다.

grid는 테이블처럼 세로 열과 가로 행을 기준으로 요소를 정렬한다. 그러나 테이블에 비해 Grid는 더 다양한 레이아웃을 구현할 수 있다. 행과 열 격자 구조에 요소를 자유롭게 배치할 수 있고, HTML 문서 위계 구조와 무관하게, grid 인터페이스 내부에 포함된 자식 아이템을 Grid 내부에 자유롭게 위치시킬 수 있다.

flexbox는 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만 다루기 때문에 1차원이라 부른다. 반면, grid 레이아웃은 행과 열을 함께 조절하기 때문에 2차원 모델이라 부른다.

Q. CSS in JS(styled component)의 장단점에 대해서 설명하세요.

장점
- class 명이 빌드 시 유니크한 해시값으로 변경되기 때문에 별도의 명명 규칙이 필요하지 않다.
- CSS가 컴포넌트 단위로 추상화되기 때문에 CSS 파일 간에 의존성을 신경쓰지 않아도 된다.
- 컴포넌트와 CSS가 동일한 구조로 관리되기 때문에 불필요해진 CSS를 관리하기 위해 별도의 리소스를 투입할 필요가 없다.
- CSS코드를 자바스크립트 파일에 작성하기 때문에, 컴포넌트의 상태에 따른 동적 코딩이 가능하다.
- CSS가 컴포넌트 스코프에서만 적용되기 때문에, 우선순위 문제가 발생하지 않는다.
단점
- CSS 작성을 위한 여러 라이브러리를 사용하게 되며 번들의 크기가 커진다. 번들 사이즈가 커지게 되면, 다운로드 시간이 길어지기 때문에 사용자에게 first view를 보여주기까지 시간이 오래 걸리는 것이 필연적이다. 특히나 CSS in JS는 자바스크립트가 모두 로딩된 후 CSS 코드가 생성되기 때문에 더 느려진다.
- 인터렉션이 비교적 늦다. CSS in CSS는 상태에 맞는 스타일을 전부 미리 만들어두기 때문에, 상태가 변하면 만들어둔 스타일을 바로 적용할 수 있다. 반면, CSS in JS를 사용하면, 상태가 변경되면 자바스크립트의 CSS 코드를 읽어와 파싱하는 단계부터 시작한다. 따라서 CSS in CSS에 비해 CSS 적용이 느릴 수밖에 없다.

Q. position 속성과 z-index의 연관성에 대해 설명하세요.

position 속성이 없는 태그는 순서대로 쌓인다.
position 속성이 있는 태그들은 없는 태그들보다 위에, 나오는 순서대로 쌓인다.
position 속성과 z-index 값이 있으면 z-index 값이 큰 태그가 위에 쌓인다.
z-index 값이 커도 부모 태그의 z-index가 우선된다.

JavaScript 심화

Q. event loop에 대해서 설명하세요.

자바스크립트는 단일 스레드이지만 구동되는 환경(브라우저, Node.js 등)에서는 주로 여러 개의 스레드가 사용된다. 이러한 구동 환경이 단일 호출 스택을 사용하는 자바 스크립트 엔진과 연동하기 위해 사용되는 장치가 바로 'event loop' 이다. JavaScript event loop는 call stack이 비어있는 경우, task queue에서 대기하던 callback을 call stack으로 옮겨서 callback을 실행시켜주는 역할을 한다.

자바스크립트에서는 함수 호출을 관리하는 call stack과 비동기 작업 처리를 위한 Web API가 함께 작업을 처리한다. Web API는 특히 작업 완료에 시간이 오래 걸리는 작업을 처리하게 되는데, 이 결과값을 처리할 수 있는 callback 함수를 task queue에 쌓는다.

하나의 js파일이 실행되면, 코드가 차례로 실행된다. 이 과정 중에 호출되는 함수가 비동기로 작동되는 경우, 이 비동기 작업은 (브라우저는) Web API에서 처리된다. 이 작업의 결과를 처리하는 callback 함수는 이후에 call stack에서 따로 실행이 되어야 하는데, call stack에서 실행 컨텍스트가 아직 남아있는 경우 task queue에서 "대기"하게 된다.

이처럼 시간이 오래 걸리는 작업이 call stack에 머물러서 싱글스레드로 작동되는 event loop를 막지 않도록 도와준다. 그래서 연산이 많고 시간이 오래 걸리는 작업은 비동기로 처리하는 것이 효율적이다.

JavaScript 비동기 핵심 Event Loop 정리

Q. callback, promise, async/await 의 특징과 차이점에 대해서 설명하세요.

콜백 함수
- 다른 함수 (caller)의 인자(argument)로 전달되는 함수를 callback 함수라고 부른다.
- 비동기 작업을 처리하기 위해 콜백함수를 자주 사용했지만 "callback hell"이라는 가독성이 난해한 코드가 짜여지게 되었다. 또한, callback이 인자로 전달되는 특성 때문에, 이게 callback인지 아닌지 눈으로 확인하기가 쉽지 않아서 개발자가 코드를 오작성할 확률이 높아졌다.
Promise
- 비동기 코드를 간편하게 처리할 수 있게 도와주는 자바스크립트의 객체이다.
- executor 콜백함수에서 요청한 데이터가 처리되는 대로 Promise 객체 (Promise의 인스턴스)의 result값으로 전달해 주겠다는 약속이다. 약속은 "성공(resolve)"일 수도 있고 "실패(reject)"일 수도 있다.
- Promise 역시 하나의 비동기 작업을 처리하기에는 무리가 없었으나, 연속되는 비동기 작업이 순서대로 작동되어야 하는 경우 callback hell 처럼 "promise hell"이 발생하였기 때문에, .then으로 chaining을 하며 코드가 길어지게 되었다.
Async/Await
- 마치 동기적으로 작동하는 것처럼 Promise를 조금 더 쉽게 다룰 수 있게 만들어진 문법적 설탕 (syntactic sugar)이다.
- async 함수를 실행하면 함수내 리턴값의 여부에 상관없이 Promise가 리턴 되며, 함수 내의 리턴값은 async가 출력하는 Promise의 result값으로 전달된다.
- await 키워드는 async 함수 내에서만 사용가능하며, await키워드로 비동기 코드를 처리하면 응답이 올때까지 코드 읽기를 멈췄다가 요청이 오고 나서야 다음 코드를 실행한다.
- await 키워드로 실행된 코드는 Promise가 아닌 Promise의 result에 담긴 값을 반환한다.

Q. Blocking과 Non-Blocking의 차이점은 무엇인가요?

Blocking은 호출된 함수가 자신이 할 일을 모두 마칠 때까지 제어권을 계속 가지고, 호출한 함수가 대기하도록 한다. 예를 들어 실행하는데 10초가 걸리는 A 라는 함수가 실행되면 B라는 함수가 실행되려면 10초간 대기해야 한다.

반면, Non-Blocking은 호출된 함수가 할 일을 마치지 않았더라도 바로 제어권을 내주어 호출한 함수가 다른 일을 진행할 수 있는 것이다. 예를 들어, A함수가 종료되지 않은 상태여도 바로 B함수를 실행할 수 있다.

Q. Synchronous execution과 Asynchronous execution의 차이점은 무엇인가요?

Synchronous execution(동기적 실행)
- 한 작업이 끝남과 동시에 다음 작업이 실행되는 실행된다.
- 싱글 스레드에서는 당연히 한 번에 하나씩 작업을 하게 되지만 멀티 스레드인 경우에도 동기적으로 실행된다면 A 작업이 끝날 때 까지 B 작업은 기다려야 한다.

Asynchonous execution(비동기적 실행)
- 한 작업이 끝나기 전에 다른 작업을 수행할 수 있다.
- 싱글 스레드에서는 한 스레드에서 여러 작업을 수행할 수는 있지만, 결국 한 번에 여러 작업을 수행할 수는 없다. 반면에, 멀티 스레드인 경우 여러 작업이 비동기로 실행되는 경우 여러 스레드가 동시에 작업을 할 수 있다.

Q. nodejs는 싱글쓰레드인가요?

Node.js 자체는 싱글스레드 방식이 아니다. 싱글 스레드 방식으로 동작하는 것은 Node.js나 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진이다. 만약 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로만 동작한다면 자바스크립트는 비동기로 동작할 수 없기 때문이다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저나 Node.js는 멀티 스레드로 동작한다. 자바스크립트를 실행하는 부분에서만 싱글스레드로 구성되어있고, 이 때의 작업 동시성은 이벤트 루프를 통해서 구현할 수 있다.

Q. nodejs는 event-driven architecture 인가요?

event-driven architecture
- 시시각각 발생하는 이벤트의 생성과 감지, 소비 및 시스템 상태의 중대한 변화를 지원하는 소프트웨어의 모델 혹은 아키텍처 패러다임. 시스템 내 외부에 발생한 주목할 만한 상태의 변화에 기반한 동작이다.
- 이벤트 기반 시스템은 이벤트 루프에서 이벤트를 처리하며, 이벤트 루프는 장치로부터 입력이나, 내부경보를 기다리고 있다가 활동이 발생하면, 이벤트를 생성시킨다. 발생한 이벤트의 데이터를 수집하고, 데이터를 필요한 이벤트 핸들러로 발송한다.
- 프로그램이 어떤 유저액션(이벤트)에 대한 반응으로 동작하는 패턴이다. 예를 들자면 키보드, 마우스로 하는 동작이 이벤트이며, 이러한 이벤트는 또 다른 결과를 가져오는 류가 있다.
- Node.js에는 HTML 요소가 없기 때문에 대부분의 event는 프로세스, 네트워크, 파일과의 상호 작용 등에서 비롯된다. 따라서 Node.js 는 event-driven architecture라 할 수 있다.

Q. this와 dynamic scoping

this
- 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수를 뜻한다. this를 통하여 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조 할 수 있다.
- this는 지역 변수처럼 사용할 수 있다. 단, this는 함수가 선언되었을 때의 Lexical scope를 기반으로 결정되는것이 아닌 dynamic scope 즉, 함수가 호출되는 시점에 의해 동적으로 결정된다. 이를 통해 함수를 호출하는 위치가 아닌, 어디서 호출했는지에 따라서 동적으로 상위 스코프를 결정하는것을 볼 수 있어 dynamic scope라고 부를 수 있다.

Q. 객체 지향 프로그래밍이란 무엇인가요?

자바스크립트는 객체 기반의 프로그래밍 언어이며 원시 타입의 값을 제외한 나머지 값들은 모두 객체이다.

객체 지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. 이 방법은 실제 세계의 실체들을 프로그래밍에 접목시키려는 시도에서 부터 시작되었다.

객체지향 프로그램의 핵심 개념으로 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것이다. javascript는 상속을 구현하여 불필요한 중복을 제거할 수 있다. 이는 코드의 재사용이란 관점에서 매우 유용하다. 생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메서드를 프로토타입에 미리 구현해 두면 생성자 함수가 생성할 모든 인스턴스는 별도의 구현 없이 상위(부모) 객체인 프로토타입의 자산을 공유하여 사용할 수 있게 된다.

Q. Prototype Chaining

프로토타입이 상위 프로토타입까지 연결되는 구조를 말한다.
즉, 하위 프로토타입은 상위 프로토타입의 속성과 메소드를 공유 받는다.
모든 함수는 prototype이라는 프로퍼티가 있다.
생성자 함수를 통해 만든 객체는 속성 proto를 통해 함수 객체의 프로토타입으로 연결된다.
모든 객체의 최상위 프로토타입은 Object의 prototype 객체이다.

Q. IIFE

Immediately Invoked Function Expressions의 줄임말로써 함수 정의와 동시에 즉시 호출되는 즉시 실행 함수를 의미한다.이는 단 한번만 호출이 되며 다시 호출할 수 없는 특성이 있다.

IIFE는 전역 스코프를 오염시키지 않기 위해 사용한다.

Javascript에서는 함수가 어떻게 정의되었는지 혹은 어떻게 호출되었는지에 따라서 scope가 정해지게 된다.이를 활용하여 변수나 메소드가 접근되는 것을 closure가 보호해 줄 수 있는데 이를 private scope라 하며 주로 이런 상황에 IIFE가 사용된다.

IIFE (Immediately-Invoked Function Expression) 정리

Q. setTimeout 에서 this는 왜 전역을 가리키는지 설명하세요.

this는 함수의 호출 방식에 의해서 결정된다. setTimeout()에 의해 실행된 코드는 별도의 실행 컨텍스트에서 setTimeout이 호출된 함수로 호출된다. 호출된 함수에 대해서는 this 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 window) 객체, strict모드에서 undefined를 기본 값으로 한다.

[JS] setTimeout 문제

Q. 스택과 힙의 차이에 대해서 설명하세요.

콜 스택(call stack) 영역에는 원시타입(숫자 등) 데이터가 저장된다.

메모리힙(memory heap) 영역에는 참조타입(배열, 객체, 함수 등) 데이터가 저장된다. 만약 참조타입 데이터를 선언을 하게 되면 해당 주소값만 콜 스택에 저장되고 주소값에 따른 value는 힙에 저장된다.

Q. call-by-value에 대해서 설명하세요.

함수 호출 방식 중 하나이다.

Call by value(값에 의한 호출)는 인자로 받은 값을 복사하여 처리를 한다. Call by reference(참조에 의한 호출)는 인자로 받은 값의 주소를 참조하여 직접 값에 영향을 준다. 간단히 말해 값을 복사를 하여 처리를 하느냐, 아니면 직접 참조를 하느냐 차이인 것이다.

Call by value(값에 의한 호출)
장점 : 복사하여 처리하기 때문에 안전하다. 원래의 값이 보존이 된다.
단점 : 복사를 하기 때문에 메모리가 사용량이 늘어난다.
Call by reference(참조에 의한 호출)
장점 : 복사하지 않고 직접 참조를 하기에 빠르다.
단점 : 직접 참조를 하기에 원래 값이 영향을 받는다.(리스크)

H Kim

이전 포스트

모의면접 2주차 - React

다음 포스트