면접 질문 정리_2

박상하·2025년 2월 6일

취업

[HTML/CSS]

🙋‍♂️ CSS 선택자의 우선순위에 대해 설명해주세요.

선택자는 먼저 4가지가 있다.

전체 선택자
타입 선택자
class 선택자
id 선택자

사실 다양한 선택자가 겹쳐서 스타일이 적용된 경우
점수로 측정되어 우선순위가 결정된다고 한다.

필자는 대신 위 4개를 각각 단독으로 사용하였을 때 어떤 선택자가 더 우선순위인지만 정리를 하겠다.

가장 우선순위가 높은건 id일까?

아니다. 사실 !important라는 키워드를 css 속성에 넣어줄 수 있다.

#name{
background-color: tomato
}

#name{
background-color: teal !important
}

name의 배경은 어떤 색일까?
바로 "teal"이 된다.

즉, !important 키워드를 붙이게 되면 가장 우선순위에 놓이게 된다.

#name{
background-color: teal !important;
}

#name{
background-color: tomato;
}

하더라도 name의 배경은 "teal"이 된다.

그런데 important 키워드 보다 더 우선순위를 갖게하는 녀석이 있다.

바로 inline-style이다.

<h1 style="color:red;">첫 줄</h1>

이게 가장 막강한 선택자이다.

정리하면 다음과 같다.

inline-style

!important

id 선택자

class 선택자

type(tag) 선택자

전체(*) 선택자

🙋‍♂️ 페이지의 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야 할까요?

% 단위를 사용하면 된다. 높이, 넓이, 패딩, 마진에 % 단위로 값을 지정해주면 페이지의 크기가 변해도 그 비율은 유지할 수 있다.

[JavaScript/TypeScript]

🙋‍♂️ 생성자에 대해 설명해주세요.

이름부터 생성자,
무엇을 생성할까? 객체를 생성한다고 생각하면된다.

생성자 함수를 만들 때 관례적으로 대문자로 시작한다(반드시는 아님).

function Students(student){
 this.name=student.name
 this.age=student.age
 this.print=()=>console.log(`학생의 이름은 ${this.name} 입니다. 나이는 ${this.age}입니다.`) 
}

const students={
sangha:{
 name:"parksangha",
 age:"24"
},
  ssangha:{
 name:"parkssangha",
 age:"25"
},
  ssangharu:{
 name:"parkssangharu",
 age:"26"
}
}

const students1 = new Students(students.sangha)
students1.print()
// 학생의 이름은 parksangha입니다. 나이는 24입니다.

이런식으로 사용이 가능한게 생성자함수이다.

생성자함수는 객체를 만들 수 있는 함수이고
관례적으로 대문자로 시작한다. 또한 new 키워드를 붙여 생성할 수 있다.

🙋‍♂️ this에 대해 설명해주세요.

this는 자기참조객체이다. 즉, 나를 가르킨다.
이때의 나는 JavaScript에서 호출 방식에 따라 달라진다.

일반함수의 경우

전역객체를 가르킨다.

function YoGa(){
 let num = 123;
 console.log(this) 
}
//window 객체

이때는 window 객체를 가르킨다.
(window 객체는 최상위 객체로 브라우저를 가르킨다고 보면된다.)

메소드로 호출될 때(객체에서 호출될 때)

호출한 객체를 가르킨다.

const Obj={
name:"sangha",
print:function(){
 console.log(this.name) 
}
}
Obj.print()
// sangha 출력

그렇다면 객체 내부의 함수에서 호출하게된다면??

const Obj={
 name:"sangha",
 obj:{
 name:"hasang",
 print:function(){
  console.log(this.name) 
 }
}
}
Obj.obj.print()
// hasang 출력

즉 this는 메서드에서 정말 나를 호출한 녀석을 가르킨다.

클래스에서 this

클래스에서는 인스턴스를 가르킨다.

