심화 Script 와 CSS 면접 예상 질문과 답변
CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.
SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 CSS를 확장하는 스크립팅언어인데요. 대규모 프로젝트인 경우 CSS 작업이 크고 고도화 될수록 개발에 불편함이 생깁니다. 그렇기때문에 CSS 작업을 쉽게 해주며 가독성과 재사용성을 높여주어 유지보수가 쉬워지는 장점이 있습니다.
CSS, SCSS, SASS의 차이점은 무엇인가?CSS, SCSS, SASS를 리액트와 사용할 거면 무엇을 쓸 건지 설명하세요.
문법적인 내용에서 sass의 경우 중괄호와 세미콜론을 사용하지않는 등의 약간의 차이점을 가지고있습니다. 리액트와 함께 사용한다면 css 문법을 거의 그대로 사용하며, 더 넓은 범용성과 CSS의 호환성 등의 이유가 있다.
CSS, SCSS, SASS를 리액트와 사용할 거면 무엇을 쓸 건지 설명하세요.
레퍼런스와 많이 쓰이고있는 scss를 사용할거같습니다.
id와 class 셀렉터의 차이점에 대해 설명하세요.
첫번째로는 클래스는 같은 이름으로 여러개 생성이 가능고 아이디는 중복으로 사용할 수 없어서 페이지에 한번만 사용해야합니다. 그래서 공통적인 여러개의 태그에 레이아웃을 적용할때는 class를 사용하며, 고유한 값이나 중복되서는 안되는 기능등에는 id 를 적용합니다.
CSS 박스 모델에 대해서 설명하세요.
박스 모델의 대표적인 태그는 div 이며, 이 박스 모델은 모든 엘리먼트들은 공간을 차지하는데, 이 엘리먼트들이 차지하는 면적을 결정하는 개념입니다. 박스 모델은 content padding border margin 4가지 속성으로 이루어져있습니다. 컨텐츠는 내용을 표시하는 영역이며, 패딩은 컨텐츠 내용과 보더 사이의 여백을 말합니다 보더는 패딩과 마진의 경계에 있는 테두리선으로, 박스의 외각이 되는 부분입니다 마진은 보더와 다른 요소 사이의 여백입니다
CSS에서 px, em, rem, vh, vw 단위들의 차이점은 무엇인가요?
px은 가장 기본적으로 사용되는 단위입니다. 이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이 사용자가 임의로 정의할 수 없는 고정된 값을 말합니다. css에서 단위를 지정하는 기준단위 입니다. em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다.rem은 root em의 약자입니다. 즉 위와 같은 공식을 가장 최상단(root) 기준으로 맞춘다는 의미이며,최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미합니다.
vh와 vw는 각각 vertical height, vertical width의 약자입니다. 이것들은 뷰포트(화면의 크기)의 높이와 너비에 비례합니다. 반응형 서비스에 많이 쓰이는 단위 입니다.
CSS 레이아웃 기법의 종류와 특징에 대해서 설명하세요.
css 레이아웃 기법에는 대표적으로 flex box 와 grid 등이 있으며, 플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성됩니다.
flex는 단일 레이아웃 방향이므로 flex 항목은 행 또는 열로 정렬됩니다.
그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다. 제가 자주쓰는 기법은 플렉스인데 사용하기 쉬운 이유도있고, 그리드가 플렉스보다 성능을 더 잡아먹기때문에 플렉스를 선호합니다.
CSS in JS(styled component)의 장단점에 대해서 설명하세요.
CSS-in-JS는 스타일 정의를 css나 scss 파일로 따로 관리하지않고, JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. css in js 의 장점으로는 CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없습니다. avaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다. 현재 사용중인 스타일만 DOM에 포함한다. CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다
단점으로는 새로운 의존성 별도의 라이브러리를 설치해야 하므로 번들 크기가 커져 부담될수 있으며, CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다는 단점이 있습니다.
position 속성과 z-index의 연관성에 대해 설명하세요.
position 속성은 태그를 어떻게 위치 시킬지를 정의하고, z-index는 어느 객체가 앞으로 나오고 뒤에 나올지 배치 순서를 결정하는 속성입니다. postion 에는 static,absolute,fixed,realtive 등이 있습니다. z index는 기본적으로 position 값이 static이 아닌 경우 지정가능합니다.
event loop에 대해서 설명하세요.
자바스크립트의 큰 특징 중 하나는 '단일 스레드' 기반의 언어라는 점이다. 스레드가 하나라는 말은 곧, 동시에 하나의 작업만을 처리할 수 있다는 말이다. 하지만 실제로 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 걸 볼 수 있다. '자바스크립트는 어떻게 동시성(Concurrency)을 지원하는 걸까 이때 등장하는 개념이 바로 '이벤트 루프'이다 즉, 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다
callback, promise, async/await 의 특징과 차이점에 대해서 설명하세요.
자바스크립트에서는 비동기 처리를 다룰 수 있는 방법에는 여러가지가 있다. 주로 callback, Promise, async/await 를 활용한다. Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다. 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체입니다. promise 의 3가지 상태에는 Pending (대기) Fulfilled (이행) Rejected (실패) 가 있습니다. async await 은 가장 최근의 나온 비동기 처리 문법으로 기존의 callback 이나 Promise 의 단점을 해소하고자 만들어졌다. await 는 async 함수 안에서만 동작한다는 특징이 있습니다 각각의 차이점은 Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야합니다. 또한 Promise와 callback 은 callback 지옥 Promise의 .then() 지옥의 가능성
코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
async/await 은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해 하기 쉽다는 장점이 있습니다.
Blocking과 Non-Blocking의 차이점은 무엇인가요?
Blocking / Non-blocking 은 호출된 함수가 호출한 함수에게 제어권을 바로 주느냐 안주느냐, 이때 제어권이란 자신(함수)의 코드를 실행할 권리 같은 것이다. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려준다. 블로킹은 A 함수가 B 함수를 호출하면, 제어권을 A가 호출한 B 함수에 주는것을 말하고, 논블로킹은 A함수가 B함수를 호출해도 제어권은 그대로 자신이 가지고 있는것을 말한다.
Synchronous execution과 Asynchronous execution의 차이점은 무엇인가요?
sync 와 async 즉 동기와 비동기의 차이는 호출되는 함수의 작업 완료 여부를 신경쓰는지의 여부의 차이이다. 함수 A가 함수 B를 호출한 뒤, 함수 B의 리턴값을 계속 확인하면서 신경쓰는 것이 동기이다. 함수 A가 함수 B를 호출할 때 콜백 함수를 함께 전달해서, 함수 B의 작업이 완료되면 함께 보낸 콜백 함수를 실행한다.
nodejs는 싱글쓰레드인가요?
자바스크립트 실행하는 스레드는 단 하나이므로 js 를 기반으로 만들어진 Node를 싱글스레드라고 한다. 그리고 그 싱글스레드가 바로 이벤트 루프이다. 하지만 node.js에서도 추가 스레드가 필요한 경우에는 라이브러리는 멀티스레딩이 가능하다.
nodejs는 event-driven architecture 인가요
맞습니다. 노드가 좋은 성능을 발휘할수있는 것이 비동기 이벤트 기반 아키텍처 때문입니다.
이벤트 기반이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식이다.이벤트로는 클릭이나 네트워크 요청 등이 있을 수 있습니다. 이벤트 기반 모델에서는 이벤트 루프(Event Loop)가 이벤트를 처리하며, 여러 이벤트가 동시에 발생했을 때 어떤 순서로 콜백 함수를 호출할지를 이벤트 루프가 판단한다.
this와 dynamic scoping에 대해 설명하세요.
자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this 바인딩은 함수가 호출되는 방식에 따라 동적으로 결정된다. 즉, this 는 상황에 따라 가리키는 대상이 다르다. dynamic scope 선언은 런타임 도중에 실행 컨텍스트나 호출 컨텍스트에 의해 결정 됩니다.
객체 지향 프로그래밍이란 무엇인가요?
프로그램을 객체 라는 기본 단위로 나누고 객체들 간의 상호 작용으로 문제를 해결하는 방식독립성이 높은 객체들을 작은 단위부터 만들고, 그 작은 단위들을 재사용해가며 더 큰 객체들을 만드는 방식으로, 상향식(Bottom-up) 방식이라고 할 수 있다.
(꼬리질문) 그렇다면 객체 지향의 특징은?
- 캡슐화 2. 상속 3. 다형성이 있음
(꼬리질문) 그렇다면 캡슐화란?
특정 모듈의 세부 구현을 감추고 외부로의 노출을 최소화하여
모듈의 응집도를 높이고 모듈 간의 의존도를 떨어뜨려
재사용할 수 있는 모듈으로 만드는 것.
정보은닉과 추상화의 개념이 녹아있다고 생각하면 된다.
(꼬리질문) 그렇다면 상속이란
자식 클래스가 부모 클래스의 기능을 그대로 물려받는 것을 의미.
자식 클래스는 부모 클래스의 기능을 물려받으며
새로운 기능을 추가하거나
기존에 부모 클래스가 가진 기능을 일부 수정하는 등(오버라이딩)
캡슐화를 유지하면서 개념을 확장시킬 수 있다.
(꼬리질문)그렇다면 다형성이란?
클래스 상속 구조 내, 같은 이름의 메소드를 사용하더라도 맥락에 따라 다른 기능을 수행하는 것을 의미한다. 하지만 자바스크립트에서는 오버라이딩만 구현되어있고 오버 로딩은 불가하나 타입스크립트로 오버 로딩을 구현할 수 있어 이를 보완할 수 있다.
Prototype Chaining
프로토타입 체인은 proto의 특징을 이용하여, 부모 객체의 프로퍼티나 메서드를 차례로 검색하는 것을 의미한다.
IIFE (즉시 실행 함수 표현)
IIFE 는 즉시 실행 함수 표현 이며, 정의되자마자 즉시 실행되는 Javascript Function 를 말합니다. 즉시 실행함수를 사용하는 이유는 자바스크립트 전역 스코프에 정의된 것은 코드 내의 어디서든지 접근이 가능하다는 것이 문제가 되고는 하는데, 이때 외부에 공유되면 안되거나 충돌날 위험이 있는 경우 즉시 실행 함수를 통해 해결하고는 합니다.
setTimeout 에서 this는 왜 전역을 가리키는지 설명하세요.
일단 setTimeout은 시간 지연을 일으켜 함수를 '비동기적'으로 실행시키는 함수이다. 이 함수는 명시적으로 항상 전역 객체(window)를 this 바인딩 합니다.
스택과 힙의 차이에 대해서 설명하세요.
자바스크립트는 메모리힙괴 콜스택이 있는데 메모리힙은 참조타입 객체 등 데이터가 저장되는곳이고 메모리할당이 일어나는곳입니다. 스택은 원시타입 데이터가 저장되는곳이고 실행 콘텍스트를 통해 변수 식별자 저장 스코프 체인 및 this 관리, 코드 실행 순서 관리 등을 수행합니다.
call-by-value에 대해서 설명하세요.
함수의 호출방식이라고함 cCall by Value란 값이 그대로 복사 되는 것을 의미합니다. JS에서는 원시데이터(숫자, 문자 등등)의 경우 값의 복사 Call by value가 일어납니다.
