아래에 설명된 모든 것은 내 주관적인 의견입니다

본 이야기는 후보자들을 위한 직접적인 안내서가 아니며 현재 기술 면접에 대한 반성으로 기능합니다. 이 정보를 활용하는 방법은 여러분이 결정해야 합니다.

일반적으로 검색 결과에서 자유롭게 찾을 수 있는 유명한 면접 질문들이 어떤 실용적인 적용도가 없다는 점을 말하고, 나에게는 회사가 후보자를 선발함에 있어 태만한 조직의 조짐이 있다고 생각합니다. 이렇게 함으로써 어떤 팀이든 관련된 질문을 하지 않아 모든 시니어 개발자를 상실할 수 있습니다.

대규모 기업에서 기술 면접관이 대상 팀이나 프로젝트의 일원이 아닐 수도 있고 기술 면접이 큰 선정 프로세스 중 하나일 수 있어서 면접이 추상적일 수 있다는 것을 이해합니다.

이러한 질문들은 소규모부터 중간 규모의 기업의 채용 프로세스에 더 적합합니다

인사 면접 (0.5–1시간) — 기술 면접 (1.5–2시간) — 매니저 면접 (선택사항) — 제안

나는 제시한 질문들이 항상 나만 해당되었거나 내가 면접에 참여하기에 고르지 못한 기업을 선택했다는 것은 배제하지 않습니다. 나는 질문들 중 일부만을 언급하고 있지만 면접 자체나 접근 방식에 대해서는 언급하지 않았습니다. 또한 특정 주제에 대한 대안적인 질문들을 제안합니다.

이벤트 루프는 어떻게 동작할까요?

어떤 수준의 구직 면접에서든 가장 성가신 질문 중 하나입니다. 하지만 매번 이 질문에 대답하는 것에 지치지 않았나요?

물론, 성경의 구절처럼 답을 외워 곧은 미소로 대답할 수 있습니다. "어떤 이벤트가 발생하면, 이를 콜 스택에 넣고, 그 다음에는 콜백 큐로 이동하며, 이러이러한 절차를 거칩니다."

이벤트 루프에 대해 성공적으로 설명하고 소중한 체크 표시를 받았습니다 ✅. 다음 질문 또는 이지금.

JS가 이 메커니즘을 필요로 하는 이유를 이해하고 계신가요?

이벤트 루프에 대한 기본적인 이해는 "JS에서 비동기성이 어떻게 제공되는가?"라는 질문에 답하는 것이 아니라 "JS에서 왜 이벤트 루프를 통해 비동기성이 제공되는가?"에 대한 것입니다.

이 두 가지는 근본적으로 다른 질문들입니다. 차이를 느끼시나요? 두 번째 질문은 당신의 경험, 인식, 그리고 개발에 대한 전망에 기초하며, 당신의 답변에서 핵심이 될 키워드는 "싱글 스레드"일 것입니다.

인터넷의 기본 인터뷰 가이드와 프론트엔드 개발의 보급화로 인해 원하는 지식을 실제 지식으로 속이려는 주요한 포인트가 포멀하게 제시되었습니다.

"자바스크립트의 '싱글 스레드성' 제한을 우회하고 별도의 스레드에서 계산을 수행하는 방법은 무엇일까요?"라고 물어보는 것을 시도해보세요.

"콜 스택(Call Stack)"이나 "콜백 큐(Callback Queue)"를 알고 있는 것이 도움이 되나요? - 아니요. 아마 고려할 만한 사항이라고 생각해요.

마이크로태스크와 매크로태스크 실행 큐

테이블 태그를 Markdown 형식으로 변경하세요.

이 작업의 답변은 브라우저에서의 렌더링에 미치는 영향을 이해하는 데도 책임이 있습니다.

console.log에서 실행 우선 순위의 지식으로 이 질문에 답할 수 있을까요?:

여러 동시 이벤트가 발생해도 인터페이스가 빠르고 부드럽게 유지되도록 하는 방법은 무엇인가요?
requestAnimationFrame을 사용하는 것의 목적은 무엇인가요?
클릭 시 전체 인터페이스와 상호작용을 차단하고, 이를 피하는 방법은 무엇인가요?

화살표 함수 대 일반 함수

이 질문에는 아무런 문제가 없지만, 누가 묻는지에 따라 다를 수 있어요. 만약 "이 맥락의 외부 접근성과 함수 실행 가능성에 대해"라는 답을 하면 괜찮아요. (네, 매개변수 사용에 대해 언급해도 괜찮아요)