class Students{
 constructor(name){
   this.name=name
   //여기서 외부로 받아온 name이 인스턴스의 name이 됨
 }
 getName(){
  console.log(this.name) 
 }
}
const student = new Students("sangha")
student.getName()
// sangha

student가 생성되는 순간 this는 student가 됨 ㅋㅋ
student.name은 sangha가 된것 ㅋㅋ

화살표 함수에서 this

화살표 함수에서 this는 바인딩되지 않는다. 즉 정해지지 않는다.

결국 화살표함수 외부의 this를 따르게 된다.

call, this, bind

위 3가지 함수를 통해 this를 임의적으로 할당해줄 수 있다.
예를 들어 화살표함수같은 곳에서 this를 사용하고 싶은데 외부의 this를 할당하기 싫다면? call, apply, bind를 통해 임의의 객체값을 넣어줄 수 있는 것이다.

위 3가지의 차이는

call -> 값 할당 + 즉시실행
apply -> 배열을 인자로 전달 + 즉시실행
bind -> 값 할당 + 즉시실행 X

정리하자면 다음과 같다.

this는 "나" 근데 정해지는 타이밍은 호출방식에 따라 다르다.
1. 일반함수 -> window객체
2. 메서드 -> 나를 호출한 객체
3. 클래스 -> 생성된 인스턴스
4. 화살표 함수 -> 내부에서 바인딩 안되니 외부의 this 값 쓰기
이를 bind, call, apply를 통해서 선언 시점에서 할당해주는 것도 가능하다!!!!!

[React]

🙋‍♂️ Virtual DOM이 무엇인지 설명해주세요.

가상돔을 이해하기 위해 왜 가상돔이 필요한지를 알아야한다.

DOM은 HTML 렌더링 엔진이 만든 트리형태의 html 인터페이스이다.
문제는 DOM을 직접 수정하게 되면 DOM 전체가 재배치되고 재렌더링 된다는 점이다.

그런데 React의 Virtual DOM은 좀 더 부드러운 렌더링이 가능하도록 해준다.
DOM이 전체 재배치/재렌더링이 되지 않고 필요한 부분만 변경이 되는걸 가능하게 한다.

Virtual DOM은 DOM의 복사본이다. js객체의 형태로 메모리에 존재한다.
그렇게 때문에 javascript를 통해 직접 가상돔에 접근을 할 수 없다.

React는 이 js객체의 가상돔을 state가 변경될 때 diffing이라는 알고리즘을 통해 변경되기 이전의 가상돔과 이후의 가상돔을 비교한다.
그리고 비교된 부분만을 찾아 실제 DOM에 적용한다.

즉, 가상 돔을 가구 옮길 때 미니어처라고 생각하면된다.
가구를 직접 하나하나 다 옮기기엔 너무 힘들지 않나..
미니어처를 통해 이전배치와 이후배치를 비교하고 변경된 부분만 최적으로 변경한다.

그럼 다 좋은 거냐고? 그건아니다.
비교하는 과정이 있기 때문에 성능상 DOM을 직접 바꾸는 것보다는 좀 더 시간이 걸릴 수 있다. 하지만 UI/UX의 부분에서 이득이 있다.

Virtual DOM은 가상돔으로 js객체의 형태로 메모리상에 존재합니다.
이 가상돔을 통해 state가 변경되면 diffing이라는 알고리즘을 통해 변경된 부분만을 비교해 실질적으로 변경된 부분을 DOM에서 변경합니다. 사용자는 깜빡임 없이 변경된 부분만 변경되는 UI/UX를 경험할 수 있습니다.

🙋‍♂️ JSX에 대해 설명해주세요.

JSX는 JavaScript Syntax Extension의 약자로
자바스크립트 확장 문법이다.
하나의 파일에서 JavaScript와 Html을 동시에 사용할 수 있고
이를 통해 개발 능률을 높일 수 있다.
특히, 컴포넌트 기반의 개발을 가능하게 하는 가장 큰 요소로 생각된다.
JSX는 빌드과정에서 Babel에 의해 트랜스 파일링이 되고
JavaScript로 변경된다.