🌱 기술 면접이란?
-
정의 : 개발자로서 기술적 직무 역량을 충분히 갖추었는지 판단하는 모든 면접 형태
-
목표 : 궁극적으로 면접관이 “나랑 같이 개발할 수 있을까?”를 확인하는 과정이다. 면접자가 “정말 잘 아는가?”, “정말 잘 하는가?”로 귀결된다.
🌿 프론트엔드 기술 면접 종류
- 이력서 기반 질문형 : 신입 개발자는 아직 회사에서 이룬 기술적 성취가 없기에 개발 프로젝트, 깃허브, 기술 블로그, 이전 경험 등을 중점적으로 보게 된다.
ex) "개발 프로젝트 A에서 React를 사용한 특별한 이유가 있나요?"
- 기본 개념 질문형 : 프론트엔드 개발자가 꼭 알아야 하는 기술 용어 설명. "면접자가 과연 진짜 이 개념을 잘 알고 응용할 수 있는가?”에 대해서 알고 싶어하기 때문에 해당 질문을 넘어 추가로 더 알면 좋은 내용까지 준비하면 좋다.
ex) "클로저에 대해서 설명하세요."
- 알고리즘 문제 해결형 : 코딩테스트에 주로 나오는 알고리즘 문제를 제시하고, 면접자는 문제를 풀고 면접관은 푸는 과정을 지켜보면서 면접자를 평가한다. 면접관이 없고, 기술 면접용 플렛폼을 통해 자동으로 평가하기도 한다.
ex) 이진 트리 뒤집기 문제
- 간단한 실무 문제 해결형 : 실무에서 쉽게 겪을 만한 문제를 코딩으로 어떻게 풀 수 있는지 확인한다. 면접자는 문제를 풀고 면접관은 푸는 과정을 지켜보면서 면접자를 평가한다. 면접관이 없고, 기술 면접용 플렛폼을 통해 자동으로 평가하기도 한다.
ex) JSON 데이터를 브라우저에 보여주기, debounce 구현하기
- 미니 프로젝트 제작형 : 면접 전에 회사에서 미리 2-3일 정도를 주고, 작은 개발 프로젝트를 요구한 후, 해당 프로젝트를 기반으로 질문한다.
ex) IMDB 영화 Top 100을 조회할 수 있는 프로젝트 제작
🌱 기술 면접 학습법
- 제시되는 단답형 질문이나 본인이 작성한 프로젝트 기술 면접 질문에 대한 짧은 정답을 작성하기
Q : 스코프에 대해서 설명해보세요.
A : 스코프는 변수가 접근할 수 있는 범위입니다. 한 스코프 범위 내에서 외부 스코프의 변수에는 접근 가능하지만, 내부 스코프의 변수에는 접근이 불가능합니다.
- 예상되는 꼬리 질문을 준비하기
- 자바스크립트에서 function scope, block scope의 차이는?
- 자바스크립트에서 lexical scope와 dynamic scope의 차이는?
- var로 선언된 변수는 function scope, block scope중 어떤 scope를 가지는가?
- 위의 질문들에 대해 설명하기 위한 풍부한 사례를 자신의 언어로 준비하기
"var로 선언된 변수는 function scope를 가집니다.
특히 for문을 사용할 때 이 차이가 두드러지는데, for문의 중괄호는 block scope지 function scope가 아니기 때문에 for문의 초기화식에 var를 사용하는 경우, function scope내에서 var로 선언된 변수가 변경될 수 있습니다. 이런 가능성을 최대한 배제해야 예측 가능한 코드를 작성할 수 있기 때문에 var 사용은 다소 위험합니다."
- 다른 사람들은 어떻게 답변하는지 보고 배우기
- 더욱 다양한 지식을 공부할 수 있다.
- 나는 어떻게 답변해야 할지 깊게 고민할 수 있다.
- 기술 블로그로 작성하기
- 가능하면 자신있는 주제에 대해 깊고 자세하게 적는 것을 권장.
- 내 글 하나만 읽더라도 처음 배우는 사람이 쉽게 이해할 수 있을 정도로 명쾌하고 논리적으로 작성하도록 노력.
- 어렴풋이 알고 있는 것이 아니라, 결론은 간명하게, 설명은 구체적으로 자신의 언어로 설명할 수 있어야 함.
🌿 튜토리얼
Step 1. 질문을 고른다
- 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.
Step 2. 답변을 한 마디로 정리한다.
const는 초기 할당된 값이 바뀔 수 없는 블록 범위의 상수 선언 키워드로, 재할당은 불가능 하지만, 요소나 속성은 추가할 수 있습니다.
Step 3. 해당 질문의 중요한 포인트를 2~3개 선정한다.
- 그래서 정확히 왜 요소나 속성을 추가할 수 없나요?
예를 들어, const 변수에 객체를 할당하면 객체를 가리키는 주소 값이 할당되고, 이 값은 불변입니다. 하지만 요소나 속성을 추가하거나 변경하는 행위는 const에 할당된 값이 아니기 때문에 가능합니다.
Step 4. 답변을 중요 포인트와 함께 다시 정리한다.
정리하면, const 변수는 선언 시 주소값이 할당되며 주소값 자체는 재할당이 불가능하나, 요소나 속성을 추가하거나 변경하는 행위는 가능합니다.
Step 5. 면접 답변을 녹화하고 스스로 피드백한다.
- 작성한 답변을 보면서 카메라를 보고 답변한다.
- 제대로 힘 있게 읽는 것에 집중한다.
- 자신의 시선이나 행동, 자세 등을 모니터링 한다.
-
면접 질문과 답변의 키워드만 적어놓고 카메라를 보고 답변한다.
- 내가 쓴 글을 직접 보지 않고도 떠올리면 말할 수 있어야 한다.
- 답변의 내용이 100% 떠오르지 않았을 때, 어떻게 자신의 언어로 바꿔서 답변할 수 있는지 고민한다.
- 자신의 시선이나 행동, 자세 등을 모니터링 한다.
-
면접 질문만 적어놓고 카메라를 보고 답변한다.
- 키워드와 답변 모두 머리에서 입으로 표현할 수 있게 연습한다.
- 답변의 내용이 100% 떠오르지 않았을 때, 어떻게 자신의 언어로 바꿔서 답변할 수 있는지 고민한다.
- 자신의 시선이나 행동, 자세 등을 모니터링 한다.
🌿 Self Check List
- 잘 모르는 내용에 대해서 모르는 부분을 인정하고 아는 부분까지는 최선을 다해 설명하려고 노력했나요?
- 추측성 단어(~같아요.)가 아닌, 자신감 있는 단어(~입니다.)로 답변하고 있나요?
- 몸을 베베 꼬거나 다른 데를 보거나 하는 나쁜 자세를 취하지 않았나요?
- 질문을 잘 이해하고, 질문의 요지에 정확하게 답변했나요?
- 해당 개념 설명이 간단 명료한가요?
- 개념 설명과 예시가 단순 암기가 아니라 자신의 언어로 충분히 풀어 설명 되었나요?
- 두괄식으로 개념을 설명하고, 그에 따른 예시를 풀어서 설명하고 있나요?
- 개념 활용 예시가 구체적이고 풍부했나요?
- 잘 모르는 내용에 대해서 불명확하게 설명한 부분이 있었나요?
- 정확한 CS 용어(ex. 변수를 만들어서 값을 넣어요. → 변수를 선언하고 값을 할당합니다. 등) 를 사용해서 답변했나요?
🌱 질문 리스트
🌿 HTML
-
일반적으로 CSS를 불러오기 위해
<link>요소를<head>요소의 자식 요소로 하고, JavaScript를 불러오기 위해<script>요소를<body>요소가 끝나기 직전에 위치시키는 이유가 무엇인가요? -
<li>요소는 왜<ul>요소의 자식 요소여야만 하나요? -
id 속성과 class 속성의 차이에 대해서 설명해주세요.
🌿 CSS
-
CSS box model에 대해서 설명해주세요.
-
간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)
-
간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?
div.author-container
+--------+------+------+
| 글쓴이 | 빈칸 | 공유 |
+--------+------+------+
🌿 JavaScript
-
스코프에 대해서 설명해주세요.
-
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.
-
원시 자료형과 참조 자료형에 대해서 설명해주세요.
얕은 복사와 깊은 복사에 대해서 설명해주세요.
🌿 DOM
-
innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.
-
event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.
🌱 알게된 점 & 느낀 점
- 나는....한낱....중생일 뿐이다.....
🌱 추가 학습
- 섹션 1 끝난 김에 첨부터 복습 함 쫙 돌자...
