/2022-woowahan-fe-interview

  1. 이벤트 버블링 또는 캡처링 현상을 이용해서 지난 미션들에서 구현하신 기능이 있으신가요?

→ 이벤트 위임, 동적으로 추가되거나 삭제되는 버튼 테그가 있었는데 해당 부분에 이벤트를 모두 다는 것이 아니라 부모 태그에 달아서 자식버튼에서 사용할 수 있도록 함

  1. 이벤트 위임을 왜 사용 해야 하는지?

→ 버튼 태그가 동적으로 변할 수 있기 때문에

1 - 동적으로 추가되거나 삭제되는 것에 일일이 이벤트를 달아주는 것은 힘들기 때문에

나인: 성능에 관한 답변 ⇒ 성능은 부차적인 효과,

2 - 이벤트가 전파되는 것을 방지하기 위해서

  1. 돔 요소를 forEach문등을 통해서 순회하면서 이벤트 리스너를 달아줄 수 도 있는데 어째서 이벤트 위임을 사용해야하는지?
  2. 이벤트 위임 덕분에 해결되는 현상이 더 없는지(이벤트를 적게 달아주는 것 말고 더 없는지?)
  3. 이벤트 버블링, 캡처링과 관련해서 이벤트 위임을 더 설명해주세요
  • 호이스팅에 대해서 설명해 주세요

→ var 는 선언과 초기화가 동시에 일어나고 let const는 선언과 동시에 초기화가 일어나지 않는다

  1. 엘버가 생각하는 초기화란 무엇인지?
  2. webpack을 사용하는 이유는 무엇인지?

→ 번들링 도구를 사용하지 않으면 여러개의 자바스크립트 파일을 script태그 개수 만큼 파일 로드 요청을 보내게 되서 좀더 효율적으로 할 수 있다.

여러개의 자바스크립트를 하나로 번들링 해줄 수 있음

여러번의 리퀘스트를 한번에 줄일 수 있다.

  1. 여러번의 리퀘스트를 줄이면 어떤 이점이 있는지?

→ 사용자가 화면을 좀 더 빨리 볼 수 있다.

  1. 요청되는 데이터의 양은 같은데 웹팩으로 처리할때 더 빠르게 느껴지는 이유는 무엇인지?

→ 리퀘스트를 주고 받고 하는 비용 횟수에서 차이가 있으므로 : 브라우저의 요청 제한

  1. 웹팩에서 파일을 하나로 번들링 할 수 있는 이유는?

→ 자바스크립트 모듈들로 나누어져서 해당 모듈들을 import하면서 하나로 번들링 할 수 있음

  1. 자바스크립트 모듈들의 종류에는 무엇이 있는지? 웹팩에서 어떤 모듈을 사용해서 import를 하였는지?

→ commonJS, ES Module

  1. 스코프 체이닝이란?

→ 스코프는 식별자가 유효한 범위

각각의 스코프끼리 체인을 이루어서 식별자를 찾는 과정

  1. 프로토타입 대신에 클래스를 사용한 이유는?

→ 상속을 하면서 구현해본적이 있음

클래스로 짠 경우가 가독성이 좋아서

  1. 미션을 진행하면서 timer api을 사용했던 경험이 있는지 ?

→ 사용자에게 스낵바로 알림을 주는 것에서 setTimeout을 사용하였음

  1. setTimeout의 작동방식에 대해서 설명해주세요

→ 콜스택에 setTimeout의 실행컨텍스트가 들어감 webapi에서 들어감 해당 곳에서 나온 콜백 함수를 task queue에 들어가서 이벤트루프가 taskqueue와 콜 스택을 감시해서콜 스택이 비어있으면 콜스택으로 push를 함

  1. 프로토타입 하위 객체에서 부모의 객체에 접근하는 방법은 무엇이 있는지?

→ .을 찍어서 접근이 가능하다

  1. 그렇다면 프로토타입에서 하위객체에서의 접근을 막기 위해서는 어떻게 해야하는지? / 프로토타입 체이닝을 막으려면 어떻게 해야하는지

→ 의도적으로 끊어주어야 한다라고 답변 (답은 hasOwnProperty?)

  1. CSR 과 SSR의 장단점에 대해서 설명해주세요

→ CSR은 사용자가 사용했을 때에 UX가 더 좋다

  1. CSR이 UX적으러 더 좋은 이유가 무엇인가?

