프론트엔드 기술 면접 대비해서 준비했던 짧은 한 줄들

이직 이야기를 했던 글에서 면접을 대비해서 답변을 짧게 준비했다는 내용이 있었는데 오랜만에 메모장을 보니 그 내용이 남아있어서 공유해볼까 한다. 당시에는 꽤나 여기저기 참고해서 적었던 내용이라 참고한 문서가 기억나거나 괜찮은 문서가 있다면 같이 링크를 걸어보려고 한다. 하지만 만약에 참고하시는 분이 있다면 어디까지나 참고만 하시고 내용을 파악하고 면접을 갔으면 하는 마음이다.

 

클로저: 외부 변수를 기억하고 참조할 수 있는 함수

자바스크립트 클로저: 함수가 생성된 렉시컬 환경을 기억한다. 렉시컬 환경은 지역 변수를 저장하고 있는 객체다.

클로저 사용 예시: 데이터 접근을 제어할 때(private), 상태를 가진 함수를 만들고 싶을 때(값이 변경되고 그에 따라 리턴이 변경), 전역 변수 생성 억제(초반 페이지 로딩)

 

- 클로저를 면접 때 한 번 질문 받았다가 어설프게 준비해서 많이 공격받았던 기억이 난다. 이 때 클로저라는 것은 다른 언어에도 존재하지만 자바스크립트에서 어떻게 구현하고 사용하는지를 구분해서 답변을 준비했었다. 클로저는 정말 많은 글이 존재하고 연관된 개념이 많기 때문에 많이 읽어보고 모르는 단어가 나오면 또 찾아서 읽어보는 식으로 했었다.

 

이벤트 루프

기본적으로 싱글 스레드로 실행되는 자바스크립트가 동시성을 구현하기 위해 사용하는 모델이다.

이벤트 루프는 함수가 실행되는 콜 스택과 실행되어야하는 태스크가 기다리고 있는 큐를 계속 지켜보면서 콜 스택이 비었을 때 큐에 들어온 순서대로 태스크를 콜 스택에 올린다.

 

매크로태스크와 마이크로태스크는 별개로 존재하며

매크로태스크가 하나 실행되고 마이크로태스크가 전부 실행된다.

microtask 예시: promise의 then, catch

 

- 이벤트 루프는 정말 준비하면서 처음으로 안 개념이었다. 자연스럽게 싱글 스레드라는 자바스크립트가 어떻게 병렬 처리를 하는지도 알 수 있었다. 매크로태스크와 마이크로태스크는 당시 많이 읽어봤던 기억이 나는데 이걸 활용할 만큼의 일은 아직 만나보지 못했다. 이 글이 당시 많이 도움이 되었다.

 

프로미스: 비동기 작업의 완료 후 결과를 담은 객체

성공하면 resolve, 실패하면 reject를 반환

프로미스의 상태: pending, fulfilled, rejected

then, catch를 이용해 이후 작업 실행

 

await, async: 비동기 실행 흐름을 동기 흐름처럼 작성할 수 있는 키워드

await는 async 안에서만 사용 가능, await는 프로미스가 리턴될 때만 사용 가능

 

- Promise는 정말 처음에 많이 헤맸던 기억이 난다. 실행을 기다려야한다는 개념이 와닿지가 않아서 맨날 Promise를 리턴하고 어떻게 이걸 써야지했던 기억이 난다. 대표적인 fetch API를 써보는게 많이 도움이 되었던 것 같다. async, await도 처음에는 이해를 못했는데 이제는 then, catch로 되어있는 코드도 웬만하면 async-await로 고쳐 쓰는 정도로 쓰고 있다.

 

const,let,var의 차이점:

1. var는 재선언 가능 나머지는 에러

2. var는 코드 블럭 무시 나머지는 참조 불가능

3. var는 TDZ가 없음

 

TDZ

