면접 질문 정리_1

박상하·2025년 2월 5일

취업

이직을 준비하며 면접 준비를 해보오자

질문 리스트 정리 블로그

위 블로그에 받으셨던 좋은 질문들이 많이 정리되어있다 !

이번 달 나의 목표: 면접 질문 최소 100개 정리하기

HTML/CSS, JavaScript/TypeScript, React, CS 로 나누어서 정리해보겠다.

[HTML/CSS]

🙋‍♂️ [px, em, rem][vw, vh] 의 차이에 대해 설명해 주세요.

px은 절대단위 , em과 rem은 상대단위

특히

em: 부모 요소의 font-size를 기준으로 배율 적용
rem: 루트 요소의 font-size를 기준으로 배율 적용

만약 부모 요소의 font-size 가 20px라면?
1em은 20px가 된다.

1rem은 어떻게 될까?

html{
font-size: 12px;
}

.container{
font-size:24px;
width:10em; /* 10 × 24px = 240px */ 
}

.button{
width: 10rem; /* 10 * 12px = 120px */
}

이렇게
em -> 부모요소의 font-size를 따른다.
rem -> Root의 font-size를 따른다.

vw -> viewpoint width
vh -> viewpoint heigh

즉, 사용자의 화면 사이즈가 1280*720 이라면

1vw ->12.8px
1vh -> 7.2px

가된다.

100vw -> 1280px
100vh -> 720px

1vw -> 사용자 화면 기준 가로 1/100 px
1vh -> 사용자 화면 기준 세로 1/100 px

🙋‍♂️ 반응형 브레이크 포인트는 어떻게 잡으시나요?

사용자의 요구사항에 따라 다르겠지만
보통의 4가지로 나누어 잡는 편입니다.

이때 Tailwind의 breakPoint를 참고하는편이다.


{
  sm: '640px',  /* 작은 태블릿 */
  md: '768px',  /* 일반 태블릿 */
  lg: '1024px', /* 노트북 */
  xl: '1280px', /* 데스크탑 */
}

그럼 적응형과 반응형의 차이는?

반응형

유동적인 크기 변환
높은 유연성
한 가지 코드로 모든 화면 대응

적응형

고정적인 크기 변환
낮은 유연성
디바이스 별 최적화된 디자인 가능

정리하자면

좀 더 다양한 기기에 대응하고 싶다면 반응형을
특정 디바이스에 최적화하여 대응하고 싶다면 적응형을 사용해 볼 수 있을 거 같다.

[JavaScript/TypeScript]

🙋‍♂️ JavaScript는 어떤 언어인가요?

JavaScript는 매우 유연한 언어이다. 초기에는 브라우저를 제어하기 위해 사용되는 언어였지만 Node.js의 출현으로 서버, 게임 등 다양한 분야에서 사용될 수 있다.

또한 인터프리터 언어이다. 다른 컴파일 언어와 다르게 런타임 환경에서 한 줄씩 해석되어 실행된다. 별도의 컴파일 단계가 필요없다. (TS나 JSX를 사용하지 않는 이상..)

동적으로 타입이 지정된다. 따로 타입을 지정해주지 않아도 된다.
이는 장점이 될 수도 단점이 될 수 도있다. 왜냐하면 개발단계에서 타입으로 발생된 오류를 제어할 수 없기 때문이다. 이를 보완하기위해 TypeScript가 생겨난 것이다.

싱글스레드 비동기언어이다. 정확하게는 자바스크립트를 읽는 엔진이 한 번에 하나의 일만 처리할 수 있고 동기적인 코드 외에 비동기적 코드가 발생했을 때 기다려주지 않고 비동기함수의 경우 순서를 보장해주지 않는다. 그래서 JavaScript는 콜백, Promise객체, async await 문법을 활용하여 해당 순서를 보장해줄 수 있다. 자바스크립트는 거침이 없다.

동기적 함수 콜 스택에 하나씩 담아둔다. 그리고 블록 단위로 하나씩 처리하게 되는데 이때 비동기 함수를 만나게되면 Web API에서 처리하도록 하고 해당 비동기 작업이 완료되면 테스크큐에 담아둔다. 그리고 콜스택이 모두 비워지게 되면 그때 이벤트루프를 통해 테스크큐에서 하나씩 꺼내 콜스택에 담고 처리한다.

🙋‍♂️ 변수선언, 초기화, 할당에 대해 설명해주세요.

