프론트엔드/Javascript 개념 7

context & 함수

실행 컨텍스트에 대해 설명해주세요. 실행 컨텍스트란 실행 가능한 코드를 형상화 하고 구분하는 추상적인 개념이다. 자바스크립트는 내부적으로 하나의 콜 스택을 가지며 이 콜스택 내에 쌓이는 함수에 대한 정보를 실행 컨텍스트라고 한다. 함수 선언식 방식과 함수 표현식, 화살표 함수 방식의 차이에 대해 설명해주세요. 함수 선언식은 가장 기본적인 함수 선언 방식으로, function기호를 앞에 붙임으로써 함수를 선언한다. 함수 표현식은 객체 리터럴을 통해 객체를 생성하듯이 함수를 생성하는 방법이다. 화살표 함수는 es6에서 추가된 함수 선언 방식으로 function기호를 따로 쓰지 않고도 함수를 실행할 수 있다. 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요? 익명함수는 함수명 대..

scope/hoisting

Scope 스코프는 그 자체로 ‘범위’라는 뜻을 가지고 있다. 자바스크립트에서 스코프는 ‘어떤 변수에 접근할 수 있는 유효범위’이다. 전역 scope를 사용했을 때 장단점에 관해 설명해주세요. 단점 : 변수의 유효 범위가 크면 클 수록 코드의 가독성 문제가 발생할 수 있다. 전역 scope는 생명 주기가 길기 때문에 메모리 상에서 오랜 시간 유지되며 상태 변경에 의한 오류가 발생할 수 있다. 스코프 체인상에서 가장 종점에 존재하기 때문에 가장 마지막에 검색이 되며 검색 속도가 가장 느리다. 장점 : 코드 상에서 어디에서나 접근할 수 있다. 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇인가요? 전역 스코프는 코드 상 어디에서든 접근할 수 있으므로 다른 블록에서 변수..

이벤트 & 모듈

이벤트 버블링(Event Bubbling)에 대해서 설명하세요. 이벤트 버블링은 특정 면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달 되어 가는 특성을 의미한다. 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요. 이벤트 캡쳐링은 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식으로, window로부터 이벤트가 발생한 요소까지 이벤트를 전파한다. 이벤트 버블링을 막기 위한 방법은? e.stopPropgation() api사용 이벤트 루프와 태스크 큐에 대해 설명해 주세요. 이벤트 루프는 콜 스택과 콜백 큐의 상태를 체크하여, 콜 스택이 빈 상태가 되면, 콜백 큐의 첫번째 콜백을 콜 스택으로 밀어넣는다. 그리고 이러한 행동을 틱이라고 한다. 태스크 큐는 ..

protype & closer

Prototype 자바스크립트는 프로토타입 기반 언어이다. 자바스크립트의 객체는 모두 부모 객체와 연결되어 있고 객체 지향의 상속과 같은 개념으로 자식 객체는 부모 객체의 프라퍼티나 함수를 사용할 수 있다. 이 때 부모 객체를 프로토타입이라고 한다. 1. prototype 기반 상속은 어떻게 하는지 설명해주세요. prototype 상속에는 속성 상속과 메소드 상속이 있다. 속성 상속은 객체의 속성에 접근하려할 때 객체 내 속성 뿐만 아니라 객체의 프로토타입과 체인의 종단에 있는 프로토타입까지의 속성을 탐색하여 접근하는 것을 말한다. 그리고 메소드 상속은 Object.create()를 사용하여 객체를 복사하듯이 만들고 원본 객체안에 있는 함수를 사용하듯이 쓸 수 있다. 2. 프로토타입 체인이란 무엇인가요?..

콜백지옥과 프로미스

자바스크립트는 기본적으로 동기처리를 수행한다. 자바스크립트는 호이스팅(코드상에서 선언된 함수나 var 변수를 코드상 제일 위에 위치 시켜 순서대로 읽는 것)수행 이후 부터 코드를 순서대로 실행한다. 하지만 비동기처리는 코드의 순서에 크게 구애를 받지않고 정해진 함수를 처리하는 것을 말한다. 대표적으로 setTimeout함수가 있다. setTime함수는 일정 시간이 지나면 그 안에 있는 콜백함수를 실행시키기 때문에 코드 순서에 크게 상관없이 동작한다. Why Promise? promise를 인터넷으로 영화를 예매하는 상황과 비유해보자면, 영화를 예매할 때 원하는 좌석을 누르면 영화예매에 성공한다. 하지만 만일 좌석이 없거나 원하는 좌석을 이미 다른 사람이 예약한 경우라면 예매가 불가능하다는 메세지를 소비자..

동기 처리 방식 vs 비동기 처리 방식

동기 처리방식은 현재 실행 중인 태스크가 있다면 다음에 실행될 태스크는 현재 실행 중인 태스크가 종료될 때까지 기다렸다가 처리하는 방식이다. 이 와는 반대로 비동기 처리 방식은 현재 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식이다. 동기 방식의 장점과 단점: 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 된다는 단점이 있다. 비동기 방식의 장점과 단점 : 비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는 단점이 있다. 이미지 출처 : http..

async vs defer

브라우저는 html, css, javascript순서로 파싱을 한다. 웹 브라우저는 기본적으로 동기적인 실행을 하기 때문에 중간에 다른 파일이 파싱을 시작하면 파싱이 끝날 때까지 기다려야 해서 성능상 문제가 발생할 수 있다. 일반적인 파싱 방법 1. HTML 파싱을 진행하다가 script 태그를 만나면 html파싱을 중지한다. 2. script파일을 파싱하고 파싱이 완료되면 실행한다. 3. script파일의 파싱이 완료된 후에 html파싱을 다시 진행해 완료한다. 따라서 일반적으로 script 태그를 html태그 맨 마지막 부분에 넣어 html 파싱을 마친 후 script 태그를 실행하도록 한다. 하지만, 사용자 입장에서 javascript로 구현한 성능을 경험하기까지 시간이 소요될 것이고, 이는 사용자..