let, const는 선언된 스코프에서 선언된 라인에 갈 때까지 초기화가 되어있지 않은 상황. 그 라인까지는 변수를 사용할 수 없고 그 라인까지의 범위를 temporal dead zone이라고 한다.

 

호이스팅

var, 함수는 선언이 최상위로 끌어와지는 현상. 값의 할당은 작성된 코드 라인에서 실행된다.

 

- 요새는 오히려 var가 유물 취급을 받을 정도라서 이렇게 중요한가 싶지만 막상 어딜 가도 물어보는 내용이었다. 이것만큼은 그야말로 외워서라도 가는 것을 추천한다. 너무 기본기 취급이라 오히려 물어봤을 때 헤맨다면 엄청 마이너스일 것 같다는 느낌이었다.

 

로컬 스토리지, 세션 스토리지, 쿠키

쿠키는 서버가 지정 가능, 자바스크립트도 접근 및 변경 가능

 

스토리지 API는 자바스크립트만 접근 가능, 그래서 통신하는게 아니라 허용 용량이 더 큼.

 

세션은 탭이나 창 끄면 삭제, 로컬은 꺼도 유지됨

문자열만 저장 가능, JSON 객체로 객체 저장 가능

 

- 로컬/세션 스토리지는 잘 쓰고 있었는데 쿠키랑 구분하라는 질문을 보니 확 떠오르는 것이 없었다. 쿠키는 지금 보면 저 내용보다는 좀더 구체적으로 준비해도 좋았을 것 같다. 막상 준비했는데 물어본 곳은 없었던 것 같다.

 

this

현재 자바스크립트 함수가 실행되는 맥락의 객체

실행 컨텍스트에 있는 값으로 컨텍스트에 따라 달라진다

자바스크립트의 this는 런타임에 결정된다. 지금 실행한 함수 앞에 객체가 this

엄격 모드에서는 undefined, 일반적으로는 window

1. new를 하면 함수로 만들어지는 객체 자기 자신

2. call,apply,bind로 강제 지정

3. 객체를 앞에 붙여서 쓰면 그 객체

4. 별도로 지정하지 않으면 전역 객체 또는 undefined

 

this를 저장하는 방법

call, apply로 this를 지정해 호출 가능

bind로 this가 지정된 함수를 저장 할당 가능

화살표 함수는 this가 변경되지 않고 선언 당시 this를 가져간다

 

- this는 정말 준비하면서도 죽을 맛이었다. 자바를 해서 그런지 더 헷갈리기도 했고. 그렇게 많은 글을 읽어도 딱히 와닿는 글이 없다가 You Don't Know JS에서 설명해준 저 위의 4가지 규칙을 보는 순간 엄청 깔끔해졌다. 이 글의 'Determining this' 챕터에 잘 정리되어있고 그 윗부분에 극단적일 정도의 예시와 함께 설명되어 있으니 읽어보자. 대신 어느 정도 this를 알아보고 헤맬 쯤에 읽어야 바로 와닿을 수도 있는 글이라 생각한다.

 

이벤트 관리법

캡처링: 상위 엘리먼트의 이벤트가 하위 엘리먼트로, capture: true 사용

버블링: 하위 엘리먼트의 이벤트가 상위 엘리먼트로

등록, 해제: addEventListener, removeEventListener로

이벤트 위임: 엘리먼트에 직접 이벤트를 등록하면 하위 엘리먼트가 생성, 삭제될 때마다 이벤트를 처리해줘야 한다. 그럴 때 상위 엘리먼트에 이벤트를 위임하면 하위 엘리먼트의 이벤트를 처리 가능

 

바벨: 구형 브라우저에서 최신 자바스크립트가 실행되도록 하는 트랜스파일러. 또는 JSX, TS 등의 언어도 브라우저가 실행할 수 있게 컴파일함

 

Prettier: 코드 포매터. 코딩 스타일을 일관되게 유지 가능

