서론
'Interview Happy'라는 유튜버 분의 동영상을 보다가 정리하기로 마음먹었다.
최대한 가볍고, 심플하게 정리하는 것이 목표
다만, 최근에 본 어떤 영상에서 정답을 외운듯한 인상은 좋지 않다는 내용이 있었어서 그간 공부했던 내용과 연결하는 것에 중점을 두어야할 것 같다.
는 면접이 취소돼서 마음이 약간 꺾였다 ㅎㅎ..
Q0. What is DOM? What is the difference between HTML and DOM?
생각한 답:
Fact: HTML은 마크업언어, 정해져있는 특정한 태그를 사용하여 문서화한 것. 예전의 신문 기사나 논문이 토대이기때문에 의미가 있는 태그들과 의미가 없는 태그들이 같이 존재함.
DOM은 웹 페이지를 '트리 구조'처럼 도식화하여 표현한 것.
잡썰: HTML은 논문의 참조 문제를 해결하기 위해 연구소에서 만들어졌음. 거기에, 뉴스를 전달하는 역할로 많이 사용되어 신문의 형태를 닮고자하기도 함.
유튜버분의 답:
HTML file과 DOM tree를 보여주며, HTML을 트리 구조로 표현한 것이 DOM이라고 설명하심.
Q1. What is JavaScript? What is the role of JavaScript Engine?
생각한 답:
Fact: HTML, Img파일로는 해결할 수 없는 '니즈'가 생겨나면서 코딩을 통해 그 니즈를 해결하려고 만들어짐.
계산을 한다던지, 서로 연결되는 어떤 행위를 한다던지 하는 것들이 예시임. 정적인 것을 동적으로 바꾸고싶다는 니즈.
자바스크립트 엔진은 어디에 달린 것이냐에 따라 다를 것 같은데, 이전에는 단순하게 JS로 쓰여진 Code를 읽고, 쪼개고, 추상구문트리 만들고, 해석하여 Byte Code로 변환하고, Byte Code를 머신코드로 변환하여 컴퓨터로 하여금 명령을 실행하게끔하는 말그대로 JS를 해석하는 엔진이었음.
요즘은 Byte Code 와 실행의 간극을 줄이기위한 많은 기능이 포함됨, 예를들어 바이트코드 생성과 머신 코드 생성을 분리하여 담당하게 하고, 최적화를 위해 해석 중간중간에 컴파일러를 넣고, Trade-off를 고려한다던지 하는.
유튜버 분의 답:
Google의 메인페이지를 예시로 들며, Url입력 -> 웹서버에서 HTML, CSS, JS 전송 -> HTML은 정적인 컨텐츠를 보여주고 CSS는 이를 디자인함, JS는 검색창에 유저가 뭘 입력하면 그것에 관한 동작같은 것을 처리함. 의미로는, 정적인 웹페이지를 좀 더 동적이고 상호작용할 수 있게 만들기위함. 엔진은, 브라우저로하여금 자바스크립트를 해석해서 동적인 어떤 명령을 실행할 수 있게끔 하는 역할.
Q2. What are Client Side and Server Side?
생각한 답: 가볍게, 유저와 가까운 쪽(데스크탑, 노트북)과 서버와 가까운 쪽(서버 컴퓨터)
유튜버분 답: 인터넷을 중심으로 모바일, 데스크탑과 같이 유저와 상호작용하는 부분과 서버와 상호작용하는 부분,
예를들어 컴퓨터에서 인터넷을 통해 서버로 '요청'을 보내면, 서버는 요청을 처리해서 '응답'을 보낼 것임.
처리량에서 보면, 클라이언트 사이드는 1개의 요청을 보낸다면, 서버는 몇십억개의 요청에 대한 처리를 하고 있을 수도 있음.
사용하는 언어레벨에서는 클라이언트는 HTML CSS JS | 서버는 Java, php, c#등
정리해서, 클라이언트는 디바이스, 앱, 소프트웨어 같은 요청을 담당하여 서버로 부터 받고,
서버는 리소스, 서비스 등을 담당하여 클라이언트에게 응답함.
Q3. What is Scope in JavaScript?
생각한 답: 접근 영역의 구분. 바깥에서 안으로 접근 X, 안에서 바깥으로 접근 O
유튜버분의 답: 어디서 변수가 정의되는지, 어디서 접근할 수 있는지에 대한 구분.
Q4. What is the type of a variable in JS when it is declare without using the var, let, or const keyword?
생각한 답: 원시형(string, number, boolean, undefined, symbol)과 참조형(object)등이 있음.
var, let, const 없이 동작한다.
유튜버분 답: 기본적으로 var로 생각하여 동작한다. 따라서, hoisting 때문에 외부에서 지역 변수에 접근이 가능해져버림.
Q5. What is Hoisting in JavaScript?
생각한 답: 예전에 엔진이 좋지 않던 시절에, 비용 감소를 위해 변수나 함수의 선언을 제일 위로 끌어올려서 먼저 해석하던 것.
그래서 함수를 먼저 Call하고, 아래에 함수를 선언하는 행위 등이 가능했음.
유튜버분 답: 엔진은 함수나 변수의 선언을 제일 위로 자동적으로 끌어올림, 그래서 외부에서 내부에 접근한다던지, 먼저 존재하지 않는 변수에 값을 집어넣고 아래에 선언하는 하는 행위가 가능해짐.
Q6. What is JSON?
생각한 답: 데이터를 전송할때 주로 사용되고, JS Object로 구조화한 연속적인 문자열의 형태의 형식.
유튜버분 답: 가벼운 데이터 교환 형식, 키밸류 형식을 가지고있음. XML의 형식도 있으나 요즘은 거의 JSON만 사용.
Q7. What are Data types in Js?
생각한 답: 원시형(string, number, boolean, undefined, symbol)과 참조형(object)등이 있음.
데이터가 단일하냐, 여러가지냐에 따라서 구분지을 수도 있음.
Null도 primitive이긴 한데, 오브젝트 형태니까 생략.
Q8. What is the difference between primitive and non-primitive data type?
생각한 답: 메모리에 접근했을때, 다른 메모리 덩어리가 나오느냐, 값이 나오느냐의 차이라고 생각함.
유튜버분 답: 값이 하나냐, 어러가지냐에 따라 나눌 수 있고, immutable하냐 mutable하냐에 따라 나뉠 수도 있다고 함.
Q9. What is the difference between null and undefined?
생각한 답: 메모리는 있는데 뭐가 들었는지 '미정'인 상태와 아무것도 없는 것의 차이라고 생각함.
유튜버분 답: 비슷하게 설명하시면서, 데이터 타입이 없는 것이랑, 배정되지 않은 것을 휴지를 통해 설명함.
Q10. What is the use of typeof operator?
생각한 답: 변수의 type을 반환해서 유효성을 체크할때 보통 많이 사용하는 것 같음.
유튜버분 답: API같은 외부 소스에서 데이터를 받을때 유효성 체크할때 사용한다고 함.
Q11. What is type corecion in JS?
생각한 답: 문자열 + 숫자일때 문자열로 형이 변환된다던지, string 등의 method를 통해 명시적으로 형변환 하는 것.
유튜버분 답: 비교 상황이나, 합성 상황의 예시를 들며 설명함.
Q12. What is operator precedence?
생각한 답: JS우선 순위는 잘 모르겠다, 괄호->곱연산->덧셈뺄셈이라고 생각함.
유튜버분 답: Brackets->Order->Division->Multiplication->Addition->Substraction
Q13. What is the difference between unary, binary, and ternary operators?
생각한 답: 각각 -a나 ++ 같은 단일 명령, 1+2같은 2개 명령, 비교 명령이라고 생각함.
유튜버분 답: 오퍼랜드가 기준점, 오퍼랜드를 하나 사용하는지 두개 사용하는지 세개 사용하는지라고 설명함.
Q14. What is short-circuit evaluation in JS?
생각한 답: 특정 상황의 에러처리나 자주 발생할 케이스를 조건문이나 코드에서 우선 처리하여 빠른 리턴을 할 수 있게 하는 것
유튜버분 답: 회로도 보여주면서 뒤의 조건이 오지 않아도 되는 상황에서 빠르게 처리할 수 있도록 하는 것이라고 함.
Q15. What are the types of conditions statements in JS?
생각한 답: if/else ? switch
유튜버분 답: 동일
Q16. What is the difference between == and ===?
생각한 답: 점유하고 있는 메모리 주소까지 같은가, 값이 같은가, 원시형이냐 참조형이냐에 따라 다른 것으로 알 고 있음.
유튜버분 답: 형변환이 일어나지 않고 일어나고의 차이, 보통 ===를 더 주로 사용해주는 것이 정확하다고 함.
Q17. What is the difference between Spread and Rest operator in JS?
생각한 답: 어떤 배열이나 객체의 각 요소를 말그대로 뿌리듯 사용하는 것과 남은 것의 차이.
유튜버분 답: Spread=각 요소들을 순환반복하면서 확장하거나 뿌리는 것 Rest=남은 요소들을 말함.