→ 사용자가 버튼을 클릭하게 되면 서버에서 다시 정보를 받아와서 화면이 깜빡이게 되서 보이지 않음

  1. 위의 사항 말고 다른 장점이 있어서 csr을 사용할 수 있는 것이 아닌가?

SEO

  1. 시멘틱하게 HTML을 작성한 경험이 있는지?

→ section, article, form등 해당 영역에 맞는 tag를 적절히 사용하려 했음

  1. 왜 시멘틱하게 태그를 작성해야하는가?

→ 개발자 측면에서 유지 보수에서 유리하다

사용성 증가가 있음 - 스크린 리더로 읽을 경우에 더 잘 읽힐 수 있음

검색 엔진 최적화가 가능하다 검색엔진 최적화에 더 용의 하다

  1. section 과 article의 차이/ 어떨때에 section tag를 사용하는지?
  2. 실행컨텍스트 코드 실행에 필요한 환경을 제공하고 어떤 식으로 사용되는지?

→ 변수 환경 렉시컬 환경

this 바인딩은 해당 실행컨텍스트가 호출이 될때에

환경레코드, 외부 환경참조로 나누어서 해당 유효범위에 있는 식별자를 모두 찾아냄, 외부환경 참조의 경우 해당 실행컨텍스트가 실행될 외부 실행 환경을 가리킴

  1. 식별자랑 유효범위가 무엇인가?

→ 식별자는 변수나 함수를 선언했을때의 이름을 식별자

유효범위는 식별자를 사용할 수 있는 공간

  1. 호이스팅에 대해서 간략하게 설명해주세요

→ 환경레코드에서 식별자에 대한 내용을 모두 수집해 놓음

초기화하는 부분은 수집을 안해서 undfined가 나옴

선언전에는 접근을 막음 (var, let, const를 사용하여 설명함)

  1. 템프럴 데드 존에 대해서 추가적인 설명

→ 어떤 변수가 아까 말씀드렸던 환경스코프에 등록이 되어도 호출을 하면 에러가 뜨는

  1. 비동기 처리를 어떤식으로 하였는지?
  2. 비동기란 무엇인지?

→ 어떤 코드가 실행을 하고 실행이 완료되었을때에 동기

비동기는 해당 코드가 실행이 완료되지 않았을 때에

사실 자바스크립트가 싱글 스레드... (이후 못적음)

  1. 콜백함수를 사용하는 이유는 무엇인지?
  2. 프로미스 객체는 무엇인가?
  3. async await만을 사용하였을 때에 불편한 점은 무엇인지?
  4. Promise와 비교했을때 async await를 사용해야만 하는 이유는? -> 포코 질문
  5. promise에서의 무슨 단점 때문에 async await가 나오게 됐는지?
    • Async await 에는 없는 promise.all / .race 을 사용할 수 있음
    • async await는 resolve와 reject 호출을 보장한다 ?
    • async await의 문제 : top level await (tc39 stage 4)
  6. async await가 계속해서 이어지는 현상은 무엇인가?
  7. spa가 왜 필요하는지
  8. 사용자가 사용할때마다 요청을 해서는 안되는 이유는 무엇인지?
  9. spa를 사용할때에 문제점은 무엇인지

→ multipage애플리케이션 사용할때에 속도가 느려질 수 있다.

  1. csr과 ssr차이점은 무엇인가?
  2. 고차함수란 무엇인가?
  3. 자바스크립트에서 고차함수를 사용하는 방법

→ 자바스크립트가 인자를 1급 객체 자바스크립트에만있는 특성이라 인자로 넘어올 수 있는 것이다

  1. 프로토타입을 사용해서 상속을 구현해본적이 있는지

→ 프로토타입을 기반으로 만든 클래스를 사용했었음

미션중에서 상속을 사용해서 쓰는 경우가 없음

  1. 프로토타입이 서로가 서로를 가리킬때에 어떤 현상이 발생하는지

→ 에러가 발생한다

  1. 클로저를 실제로 사용한 경험이 있는지 있다면 어떨 때 좋았는지?

→ 클로저를 사용했던 경험은

무한 스크롤 을 구현할때 사용을 했었음

타이머 함수를 설정하고 해당 타이머가 끝나지 않을때에는 함수가 발생하지 않도록 함

어떤 하나의 함수로 작성을 함 그 함수를 타이머 를 들고 있는 곳에서

