- 이벤트 버블링 또는 캡처링 현상을 이용해서 지난 미션들에서 구현하신 기능이 있으신가요?
→ 이벤트 위임, 동적으로 추가되거나 삭제되는 버튼 테그가 있었는데 해당 부분에 이벤트를 모두 다는 것이 아니라 부모 태그에 달아서 자식버튼에서 사용할 수 있도록 함
- 이벤트 위임을 왜 사용 해야 하는지?
→ 버튼 태그가 동적으로 변할 수 있기 때문에
1 - 동적으로 추가되거나 삭제되는 것에 일일이 이벤트를 달아주는 것은 힘들기 때문에
나인: 성능에 관한 답변 ⇒ 성능은 부차적인 효과,
2 - 이벤트가 전파되는 것을 방지하기 위해서
- 돔 요소를 forEach문등을 통해서 순회하면서 이벤트 리스너를 달아줄 수 도 있는데 어째서 이벤트 위임을 사용해야하는지?
- 이벤트 위임 덕분에 해결되는 현상이 더 없는지(이벤트를 적게 달아주는 것 말고 더 없는지?)
- 이벤트 버블링, 캡처링과 관련해서 이벤트 위임을 더 설명해주세요
- 호이스팅에 대해서 설명해 주세요
→ var 는 선언과 초기화가 동시에 일어나고 let const는 선언과 동시에 초기화가 일어나지 않는다
- 엘버가 생각하는 초기화란 무엇인지?
- webpack을 사용하는 이유는 무엇인지?
→ 번들링 도구를 사용하지 않으면 여러개의 자바스크립트 파일을 script태그 개수 만큼 파일 로드 요청을 보내게 되서 좀더 효율적으로 할 수 있다.
여러개의 자바스크립트를 하나로 번들링 해줄 수 있음
여러번의 리퀘스트를 한번에 줄일 수 있다.
- 여러번의 리퀘스트를 줄이면 어떤 이점이 있는지?
→ 사용자가 화면을 좀 더 빨리 볼 수 있다.
- 요청되는 데이터의 양은 같은데 웹팩으로 처리할때 더 빠르게 느껴지는 이유는 무엇인지?
→ 리퀘스트를 주고 받고 하는 비용 횟수에서 차이가 있으므로 : 브라우저의 요청 제한
- 웹팩에서 파일을 하나로 번들링 할 수 있는 이유는?
→ 자바스크립트 모듈들로 나누어져서 해당 모듈들을 import하면서 하나로 번들링 할 수 있음
- 자바스크립트 모듈들의 종류에는 무엇이 있는지? 웹팩에서 어떤 모듈을 사용해서 import를 하였는지?
→ commonJS, ES Module
- 스코프 체이닝이란?
→ 스코프는 식별자가 유효한 범위
각각의 스코프끼리 체인을 이루어서 식별자를 찾는 과정
- 프로토타입 대신에 클래스를 사용한 이유는?
→ 상속을 하면서 구현해본적이 있음
클래스로 짠 경우가 가독성이 좋아서
- 미션을 진행하면서 timer api을 사용했던 경험이 있는지 ?
→ 사용자에게 스낵바로 알림을 주는 것에서 setTimeout을 사용하였음
- setTimeout의 작동방식에 대해서 설명해주세요
→ 콜스택에 setTimeout의 실행컨텍스트가 들어감 webapi에서 들어감 해당 곳에서 나온 콜백 함수를 task queue에 들어가서 이벤트루프가 taskqueue와 콜 스택을 감시해서콜 스택이 비어있으면 콜스택으로 push를 함
- 프로토타입 하위 객체에서 부모의 객체에 접근하는 방법은 무엇이 있는지?
→ .을 찍어서 접근이 가능하다
- 그렇다면 프로토타입에서 하위객체에서의 접근을 막기 위해서는 어떻게 해야하는지? / 프로토타입 체이닝을 막으려면 어떻게 해야하는지
→ 의도적으로 끊어주어야 한다라고 답변 (답은 hasOwnProperty?)
- CSR 과 SSR의 장단점에 대해서 설명해주세요
→ CSR은 사용자가 사용했을 때에 UX가 더 좋다
- CSR이 UX적으러 더 좋은 이유가 무엇인가?
→ 사용자가 버튼을 클릭하게 되면 서버에서 다시 정보를 받아와서 화면이 깜빡이게 되서 보이지 않음
- 위의 사항 말고 다른 장점이 있어서 csr을 사용할 수 있는 것이 아닌가?
SEO
- 시멘틱하게 HTML을 작성한 경험이 있는지?
→ section, article, form등 해당 영역에 맞는 tag를 적절히 사용하려 했음
- 왜 시멘틱하게 태그를 작성해야하는가?
→ 개발자 측면에서 유지 보수에서 유리하다
사용성 증가가 있음 - 스크린 리더로 읽을 경우에 더 잘 읽힐 수 있음
검색 엔진 최적화가 가능하다 검색엔진 최적화에 더 용의 하다
- section 과 article의 차이/ 어떨때에 section tag를 사용하는지?
- 실행컨텍스트 코드 실행에 필요한 환경을 제공하고 어떤 식으로 사용되는지?
→ 변수 환경 렉시컬 환경
this 바인딩은 해당 실행컨텍스트가 호출이 될때에
환경레코드, 외부 환경참조로 나누어서 해당 유효범위에 있는 식별자를 모두 찾아냄, 외부환경 참조의 경우 해당 실행컨텍스트가 실행될 외부 실행 환경을 가리킴
- 식별자랑 유효범위가 무엇인가?
→ 식별자는 변수나 함수를 선언했을때의 이름을 식별자
유효범위는 식별자를 사용할 수 있는 공간
- 호이스팅에 대해서 간략하게 설명해주세요
→ 환경레코드에서 식별자에 대한 내용을 모두 수집해 놓음
초기화하는 부분은 수집을 안해서 undfined가 나옴
선언전에는 접근을 막음 (var, let, const를 사용하여 설명함)
- 템프럴 데드 존에 대해서 추가적인 설명
→ 어떤 변수가 아까 말씀드렸던 환경스코프에 등록이 되어도 호출을 하면 에러가 뜨는
- 비동기 처리를 어떤식으로 하였는지?
- 비동기란 무엇인지?
→ 어떤 코드가 실행을 하고 실행이 완료되었을때에 동기
비동기는 해당 코드가 실행이 완료되지 않았을 때에
사실 자바스크립트가 싱글 스레드... (이후 못적음)
- 콜백함수를 사용하는 이유는 무엇인지?
- 프로미스 객체는 무엇인가?
- async await만을 사용하였을 때에 불편한 점은 무엇인지?
- Promise와 비교했을때 async await를 사용해야만 하는 이유는? -> 포코 질문
- promise에서의 무슨 단점 때문에 async await가 나오게 됐는지?
- Async await 에는 없는 promise.all / .race 을 사용할 수 있음
- async await는 resolve와 reject 호출을 보장한다 ?
- async await의 문제 : top level await (tc39 stage 4)
- async await가 계속해서 이어지는 현상은 무엇인가?
- spa가 왜 필요하는지
- 사용자가 사용할때마다 요청을 해서는 안되는 이유는 무엇인지?
- spa를 사용할때에 문제점은 무엇인지
→ multipage애플리케이션 사용할때에 속도가 느려질 수 있다.
- csr과 ssr차이점은 무엇인가?
- 고차함수란 무엇인가?
- 자바스크립트에서 고차함수를 사용하는 방법
→ 자바스크립트가 인자를 1급 객체 자바스크립트에만있는 특성이라 인자로 넘어올 수 있는 것이다
- 프로토타입을 사용해서 상속을 구현해본적이 있는지
→ 프로토타입을 기반으로 만든 클래스를 사용했었음
미션중에서 상속을 사용해서 쓰는 경우가 없음
- 프로토타입이 서로가 서로를 가리킬때에 어떤 현상이 발생하는지
→ 에러가 발생한다
- 클로저를 실제로 사용한 경험이 있는지 있다면 어떨 때 좋았는지?
→ 클로저를 사용했던 경험은
무한 스크롤 을 구현할때 사용을 했었음
타이머 함수를 설정하고 해당 타이머가 끝나지 않을때에는 함수가 발생하지 않도록 함
어떤 하나의 함수로 작성을 함 그 함수를 타이머 를 들고 있는 곳에서
내부에서 리턴되는 함수에서는 로직만 사용하는 방식으로 사용
- (무한 스크롤을 구현했다 → )스크롤이 더 필요하다는 것을 어떻게 인지시켰는지? / 스크롤을 한 번 내릴때마다 수많은 이벤트가 등록될 텐데 어떤식으로 인지 시켰는지 → ? 어떻게 인터섹션 옵저버를 사용했는지 offset을 사용하였는지 질문한 것
- 타이머를 돌린 게 어떤 기법을 사용해서 돌린 것인지?
→ throttle방법
- debounce를 고려하지 않고 throttle을 사용한 이유는?
→ 디바운스는 마지막 부분에 계속 머무르고 있으면서 호출되기 때문에
- 노드에서는 이벤트 루프 기능이없는지?
→ 노드를 잘 몰른다고 답함
- 브라우저에서 비동기 처리가 되는 과정?
→ setTimeout을 예시로 들면
내부에서 콜백이 실행이 되면 브라우저 api로 콜백함수로 같이 실행이 되고
타이머가 끝이 나면 브라우저가 taskqueue로 보내줌
콜 스택이 상황이 되면 이벤트 루프가 taskqueue의 함수를 보내줌 콜스택에서
- ssr , csr를 어떤 상황에서 사용할 것인지 각각의 방법에서 어떤 장점이 있는지?
→ 검색 관련된 기능들은 ssr로, 사용자의 모션에 따라 전환이 많다면 csr로 진행한다
- 첫 페이지가 불러와 지는 것과 su? 가무슨 상관이 있는지?
- 브라우저 렌더링 과정에 대해서 설명?
- 렌더링 안에 렌더링이 그려지는 방법이 무엇인지?
→ 리페인트, 리플로우
- 리페인트, 리플로우 중 어떤 것이 성능이 더 안 좋은지?
- 렉시컬 환경이라는 것은 무엇인지?
- 외부환경 정보는 실행컨텍스트의 렉시컬 환경
- 동시성과 스케쥴링이 무엇인지?
- 클로저를 throttle를 활용함
- 다른 곳에서 클로저를 사용할 수 없는지 ?
- 클로저가 메모리 해제가 안될 것 같은데 해당 단점이 무엇인지?
→ 사용하지 않는 변수에 대해서 메모리 누수가 발생
- 그렇다면 메모리 해제는 언제 이루어 지는지?
→ 해제되지 않는 메모리가 참조되지 않을때 자바스크립트 엔진을 해재하는 시점 / 가비지 컬렉팅
- es6는 무엇인지?
- 렉시컬 환경을 가질때가 언제인지?
→ this과정에서 겪음
-
자바스크립트에서의 함수의 특성
-
1급 객체의 ...?
-
미션에서 적용한 시멘틱 태그를 사용하여 유의미한 HTML 구조 예시를 하나 말해주세요
→ 시멘틱 태그를 몰랐을 때에는 div를 넣어서 작성하였는데 , form 하고 input을 label을 사용하여서 좋았다
- 시멘틱 태그란 무엇인지?
→ 의미있는 태그, 내용물을 읽지 않아도 구조를 알 수 있음
- 검색엔진 최적화를 어떻게 하는지?
- 시멘틱 태그를 사용하지 않고 노출되는 방법은 무엇인지?
→ 광고, 유입량이 많아지면 인덱싱 우선순위를 가짐
- aria-labe를 사용한 경험이 있는지?
- 이벤트가 많아졌을때 대처할 수 있는 방법은 무엇인지?
- 이벤트 위임을 언제 사용할 수 있는지?
- 이벤트가 많아질때에만 위임을 사용하는지?
- 이벤트 해제는 어떻게 하는지?
- 화살표 함수는 익명함수이기 때문에 bind할 수 없는데 어떻게 this바인딩을 할 것인지?
→ 화살표 함수는 일반함수와 다르게 this가 상위 스코프를 가리키지 않는다
화살표 함수가 익명함수이기 때문에 bind를 할 수 없음
함수 선언형을 변수를 담을때에
변수에 담겨있기 때문에 식별이 가능하다?
- 일반 함수에서 call, apply, bind를 사용할 수 있는 이유는 무엇인지?
→ 가리킬 수 있기 때문에
-
TDD를 어떤 미션에서 사용하였는지 TDD로 개발했을때의 장점은 무엇인지?
-
타입 narrowing을 어떻게 했는지?
-
미션을 진행하면서 this와 관련해서 문제를 겪은 적이 있는지? 만약 겪었다면 어떻게 해결하였는지?
-
웹팩 장점에는 무엇이 있는지?
-
reflow repaint의 차이점 은 무엇인지?
-
innerHTML 단점이 무엇이 있는지?
-
spa 관련해서 서버에서 요청을 보내고 받았을 때에 프로토콜 HTTP
-
http request, response 관련 질문 을 받음
-
react의 router에서는 hash를 사용하지 않고서도 페이지 전환이 되는 지?
-
callback vs promise
-
var vs let vs const
-
prototype chain을 멈추는 방법
-
prototype없는 객체를 만드는 방법
-
prototype체이닝으로 끝까지 가면 뭐가 있는가?
-
setInterval vs recursive setTimeout
-
함수 레벨 스코프와 블록 레벨 스코프
-
스코프란?
-
상속과 공유 그리고 prototype
-
스코프 체인이란
-
객체의 property를 찾을때 prototype체이닝이 일어나서 엉뚱한 녀석을 찾지 않도록 하는 방법은?
-
promise.all vs promise.allSettled
-
Event Loop에 대해 설명해 주세요
-
이터러블객체가 무엇인가요?
-
var의 문제점은?
- var의 암묵적 전역 중 스크립트 따로따로 선언했을 때 다른 스크립트에서 변수를 참조할 수 있나요?
-
semantic tag가 왜 필요한지 실행예시?
- div를 쓰고 className을 주어도 되지 않나?
-
웹접근성이란 무엇인가요?
-
NodeList와 HTMLCollection의 차이점은 무엇인가요?
-
이벤트 루프 동작원리를 간단한 예시를 들어서 설명해주세요
-
이벤트를 브라우저가 처리하는 방식 중에서 세가지 phase가 있다고 하는데 캡처링은 phase가 왜필요한지?
-
태스크큐 설명하면서 우선순위에 대해서 설명해주실수있는지
-
실행컨텍스트의 단계를 설명해주세요
-
이벤트 버블링 캡처링을 막고싶으면 어떻게 해야하는지?
-
혹시 다른 언어도 해보셨나요?
- 실행컨텍스트같은 것이 다른 언어에도 있는지?
-
stoppropagation을 구체적으로 어떤 상황에서 사용할 수 있는지
-
rAF써주셨는데 reflow와 repaint는 뭐가 다른가요?(포코)
- 뭐가 성능이 더 안좋은가요?
- reflow를 일으키는 메소드나 동작하는 예시를 설명해주세요
- reflow를 방지하기위해 사용했던 팁이나 기억들이 있으신지
- 그렇다면 rAF를 쓸필요가 없지않나요?
- 개발자가 아닌 사용자도 reflow나 repaint를 일으킬 수 있지 않을까요?
-
DOM은 원본 HTML문서와 다른 것으로 알고 있는데 설명해주실 수 있는지
-
JWT를 설명해주실수 있으신지
-
언제 사용하는 것이 좋을지
-
렉시컬 환경의 두 객체를 설명해주세요
-
this는 무엇일까요?(포코)
- this가 상황별로 어떤 것을 가리키는지
- 렉시컬 scope를 this로 갖는 경우
-
let, const는 왜 호이스팅이 일어나지 않는 것 처럼 보일까요?
-
var과 let, const의 차이점은 무엇일까요?
-
innerHTML, insertAdjacentHTML의 차이는 무엇일까요?
-
innerHTML, insertAdjacentHTML의 사용방법을 설명해주세요.
- XSS 공격이란 무엇인가요?
-
dependencies, devdependencies에 대해서 설명해주세요.
-
package-lock.json 파일은 왜 있는걸까요?
- package.json에도 패키지 버전 정보가 있는데, 굳이 package-lock.json이 있어야할까요?
-
webpack을 왜 사용해야할까요?
-
Intersection Observer의 사용 방법을 설명해주세요
-
CSR, SSR의 차이점을 설명해주세요.
-
이번 미션에서 historyAPI browser history를 사용했을 때, 웹페이지의 404 에러는 왜 나타난걸까요?