변수선언 -> 메모리를 확보하겠다.
초기화 -> 변수에 어떤 (초기)값을 저장하겠다.
할당 -> 해당 변수에 어떤 값을 저장하겠다.

이때 선언과 동시에 초기화가 이루어지는 키워드(var, let, const)가 있다.
바로 var와 let이다.

console.log(first)
var first;

위 코드의 결과는 어떻게 될까?
undefined가 찍힌다.

console.log(first)
let first;

위 코드의 결과는 어떻게 될까?
참조에러가 발생한다.

이건 호이스팅, 실행컨텍스트와 관련이 있고 차후에 정리를 따로 진행하겠다.

간단하게 let도 var와 같이 초기화가 이루어진다. undefined로.
그런데 초기화가 이루어지는 타이밍이 var와 다르다.

var는 실행컨텍스트가 형성되는 시점에 초기화가 이루어지고
let은 할당되는 시점(실행되는 시점)에 초기화가 이루어진다.

const second;

위 코드의 결과는??
오류가 발생한다. const는 선언과 동시에 초기화를 해주어야한다.
즉, 선언만 해줄 수 없는 친구다.

🙋‍♂️ 데이터 타입이란?

데이터의 종류이다. 데이터 타입에 따라 할당되는 메모리의 크기가 다르다.

그런데 JavaScript는 실행환경에서 동적으로 데이터 타입이 할당되기 때문에 데이터 타입에 따른 메모리 크기를 신경쓸 수 없다. (TypeScript를 사용하면 가능)

원시타입 string, number, boolean, null, undefined
참조타입 object, array, set, map, function 등이있다.

원시타입은 값이 메모리에 직접 저장되고
참조타입은 값이 메모리에 참조 주소로 저장이된다.

🙋‍♂️ Type과 Interface의 차이점에 대해 설명해주세요.

병합성에서 큰 차이를 보인다

Interface는 재선언을 통해서 interface를 병합할 수 있다.

interface Props{
 name:string;
 age:number;
}

interface Props{
email:string;  
}

이렇게 했을때 Props는

name, age, email 정보 모두 저장(병합)하게된다.

interface Props{
 name:string;
 age:number;
 email:string;
}

하지만 type의 경우는 재선언을 통해 병합되지 않는다.
대신 더 넓은 범위의 타입을 커버할 수 있다.

// 유니온 타입
type MyType = string | number;

// 조건부 타입
type IsString<T> = T extends string ? "Yes" : "No";
type Test1 = IsString<string>; // "Yes"
type Test2 = IsString<number>; // "No"

// 튜플 타입
type TupleType = [string, number, boolean];
const data: TupleType = ["Alice", 25, true];

병합이 불가능할뿐 확장은 가능하다.

type Person = {
  name: string;
};

type Employee = Person & {
  employeeId: number;
};

const emp: Employee = {
  name: "Jane",
  employeeId: 123
};

[React]

🙋‍♂️ 리액트에 대해 설명해주세요.

리액트는 JavaScript의 SPA 라이브러리

JSX문법을 사용하여 컴포넌트 단위로 개발이 가능하다. 재사용성이 좋은 컴포넌트를 개발할 수 있다.

diffing 이라는 알고리즘을 통해 변경된 state를 추적하고 VirtualDOM을 활용하여 변경된 state가 있는 요소만 rerendering 할 수 있다.

CSR를 지원하여 클라이언트에서 렌더링이 가능하다. 이를 통해 부드러운 UI/UX를 경험할 수 있다.

Props를 부모에서 자식 (단방향)으로 공유하며 재사용성이 좋은 컴포넌트를 개발할 수 있다. ConTextAPI나 전역상태관리 라이브러리를 사용한다면 양방향으로 state를 공유할 수도 있다. 하지만 이때 state가 변경된 컴포넌트는 재실행되니 주의하여 사용해야한다.

🙋‍♂️ 리액트의 장점/단점은 무엇이있나요?

장점

재사용성이 뛰어난 컴포넌트 개발 가능
CSR로 부드러운 UX/UI 제공
VirtualDOM과 diffing알고리즘을 통한 최적화된 렌더링
CustomHook을 통해 로직의 분리가 가능
JSX로 개발하여 개발 능률 향상
routing 기능 제공을 통해 간단한 페이지 전환
다양한 Hook을 통한 개발 편의성 향상
다양한 라이브러리를 통해 편리한 개발환경

단점