내부에서 리턴되는 함수에서는 로직만 사용하는 방식으로 사용

  1. (무한 스크롤을 구현했다 → )스크롤이 더 필요하다는 것을 어떻게 인지시켰는지? / 스크롤을 한 번 내릴때마다 수많은 이벤트가 등록될 텐데 어떤식으로 인지 시켰는지 → ? 어떻게 인터섹션 옵저버를 사용했는지 offset을 사용하였는지 질문한 것
  2. 타이머를 돌린 게 어떤 기법을 사용해서 돌린 것인지?

→ throttle방법

  1. debounce를 고려하지 않고 throttle을 사용한 이유는?

→ 디바운스는 마지막 부분에 계속 머무르고 있으면서 호출되기 때문에

  1. 노드에서는 이벤트 루프 기능이없는지?

→ 노드를 잘 몰른다고 답함

  1. 브라우저에서 비동기 처리가 되는 과정?

→ setTimeout을 예시로 들면

내부에서 콜백이 실행이 되면 브라우저 api로 콜백함수로 같이 실행이 되고

타이머가 끝이 나면 브라우저가 taskqueue로 보내줌

콜 스택이 상황이 되면 이벤트 루프가 taskqueue의 함수를 보내줌 콜스택에서

  1. ssr , csr를 어떤 상황에서 사용할 것인지 각각의 방법에서 어떤 장점이 있는지?

→ 검색 관련된 기능들은 ssr로, 사용자의 모션에 따라 전환이 많다면 csr로 진행한다

  1. 첫 페이지가 불러와 지는 것과 su? 가무슨 상관이 있는지?
  2. 브라우저 렌더링 과정에 대해서 설명?
  3. 렌더링 안에 렌더링이 그려지는 방법이 무엇인지?

→ 리페인트, 리플로우

  1. 리페인트, 리플로우 중 어떤 것이 성능이 더 안 좋은지?
  2. 렉시컬 환경이라는 것은 무엇인지?
  3. 외부환경 정보는 실행컨텍스트의 렉시컬 환경
  4. 동시성과 스케쥴링이 무엇인지?
  5. 클로저를 throttle를 활용함
  6. 다른 곳에서 클로저를 사용할 수 없는지 ?
  7. 클로저가 메모리 해제가 안될 것 같은데 해당 단점이 무엇인지?

→ 사용하지 않는 변수에 대해서 메모리 누수가 발생

  1. 그렇다면 메모리 해제는 언제 이루어 지는지?

→ 해제되지 않는 메모리가 참조되지 않을때 자바스크립트 엔진을 해재하는 시점 / 가비지 컬렉팅

  1. es6는 무엇인지?
  2. 렉시컬 환경을 가질때가 언제인지?

→ this과정에서 겪음

  1. 자바스크립트에서의 함수의 특성

  2. 1급 객체의 ...?

  3. 미션에서 적용한 시멘틱 태그를 사용하여 유의미한 HTML 구조 예시를 하나 말해주세요

→ 시멘틱 태그를 몰랐을 때에는 div를 넣어서 작성하였는데 , form 하고 input을 label을 사용하여서 좋았다

  1. 시멘틱 태그란 무엇인지?

→ 의미있는 태그, 내용물을 읽지 않아도 구조를 알 수 있음

  1. 검색엔진 최적화를 어떻게 하는지?
  2. 시멘틱 태그를 사용하지 않고 노출되는 방법은 무엇인지?

→ 광고, 유입량이 많아지면 인덱싱 우선순위를 가짐

  1. aria-labe를 사용한 경험이 있는지?
  2. 이벤트가 많아졌을때 대처할 수 있는 방법은 무엇인지?
  3. 이벤트 위임을 언제 사용할 수 있는지?
  4. 이벤트가 많아질때에만 위임을 사용하는지?
  5. 이벤트 해제는 어떻게 하는지?
  6. 화살표 함수는 익명함수이기 때문에 bind할 수 없는데 어떻게 this바인딩을 할 것인지?

→ 화살표 함수는 일반함수와 다르게 this가 상위 스코프를 가리키지 않는다

화살표 함수가 익명함수이기 때문에 bind를 할 수 없음

함수 선언형을 변수를 담을때에

변수에 담겨있기 때문에 식별이 가능하다?

  1. 일반 함수에서 call, apply, bind를 사용할 수 있는 이유는 무엇인지?