하지만 이 질문은 단순한 면접관이 아니라, 당신의 답에 충분히 얻어 말이 안되는 "학교 교사 꼬꼬댁"가 하는 질문입니다. 당신은 어색한 침묵 속에서 앉아 있고, 그는 함수 선언의 두 가지 방법 사이의 차이를 기다리고 있으며, "시니어 개발자는 모든 것을 알아야 한다!"라고 생각하기 때문에 힌트조차 주지 않아요.

그가 무엇을 기다리고 있는 걸까요? — 그가 일반 함수에서 생성자 사용에 대해 이야기하길 기다리고 있어요. 네, 맞아요, 2024년이라고 해도 ES5 구문에 대해 이야기해야 할 때가 왔어요.

이 구성을 얼마나 자주 사용하시나요?

function RegularFuncBird(name, color) {
  this.name = name
  this.species = color
  console.log(this)
}

new RegularFuncBird("앵무새", "파란색")

클래스? — 이게 뭐에요?! — 함수들이 필요해요.

네, 당신은 "JS의 클래스들은 '구문적 설탕'이라고 할 수 있고 이는 옛날을 기리는 방법이라고 말할 수 있어요".

하지만 솔직히 말하자면, 이 지식은 오늘날 더 이상 관련이 없어요. 지원자가 실용적인 방법과 사용법의 차이를 말했다면, 그건 일하기에 충분하다고 봐야 해요.

서로 다를 필요가 없어요. 당신의 역사 지식은 오직 당신을 위한 것뿐이에요. 진보는 멈추지 않고 새로운 지식으로 대체돼요.

Var vs const & let

ES5 구문에 관해 이야기를 시작했으니 계속해보겠어요.

인기 있는 면접 질문 중 하나예요. 여러분께 물어보면서 대화가 시작되죠. 어떤 var가 나쁜 것인지부터 논의하게 되고, 스스로 생각하고 있는 것, 그리고 const와 let이 좋은 것이라고 합니다.

이 질문의 실용적 가치는 미미합니다.

회사가 var를 사용하는 프로젝트를 진행하고 있을까요? — 네

우리는 var이 얼마나 나쁜지에 대해 오랜 시간 논의할 수 있지만, 정말 변수에 대한 이 질문을 신경쓴다면:

객체와 배열과 함께 동작하는 const에 대해
지원자가 "const 먼저" 원칙을 어떻게 이해하는지에 대해 물어보는 것이 나을 겁니다.

내 의견으로는, 지원자의 답변은 많은 사용 사례를 다룰 것이며, 이 문법이 어떻게 작동하는지에 대한 지원자의 이해를 명확하게 보여줄 것입니다.

메모리 누수 감지

저의 한 직무 면접 중에 흥미로운 질문을 받았어요 — "프로젝트에 참여하게 되면 즉시 애플리케이션에서 메모리 누수를 찾으려고 하는 상황에서 주어진 업무는 아닌데 QA가 그 작업을 할 것입니다. 이때 어떻게 메모리 누수를 찾는 프로세스를 그에게 설명하겠습니까?"

어쨌든, 상황을 추상화하여 질문을 이해해보면, 이는 결과에 대한 해결책과 탐색을 묘사하지만 원인의 방지에 대해서는 이야기하지 않는 것 같아요.

네, 시간이 지남에 따라 증가하는 메모리 단편을 발견했고, 누출된 코드 영역을 찾아냈지만, 이후에 무엇을 해야 할지 모르겠죠. 단지 프로파일러를 실행하는 방법만 알 뿐이에요.

내 의견으로는 더 나은 질문은 "메모리 누수를 발생시키지 않는 안전한 코드를 어떻게 작성하나요?"입니다.

다루어져야 할 주요 포인트들:

