Chapter1. 면접 준비하기
면접 시 주의해야할 사항
- 질문의 요지를 파악하지 못하고 장황하게 설명하지 않기 → 간결하고 정확하게 !
- 잘 모르는 것에 대해 아는 것처첨 포장하여 설명하지 않기
- 원리를 이해하지 못하고 질문 답변을 단순 암기 → 원리 이해가 먼저 !
- 특정 기술 스택/프로그래밍 언어를 근거없이 비난하지 않기 → 쌩신입인 내가 어찌 비난하리
- 기본소양을 갖추고 개발에 관심 갖기 → 요즘 개발 현황이나 트렌드에 대해 관심 갖기 !
- 개발지식을 정확히 알고 있기
- 각 기술스택, 프로그래밍 언어를 WhY 사용하는지
- 기초 웹 개발 지식(HTTP 통신, 네트워크)에 대한 이해
- HTML/CSS/JavaScript에 대한 이해
- 사용한 기술에 대한 이해
"전달인자(argument)가 전달되는 과정에 대해서 설명하세요.”
❌ 함수에 전달인자로 값을 넘겨줍니다.
⭕️ 함수 호출 시, 전달인자가 함수의 매개변수로 전달이 됩니다. console.log('hello world')를 콘솔에 입력하는 경우, 괄호 사이의 값 'hello world'가 log 메서드로 전달됩니다.
함수의 호출에 대해서 알고 있다.
메서드 개념에 대해서 알고 있다.
매개변수와 전달인자의 개념적인 차이에 대해서 이해하고 있다.
⇒ 개념에 대해 정확하게 하나씩 이해하는 과정을 위해 잘 기록하고 설명하는 연습 꾸준히 ★
Chapter2. 기술면접이란?
프론트엔드 기술면접 종류
- 이력서 기반 질문형
- 면접자가 기술적으로 어떤 성취를 이뤘고, 정말 자신이 한게 맞는지, 비즈니스적인 성과에 기여했는지
- 신입개발자의 경우는 → 개발 프로젝트, 깃허브, 기술블로그, 이전 경험 등
- 예시) 개발프로젝트 에서 React을 사용한 특별한 이유가 있는가?
- 기본 개념 질문형
- 예시) 클로저에 대해 설명하시오
- 알고리즘 문제 해결형
- 예시) 이진 트리 뒤집기
- 간단한 실무 문제 해결형
- JSON 데이터를 브라우저에 보여주기, debounce 구현하기
- 미니 프로젝트 제작형
- 예시) IMDB 영화 Top 100을 조회할 수 있는 프로젝트 제작하기
⇒ 기술 면접의 목표는 “면접자가 정말 잘 알고, 잘 하는가” 로 귀결된다.
기술 모의 면접 학습법
1. 단답형 질문 + 본인이 작성한 프로젝트 기술면접에 대한 짧은 답변을 미리 작성한다.
Q .스코프란 무엇인가
→ 스코프는 변수가 접근할 수 있는 범위이다. 한 스코프 범위 내에서 외부 스코프의 변수엔 접근이 가능하지만, 내부 스코프의 변수에는 접근이 불가능하다.
2. 예상되는 꼬리질문은 스스로 준비한다.
- 자바스크립트에서 function scope, block scope의 차이는?
- 자바스크립트에서 lexical scope와 dynamic scope의 차이는?
- var로 선언된 변수는 function scope, block scope중 어떤 scope를 가지는가? 등
3. 단답형 질문과 꼬리 질문에 대해 설명하기 위한 풍부한 사례를 → 자신의 언어로 준비
var로 선언된 변수는 function scope를 가진다.
특히 for문을 사용할 때 이 차이가 두드러지는데, for문의 중괄호에는 block scope지 function scope가 아니기 때문에 for문의 초기화식 var을 사용하는 경우, function scope내에서 var로 선언된 변구가 설정될 수 있다.
이런 가능성을 최대한 배제해야 예측 가능한 코드를 작성할 수 있기에 var사용은 다소 위험하다.
4. 기술 블로그를 작성하자
면접 질문 답변을 위한 기술 블로깅을 하자
- 기술 블로깅은 가능한 자신있는 주제에 대해 깊고 자세하게 적는 걸 권장
- 코드를 처음 배운 사람도 쉽게 이해할 수 있을 정도로 명쾌하고 논리적으로 작성
- 예시 기술 블로그) 프로토타입 이해하기 내 맘대로 정리한 함수형 프로그래밍
Chapter3. [Section1의 예상질문]
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메서드는 언제, 왜 사용하는지 설명해주세요.**
Chapter4. 답변하는 Good 방법
1. 우선 답변을 한마디로 정리하라.
2. 그리고 해당 질문의 중요포인트 2~3개를 선정하라
3. 마지막으로 답변의 중요한 포인트와 함께 다시 정리하라.
**Q. 클로저에 대해 설명해주세요.**
1. 클로저는 '함수와 함수가 선언된 어휘적 환경의 조합'을 말합니다.
2-1. 어휘적 환경은 함수가 선언된 주변환경을 의미합니다. 주로 외부함수의 변수가 -> 내부 함수의 어휘적 환경에 포함됩니다. 그래서 내부 함수가 리턴되어도 나중에 클로저의 어휘적 환경에 접근하여 외부 함수의 변수에 접근 할 수 있습니다.
2-2. 클로저는 자바스크립트의 어떤 함수든 가지고 있습니다. 어떤 함수든 전역변수에 접근 할 수 있기 때문이다. 그래서 클로저는 언제나 쓰이고 쓸 수있습니다.
2-3. 자바스크립트에서는 private 메서드를 구현하기 위해서 클로저를 활용할 수 있습니다. 클로저 내에 있는 변수는 외부에서 접근할 수 없기 때문에, 클로저 내에 있는 변수를 활용할 수 있는 private메서드만 따로 노출시켜 인터페이스처럼 사용할 수 있게 됩니다.
3. 정리하면, 클로저는 함수와 함수가 선언된 어휘적 환경의 조함이며, 특히 Private메서드 구현을 위해 알아야 하는 개념입니다.Chapter5. 셀프 피드백 및 체크리스트
💡 면접 질문만 적어두고, 카메라를 보고 답변하자.
셀프 체크리스트
- 잘 모르는 내용에 대해서 모르는 부분을 인정 + 아는 부분까지는 최선을 다해 설명하려 노력하였는가
- 추측성 단어(같아요) ❌ → 자신감 있는 단어(~입니다)로 답변하였는가
- 한번 들었을 때 이해하기 쉬운 언어로 답변하였는가
- 면접 답변 내용이 100% 떠오르지 않을 때 자신의 언어로 바꿔 답변할 수 있는가
- 시간이나 자세가 올바른가
- 질문을 잘 이해하고 질문의 요지를 잘 파악한 답변인가
- 개념 설명이 간단 명료한가
- 개념설명과 예시가 단순 암기가 아닌 자신의 언어로 충분히 풀어 설명이 되었는가
- 두괄식으로 개념을 설명하고, 그에 따른 예시를 풀어서 설명하였는가
- 개념 활용 예시가 구체적이고 풍부하였는가
- 잘 모르는 내용에 대해 불명확하게 설명한 부분은 없었는가
- 정확한 CS용어(변수를 만들어 값을 넣어요 → 변수를 선언하고 값을 할당한다)를 사용해 답변하였는가
Chapter6. 가장 최근에 읽은 개발자 서적은 무엇인가 ?
💡 클린코드(로버트C.마틴) → 리팩터링코드(마틴 파울러) → 커리어스킬(존 소메즈)
한입 크기로 베어먹는 개발지식 🍰