→ 가리킬 수 있기 때문에

  1. TDD를 어떤 미션에서 사용하였는지 TDD로 개발했을때의 장점은 무엇인지?

  2. 타입 narrowing을 어떻게 했는지?

  3. 미션을 진행하면서 this와 관련해서 문제를 겪은 적이 있는지? 만약 겪었다면 어떻게 해결하였는지?

  4. 웹팩 장점에는 무엇이 있는지?

  5. reflow repaint의 차이점 은 무엇인지?

  6. innerHTML 단점이 무엇이 있는지?

  7. spa 관련해서 서버에서 요청을 보내고 받았을 때에 프로토콜 HTTP

  8. http request, response 관련 질문 을 받음

  9. react의 router에서는 hash를 사용하지 않고서도 페이지 전환이 되는 지?

  10. callback vs promise

  11. var vs let vs const

  12. prototype chain을 멈추는 방법

  13. prototype없는 객체를 만드는 방법

  14. prototype체이닝으로 끝까지 가면 뭐가 있는가?

  15. setInterval vs recursive setTimeout

  16. 함수 레벨 스코프와 블록 레벨 스코프

  17. 스코프란?

  18. 상속과 공유 그리고 prototype

  19. 스코프 체인이란

  20. 객체의 property를 찾을때 prototype체이닝이 일어나서 엉뚱한 녀석을 찾지 않도록 하는 방법은?

  21. promise.all vs promise.allSettled

  22. Event Loop에 대해 설명해 주세요

  23. 이터러블객체가 무엇인가요?

  24. var의 문제점은?

    1. var의 암묵적 전역 중 스크립트 따로따로 선언했을 때 다른 스크립트에서 변수를 참조할 수 있나요?

  25. semantic tag가 왜 필요한지 실행예시?

    1. div를 쓰고 className을 주어도 되지 않나?

  26. 웹접근성이란 무엇인가요?

  27. NodeList와 HTMLCollection의 차이점은 무엇인가요?

  28. 이벤트 루프 동작원리를 간단한 예시를 들어서 설명해주세요

  29. 이벤트를 브라우저가 처리하는 방식 중에서 세가지 phase가 있다고 하는데 캡처링은 phase가 왜필요한지?

  30. 태스크큐 설명하면서 우선순위에 대해서 설명해주실수있는지

  31. 실행컨텍스트의 단계를 설명해주세요

  32. 이벤트 버블링 캡처링을 막고싶으면 어떻게 해야하는지?

  33. 혹시 다른 언어도 해보셨나요?

    1. 실행컨텍스트같은 것이 다른 언어에도 있는지?

  34. stoppropagation을 구체적으로 어떤 상황에서 사용할 수 있는지

  35. rAF써주셨는데 reflow와 repaint는 뭐가 다른가요?(포코)

    1. 뭐가 성능이 더 안좋은가요?
    2. reflow를 일으키는 메소드나 동작하는 예시를 설명해주세요
    3. reflow를 방지하기위해 사용했던 팁이나 기억들이 있으신지
    4. 그렇다면 rAF를 쓸필요가 없지않나요?
    5. 개발자가 아닌 사용자도 reflow나 repaint를 일으킬 수 있지 않을까요?

  36. DOM은 원본 HTML문서와 다른 것으로 알고 있는데 설명해주실 수 있는지

  37. JWT를 설명해주실수 있으신지

  38. 언제 사용하는 것이 좋을지

  39. 렉시컬 환경의 두 객체를 설명해주세요

  40. this는 무엇일까요?(포코)

    1. this가 상황별로 어떤 것을 가리키는지
    2. 렉시컬 scope를 this로 갖는 경우

  41. let, const는 왜 호이스팅이 일어나지 않는 것 처럼 보일까요?

  42. var과 let, const의 차이점은 무엇일까요?

  43. innerHTML, insertAdjacentHTML의 차이는 무엇일까요?

  44. innerHTML, insertAdjacentHTML의 사용방법을 설명해주세요.

    1. XSS 공격이란 무엇인가요?

  45. dependencies, devdependencies에 대해서 설명해주세요.

  46. package-lock.json 파일은 왜 있는걸까요?

    1. package.json에도 패키지 버전 정보가 있는데, 굳이 package-lock.json이 있어야할까요?

  47. webpack을 왜 사용해야할까요?

  48. Intersection Observer의 사용 방법을 설명해주세요

  49. CSR, SSR의 차이점을 설명해주세요.

  50. 이번 미션에서 historyAPI browser history를 사용했을 때, 웹페이지의 404 에러는 왜 나타난걸까요?