addEventListener(이벤트, 핸들러) - removeEventListener(이벤트`, 핸들러)
const interval_Id = setInterval() -` cleanInterval(interval_Id)
"가비지 콜렉터"와 장기 레퍼런스의 이해

문제의 원인을 찾고 고치는 방법은 모르더라도, 문제를 발생시키지 않는 방법을 안다면 꼭 알 필요가 없어요!

자바스크립트의 타입

쓸모 없는 질문들에 대한 내가 가장 좋아하는 섹션입니다:

JS의 주요 타입은 무엇인가요?
왜 null이 객체인가요?
Symbol은 무엇이며 어떻게 사용하나요?
프로토타입이란 무엇인가요?
Number(num)과 new Number(num)의 차이는 무엇인가요?
소수를 더할 때 나머지에 유물이 있는 이유는 무엇인가요?
a == 1 && a == 2 && a == 3를 어떻게 만들 수 있을까요?

당신은 시니어 프론트엔드 개발자로서 이런 면접에 앉아 있습니다:

이 목록은 계속해서 나열될 수 있지만, 이러한 질문에 대한 답변은 신뢰할 수 있고 기능적인 프론트엔드 애플리케이션을 개발하는 데 필수적이지 않습니다.

만약 후보자가 "타입(types)"과 관련된 이해력을 확인하고 싶다면, 이와 비슷한 질문들을 하면 좋을 것입니다:

어떻게 값이 배열인지 확인하나요?
값을 boolean 타입으로 캐스팅하는 몇 가지 방법은 무엇인가요?
toString() 및 toJSON() 메서드는 어디에서 오는가요?
obj.key 대신 obj.hasOwnProperty(key)를 사용하는 것이 더 나은 이유는 무엇인가요?
소수점 숫자와 결과 표시와 관련된 특이사항은 무엇인가요?
왜 NaN.isNaN()를 사용해야 하나요?

CORS

어떤 서비스와 통합된 애플리케이션을 개발한 적이 있는 사람이라면 이 오류를 받았을 것입니다. CORS 메커니즘에 대해 꼭 알아야 할 것은 브라우저가 서비스를 호출하는 허용된 도메인과 현재 도메인 간의 일치 여부를 확인한다는 점입니다.

이곳에서 CORS 메커니즘의 역사적 부분과 출현 이유를 찾을 수 있습니다.

여기서 무엇이 잘못될 수 있을까요?

위의 텍스트를 친절한 톤으로 한국어로 번역해 드리겠습니다:

HTTP OPTIONS 요청이 사용되는 이유는 무엇인가요?

HTTP OPTIONS를 호출하는 것은 서비스로부터 해당 서비스에 대한 요청을 허용하는 HTTP 메서드를 브라우저 논리적으로 가져오는 것입니다. 이를 사용자의 최종 빌드에서 직접 제어할 수 없으며, 직접 구성할 수 없는 방법입니다.

CORS에 관한 올바른 질문

개발 중에 브라우저에서 CORS 정책을 우회하는 방법은 무엇인가요?

이 질문은 당신이 이 오류에 익숙하다는 것을 보여주고 동료들에게 해결책을 제안할 수 있다는 것을 보여 줄 수 있습니다. 아래와 같은 해결책을 제안할 수 있습니다:

프록시 구성
특수 브라우저 확장 프로그램
브라우저 정책 비활성화

HTTP OPTIONS 요청이 사용되는 이유를 알면 프런트 엔드 앱을 통합할 때 발생할 수 있는 블로킹 문제를 제거할 수는 없습니다. 이는 백엔드 부분을 개발하지 않기 때문입니다.

마무리

기술 면접은 서로에게 어떤 미래 작업 및 경험을 어떻게 최대한 상호간의 이점으로 활용할 수 있는지 이해하기 위한 양방향 프로세스입니다. 현실에서 떨어져 있는 이론 시험을 2시간 동안 보는 대신, 서로의 경험을 바탕으로 최고의 이점을 얻을 수 있습니다.

주니어 및 중간 개발자 선발에 필요한 기본 사항을 확인하는 것은 시니어 개발자에게는 적용되지 않습니다. 시니어 개발자는 주로 실수를 통해 경험을 쌓는 것입니다.

제가 제안하는 질문을 기반으로 자신에게 물어보세요 — "어떤 유형의 지원자를 원하십니까? 이론에 대답하는 사람인가요 아니면 이를 적용하는 사람인가요?" 이 결정은 모든 이해관계자들에게 이점을 줄 것입니다. 프로젝트에는 단순히 "지식 집합"이 아닌 경험을 갖춘 사람들이 진정으로 참여하게 될 것입니다.

하지만 제 제안은 주요 문제를 해결하지 못할 것입니다 — 시니어 프론트엔드 개발자 역할을 위한 기술 면접이 단 한 번만 진행됩니다. 2시간 동안의 면접에서 후보자의 시스템 설계 기술을 배울 수 없을뿐더러 "실시간 코딩"에 많은 시간을 할애하거나 이론에 시간을 쏟을 수 없을 것입니다.

부가 정보

이 글이 마음에 들 경우 CSS 질문에 관한 두 번째 부분도 작성할 예정이에요

시니어 프론트엔드 개발자 인터뷰에 자주 나오는 단골 질문