ESLint: 코드의 오류, 버그 가능성 등을 잡아주고 수정하게 하는 라이브러리

Node.js: 브라우저 외에서 자바스크립트를 실행할 수 있는 런타임 환경.

NPM: 노드 패키징 매니저. Node에서 사용 가능한 모듈을 설치 및 업데이트 관리.

 

버추얼 DOM

DOM 조작은 자바스크립트 실행에서 속도가 느리고 부하가 심한 편이다. 그렇기 때문에 리액트와 같은 UI 라이브러리/프레임워크 등은 버추얼 DOM이라는 실제 DOM과 대응되지만 훨씬 가벼운 객체를 메모리에 만든다.

리액트에서 render가 발생하면 virtual dom의 모든 엘리먼트가 새로고침이 되고 이전 상태와 비교해 달라진게 있으면 새롭게 렌더링을 한다. 이 과정에서 리액트 내부 알고리즘으로 불필요한 DOM 조작을 최소화한다.(대표적으로 list의 key 속성 참고)

 

실행 컨텍스트

현재 함수의 실행 정보를 담고 있는 내부 객체(인자, this, 스코프 체인 등등)

 

원시값

- Number

- String

- Boolean

- undefined

- null

- Symbol

 

- 이런 것들은 정말 혹시 해서 준비했던 기초 지식이었다. 실행 컨텍스트는 위의 클로저나 this와 엮어서 질문할까봐 따로 한 줄 더 요약을 준비했었다. 준비해서 나쁠 건 없는 지식이라고 생각한다.

 

REST API

- 자원(Resource)의 표현(Representaitional)을 통한 상태 전달(State Transfer)

- 자원: 서버가 가지고 있는 데이터

- 표현: users 등 자원을 나타내는 단어

- 서버와 클라이언트의 분리

- 무상태

- REST의 원칙을 지킨 API를 RestfulAPI라고 한다

- Url에 명사만 사용, 행동은 HTTP method로 표현 등

- ID 등으로 고유값 표현

 

- 의외로 엄청 고생했던 내용인데 REST API라는걸 깔끔하게 요약하기가 쉽지 않았다. 외국 문서와 한국 문서를 비교해가면서 최대한 그럴듯한 번역어를 찾아 정리했었다. 막상 위의 한 줄 정도 대답하면 그 이상 묻지는 않았었던 것 같다.

 

What happen when type google

1. DNS 서버에서 주소의 IP 확인

2. 확인한 IP로 HTTP 요청

3. 서버가 HTTPS를 요구할 경우 301 리턴

4. 브라우저는 HTTPS로 재요청

5. 서버는 요청한 정보에 따라 응답을 리턴

6. 브라우저는 응답을 받아서 화면에 렌더

 

- 이런 것도 나올 수 있다고 해서 혹시나 해서 준비했었는데 역시 묻지는 않았었다. 제목인 "What happens when type google"로 치면 엄청 많이 나오더라. 역시 너무 장황해지지 않게 짧게 요약하려고 했었다.

 

그 외

- 시간 vs. 퀄리티

- 가장 힘들었었던 일

- 내가 스스로 찾아서 한 일

- 남과 갈등을 해결한 일

 

- 이런 뻔한 면접 질문도 기본적으로 준비해갔다. 이건 사람마다 달라서 내용을 공유하기는 의미가 없을 것 같아서 제목만 적었다. 경력을 가지고 이직하는 만큼 취준생 때 했듯이 학교 경험 등은 배제하고 가능한 회사 경험으로 채우려고 노력했다.

 

정리해보니 지금은 또 가물가물한 것도 있고(사실 this가 가끔 헷갈려서 오랜만에 찾아봤다) 막연하게 머리에 남은 내용도 많았다. 혹시나 면접 준비 글을 보고 어떻게 요약했을까 궁금했던 분의 호기심이 풀릴 수 있으면 좋겠다.