JS Questions:
- Explain event delegation
- Describe event bubbling.
직역하면 이벤트 위임이라는 것으로 해당 엘리먼트보다 상위 엘리먼트에 이벤트를 달아놓는다.
이벤트 버블현상을 이용해 상위 엘리먼트에서 원하고자하는 객체에서 일어났는지를 판단하는 로직을 넣어 이벤트를 실행하게 해주는 것이 그 원리!
이벤트 버블링은 자식객체에서 이벤트가 발생하면 부모객체로 이벤트가 전달된다는 의미로 이벤트 처리기가 바로 위 엘리먼트들까지 달달 볶는듯한 느낌이다.
- Explain how
this works in JavaScript
- What is a closure, and how/why would you use one?
블로그로 잘 정리한적이 있어서 이것으로 대체!
클로저도 같이 설명을 했는데 왜쓰냐는 질문에는 이렇게 답할 수 있겠다.
캡슐화에 아주 유용하게 쓸 수 있기때문! 프라이빗을 구현할수가 있기때문이다.
- Explain how prototypal inheritance works
프로토타입을 이용한 상속과정을 설명하라는 것인데 이것은 꼭 공부할만한 가치가 있다!
- What do you think of AMD vs CommonJS?
https://studystorage.blogspot.kr/2017/03/webpack-javascript.html
webpack을 조사하다가 크게 연관성이 있는 것을 확인했다. 이 정도만 알아도 충분 할것 같다.
- Explain why the following doesn't work as an IIFE:
function foo(){ }();.
즉시실행함수에 대한 질문이다. 구글링을 해도 답이 명확하게 나오지는 않지만 현재 유추해볼 수 있는 점으로 자바스크립트가 실행되는 과정에서의 문제인것으로 파악한다.
자바스크립트는 함수선언식과 표현식이 따로 있다. 선언식인 경우에는 로딩시점부터 곧바로 실행환경에 값과 함께 올려버린다. 표현식은 로딩시점에 인식을 하지 못하고 인터프리터가 실행하면서 읽어내게 된다. 질문에서의 함수를 잘보면 선언식임을 알수 있다. 표현식으로 만들어주면 문제가 해결된다는 것을 알고있다. 괄호로다시 감싸주거나 연산자를 앞에두어 저 함수를 피연산자로 만듦으로써 표현식으로 인식하게 한다면 문제가 되지 않는다.
다시생각해보면 선언되는 시점에 자바스크립트는 함수로 인식을 하려고 할 것이다. 그런데 문법적 오류 라고 개발자도구에서 뜨는 것으로 보아 선언자체에서 함수선언식을 잘 못 만들었다고 판단하고 있는 것 같다. 그래서 오류가 나는 시점도 function foo () {} ( 까지만 읽고 오류를 뱉어내는 것으로 파악한다. ... 아닌가? 맞는거같은데
- What's the difference between a variable that is:
null, undefined or undeclared?
- How would you go about checking for any of these states?
3가지 상태의 변수들의 차이점을 설명하고 이녀석들을 어떻게 알아볼것인지 묻고 있다.
null 은 실제 값이 할당되었는데 그 값이 비어있다는 것을 나타내는 것
undefined는 선언만 되고, 실제 값이 할당되지 않은 것을 의미한다. null 값이 할당되면 null로 변한다
undeclared 는 잘모르겠다...
- What's a typical use case for anonymous functions?
익명함수를 언제쓰냐는 이야기인데 통상 한번쓰고 다시 안쓸것 같은 것들을 위주로 쓴다.
예를들면 이벤트함수라던가 초기화 함수같은 것들이 있겠다.
- How do you organize your code? (module pattern, classical inheritance?)
나는 타입스크립트를 쓰겠다. 명확하잖아.
- Difference between:
function Person(){}, var person = Person(), and var person = new Person()?
함수를 정의하고 new를 썼는지 안썼는지에 대한 것인데 new는 내부적으로 객체를 생성한다음 함수의 this를 그 객체에 바인딩시켜버리는 것이다. new를 안썼다면 일반 함수처럼 작용할 것이다.
다만 생성자와 일반함수를 구분하기 위해서 첫글자로 대문자로 구분하는 것.
- What's the difference between host objects and native objects?
호스트객체와 네이티브 객체의 차이점.
총 3가지로 구분할수가 있다. 빌트인 객체, 네이티브 객체, 호스트 객체
빌트인 객체는 자바스크립트 엔진 자체가 가지고있는 본연의 객체다.
네이티브 객체는 자바스크립트가 실행되는 환경에 따라 달라지게 된다. 브라우저 환경이면 BOM 같은 객체가 있을 것이다. 만약 서버사이드라면 BOM 객체는 없을 것이다 .
호스트 객체는 사용자가 만들어낸 객체이다.
자바스크립트 객체는 빌트인객체와 네이티브객체를 먼저 해석한 후에 호스트객체를 해석한다고 한다.
- What's the difference between
.call and .apply?
두 함수 Explain Function.prototype 에 존재한다.
모두 어떤 함수의 this를 정해주는 역할을 한다. 차이점이 있다면 두번째 인자로 넘겨주는 인자들에 있는데, call 같은 경우는 넘겨주는 인자들이 고정된 경우이고, apply는 인자들이 명확히 정해지지 않은 즉 동적으로 인자들을 주고 싶을때 사용한다. 두번째 인자가 주어지지 않는다면 두 함수는 똑같이 작동한다.
- Explain
Function.prototype.bind.
음 ES5 부터 도입이되었다고 하는데 위의 call 과 apply 와 의 차이점이라면 단순히 this를 바인드만 하고 실행은 하지 않는다고 한다. 실행 유무의 차이인듯
(참고:
- When would you use
document.write()?
document 객체를 전부 바꿔버리는 기능을 하기 때문에 가급적 쓰지 않을것이다. 하지만 내가 아닌 제3자 예를들면 광고업체들이 내 페이지에서 쓸 수 있게 해줄때라는데 (iframe 같은걸 쓰나?)
아직은 경험해본적이 없어 잘 모르겠다.
- Explain Ajax in as much detail as possible.
굉장히 동기적이어었던 웹 시스템에 혁명적인 결과를 불러온 기술. Asynchronous javascript and XMl 의 약자로 비동기적인 자바스크립트와 XML이다. 페이지를 유지한 채, 서버와 데이터를 통신해서 받아온 데이터를 부분적으로 변환시킴으로써, 기존에 페이지 전체를 로딩하는 방법보다 훨씬 좋은 사용자 경험을 선사해주었다. 이와 관련해서 XMLHttpRequest 객체에 대한 이해를 하는 편이 좋은데 이 것 역시 한번 정리한 포스트가 있으니 이것으로 대체.
위 블로그가 잘 정리를 해두었다.
장점
1. 사용자 경험이 좋아졌다 - 페이지를 리로드할 일이 없어졌기 때문
2. navigation 이 수월해졌다. - 이것역시 리로드와 관련이 있다. 과거전통적인 방법에서는 다른 화면을 보려면 앞으로가기 뒤로가기를 통해서만 가능했다.
3. Compact 해졌다. - 압축되었다는 느낌이다. 전부 페이지로 나눌 필요도 없어졌을 뿐더러 필요한 데이터는 서버로부터 그때그때 받아오면 되므로 용량도 낮아졌다. 하나의 페이지만으로도 충분히 여러페이지를 보는듯한 느낌을 받게 해주었다는 점에서 Compact 하다고 할수 있을 것이다.
4. 유명 브랜드를 지원할수 있게 되었다. - 이 기술덕분에 구글맵같은 유명한 서비스들도 통합하기 쉬워졌다고 볼수 있다.
단점
1. 뒤로가기 , 새로고침 버튼이 쓸모없어졌다. - 크게 단점인지는 모르겠지만 ajax 덕분에 활용도가 낮아진건 사실이다.
2. 자바스크립트가 돌아가지 않으면 말짱 도루묵이다. - 개발자는 그래서 자바스크립트가 구동되지 않을 환경까지 고려를 해두는 것이 좋을 것.
- Explain how JSONP works (and how it's not really Ajax).
아 이건 iframe 다룰때 많이 공부를 했었는데 한번더 명확히 개념을 잡을 필요가 있다.
이 분의 블로그가 가장 깔끔히 잘 원리를 정리해놓은 것 같다.
SOP 정책을 피하기 위한 수단중의 하나이다. 스크립트 태그는 SOP 정책에 영향을 받지 않는다는 점에서 착안해 동적으로 스크립트를 생성하고 json 데이터를 받아온다. 받아온 데이터를 바로 쓸 수 있도록 콜백함수로 감싸서 사용할 수 있게 하는 방법이다.
제한점이 있다면, 서버쪽에서 json으로 데이터를 보내준다는 서로간의 약속이 있어야 할 것이다.
그리고 내가 알기로는 get 방식만 가능하다고 한다.
- Have you ever used JavaScript templating?
- If so, what libraries have you used?
템플릿은 Angular 밖에... 하지만 핸들바와 제이드도 경험해본적은 있다.
this를 설명했던 포스트에 정리한바 있어서 패스~
- What's the difference between an "attribute" and a "property"?
property는 자바스크립트 DOM 객체의 일부라고 볼 수 있다. attribute는 HTML 그 자체의 속성이라고 볼 수 있다. 굳이 쓴다면 attribute 보다는 property를 권장한다. attiribute는 스트링값만 가능하지만, property는 다양한 타입의 값을 줄 수가 있다.
- Why is extending built-in JavaScript objects not a good idea?
빌트인 객체는 어떻게보면 전역변수 같은 느낌이다. 이걸 건드리면 다른 곳에서도 영향을 끼칠 수 있음이 뻔하다. 전역은 안건드릴수 있다면 안건드리는 것이 좋다.
- Difference between document load event and document DOMContentLoaded event?
DOMContentLoaded 이벤트는 말그대로 document 내용만 로딩이 되면 바로 실행을 해버립니다. 이 이벤트는 이미지, css, 등의 다른 여타작업은 신경쓰지 않습니다. 반면에 load 이벤트는 파싱작업까지 모두 완료가 되어야 발생합니다.
- What is the difference between
== and ===?
값을 비교하는 것뿐만 아니라 === 는 좀더 엄격하게 자료형까지 검사를 한다
- Explain the same-origin policy with regards to JavaScript.
iframe 포스트와 관련있어 패스~
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
비슷하게 배열복사에 대한 이야기가 나올수있으니 짤막하게 정리.
깊은 복사에 대한 이야기이다. 변수에 담는 것은 얕은 복사로써, 레퍼런스 참조만 이뤄지기때문에 같은 객체를 바라보기 마련이다. (C언어의 포인터 개념이 정말 이걸 이해하는데 도움을 주었다)
질문의 복사같은 경우는 배열 내부의 요소들을 그대로 가져와서 자신의 뒤쪽에 붙이는 복사를 이야기 하고 있다. 매개변수로 들어온 배열을 지역변수 하나에 담아놓고, concat 메소드를 이용해서 자기자신을 붙이는 연산을 주면 될것같다.
- Why is it called a Ternary expression, what does the word "Ternary" indicate?
Ternary는 삼항이라는 의미이다. 삼항연산자라고도 하는데 표현식을 보면 총 3개의 피연산자가 있기때문에 삼항 연산자라고 한다. 표현식 ? 값1 : 값2 의 형식이다.
표현식의 참 거짓을 판별해서 참이면 값1 을 , 거짓이면 값 2를 반환한다.
나는 주로 토글버튼을 만들때 사용한다.
- What is
"use strict";? what are the advantages and disadvantages to using it?
장점. 자바스크립트만의 모호함을 더 분명하게 잡아준다.
단점. 잘못사용했다가는 스무스하게 넘어갈 수 있는 것을 에러로 처리할 수 있다.
- Create a for loop that iterates up to
100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5
당장 떠오르는 것은 3의 나머지가 0일때와 5의 나머지가 0일때 를 검사하는 것을 만든다.
3의 나머지가 0이라는 것은 3의 배수를 의미한다. 만약 이 조건분기를 통과하면 5의 배수인지도 확인한다. 이 두가지를 모두 통과하면 3과 5의 배수를모두 통과하는 거니까.
- Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
글로벌 스코프를 만지지 않는것이 좋은이유는 웹팩을 설명하면서 이야기함.
- Why would you use something like the
load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
단점이 딱히 떠오르진 않는다. 단지 단점이 있다면 로드 이벤트의 경우 문서가 전부 로드되어야 발생한다는 것이다. 만약 로드된 뒤 발생하는 이벤트용량이 무지막지하게 크다면 사용자가 바로 사용할 수 없을 것이다. 이것이 단점이라면 대안책으로 lazy loading을 쓰거나, 바로바로 적용해야 할 부분은 async 속성을 스크립트에 줄 것이다 .
- Explain what a single page app is and how to make one SEO-friendly.
SPA 의 단점인 검색엔진 최적화 문제에 대한 이야기인데, 구글링을 해보니 요청한 값에 대해서 렌더링을 해서 보여준다고 한다. 이 부분은 잘 모르기때문에 좀더 공부를 해봐야겠다.
- What is the extent of your experience with Promises and/or their polyfills?
- What are the pros and cons of using Promises instead of callbacks?
프로미스와 폴리필에 대한 경험정도를 묻고 있다.
나는 프로미스는 Ajax 를 쓰면서 어느정도 써보았다. 프로미스 패턴의 가장 훌륭한점은 콜백헬을 빠져나올수 있는 표현의 간결함이고, 바로 그 다음 행동에 대한 명령을 줄 수 있다는 부분이라고 생각한다.
폴리필은 구형 브라우저에서도 잘 보일 수 있도록 땜빵같은 거라고 한다. Angular2 를 이용하면서 폴리필에 대한 언급이 있긴 있었느나 제대로 사용해본적은 없다.
- What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
자바스크립트로 컴파일 되는 언어를 쓰면 어떤 장단점이 있는가? 내가 써본것은 타입스크립트이므로 타입스크립트 관점에서 써본다. 타입스크립트의 가장 강점은 이름에서 나오는 타입이다. 강력한 타입정책으로 자바스크립트의 애매모호함을 명확하게 줄 수가 있다. 애매모호함을 줄이는 것은 프로그램 규모가 커져갈수록 유지보수하는데 큰 이점이 된다는 것이다.
단점이라면 결국 자바스크립트로 컴파일 되는 것이기때문에 자바스크립트역시 알아야한다는 것 정도? 이게 단점이 될 수 있을까. 컴파일과정이 한번더 생긴다는 것도 문제가 될 수 있을 수 있겠지만 크게 개의치 않을정도이다.
- What tools and techniques do you use debugging JavaScript code?
자바스크립트 코드를 디버깅하는 기술이라면... 지금은 크롬개발자 도구를 써서 확인해보고 있다.
콘솔창에서 뜨는 에러를 보고 확인하는 수준이다. 테스트를 잘 써보고 싶은데 제대로 공부해본적이 없어서 목마른 상태이다.
다른 방법으로는 타입스크립트를 사용하고 있어서 컴파일 과정에서 어느정도 에러가 걸러진다는 점이다.
그리고 개발툴 자체에 JSlint 가 적용되어 있어서 잘못된 문법이 있다면 바로잡아주는 것도 있다.
- What language constructions do you use for iterating over object properties and array items?
이 부분은 잘 모르겠다.
- Explain the difference between mutable and immutable objects.
변할 수 있는 객체와 불변의 객체의 차이점. 값을 참조하느냐 하지 않느냐의 차이 인것 같다.
var a =1 ; var b =a ; b += 3 ; 이 경우 number 타입인 값은 불변객체임으로 (자바스크립트의 모든 값은 전부 객체라고 봐도 된다 ) a = 1; b =4 ; 라는 결과가 나온다.
반면에 var c = [1,2] ; var d = c ; d.push(1) ; 인 경우에는 배열은 안쪽 내용이 변할수 있는 객체 , 레퍼런스 참조를 할 수 있는 객체이기때문에 c = d = [1,2,3] 이라는 결과가 나온다.
- What is event loop?
- What is the difference between call stack and task queue?
이벤트 루프가 무엇인지? 2017년 초쯤에 이 개념에 대해 잠깐 본적이 있다. 그러다가 아래 포스트를 보게 되었는데 그때는 무슨소리인지 전혀 이해가 안되었다. 3개월이 지난 지금 다시 읽어보니 윤곽이 잡힌다.
자세한 설명은 포스트를 살펴보는것이 좋고, 간략하게 내가 이해한 바를 적어둬야겠다.
먼저 자바스크립트 자체는 단일 스레드 환경이다. 멀티스레드를 쓰지 않는 줄 알았는데, 그것이 아니었다. 자바스크립트 엔진까지는 단일 스레드 환경이 맞지만, 그외 작업은 브라우저나 서버사이드환경 (Node.js) 에서 대신 처리해준다는 것이다.
자바스크립트는 단일 호출 스택을 가지고 있다. 이 말은 호출되는 작업들이 LIFO 형식으로 하나 하나 처리된다는 것을 의미하므로, 단일 호출스택에 쌓여있는 작업이 있다면 다른 작업들을 실행할 수 없다는 것이다.
그렇다면 비동기는 누가 어떻게 처리하는 것일까, 자바스크립트 외부 환경에 놓여있는 이벤트 루프와 테스크 큐가 이 일을 한다. 음 비유를 해보자면 달리는 기관차에 비유 할 수 있을 것이다.
연료를 태울 수 있는 연료실이 단일 호출 스택, 이벤트 루프는 연료를 넣어주는 작업자이다. 테스크 큐는 연료들이 줄줄이 내려오는 컨테이너 벨트에 비유할 수 있을 것이다.
작업자(이벤트 루프)는 컨테이너 벨트(테스크 큐)를 살펴보고 있다가 만약 작업할 것들이 있으면 연료실에 넣어준다. 테스크 큐에 들어가는 콜백함수, 즉 처리를 해달라고 들어온 비동기 함수들이 들어온 순서대로 대기하고 있다 (FIFO) .
그런데 프로미스는 마이크로 테스크 큐라는 조금 특별한 큐에 쌓인다. 이 녀석들은 VIP 대접을 받으며 일반 테스크 큐보다 앞서서 이벤트 루프에 의해 단일 호출스택에 들어갈 특권을 가지고 있다.
- Explain the differences on the usage of
foo between function foo() {} and var foo = function() {}
함수 표현식과 선언식 사용의 차이점. 내 생각엔 큰 차이는 없다고 본다. 다만 내부적으로 언제 선언이 되고 값이 할당되느냐의 차이이다. 그로 말미암은 호이스팅 여부정도의 차이점.
더글라스 크락포트는 호이스팅같이 헷갈리는 기능은 쓰지말자고 한다. 이렇게 자유로워 버리면 표준에서 멀어지기 때문에 유지보수가 힘들어진다고 했다.
댓글
댓글 쓰기