[FE & WEB] 웹 개념 - cs, js[질&답식] - [2]

1부에 이어서 써가려고 한다.

물어볼만한 질문을 답하는 형식으로 똑같이 진행할 것.

 

---

1. 질문) 프로토타입에 대해 설명해주세요.

2. 답변)

 

객체를 생성할 때, 해당 객체의 프로토타입으로서 동작하는 객체를 설정할 수 있습니다. 객체는 프로토타입으로부터 속성과 메서드를 상속받으며, 자신이 가지지 않은 속성이나 메서드를 프로토타입으로부터 찾을 수 있습니다. 이를 프로토타입 체인(Prototype Chain)이라고 합니다.

객체의 프로토타입은 __proto__라는 내부 속성으로 연결되어 있습니다. ES6(ES2015)부터는 Object.getPrototypeOf()와 Object.setPrototypeOf() 메서드를 사용하여 프로토타입을 다루는 더 쉬운 방법을 제공합니다.

자바스크립트에서 객체의 프로토타입은 함수(Function) 객체를 기반으로 만들어집니다. 즉, 모든 객체는 함수를 통해 생성되며, 해당 함수의 프로토타입 객체를 상속받습니다. 기본적으로 모든 객체는 Object라는 내장 함수의 프로토타입을 상속받습니다.

프로토타입을 사용하여 객체를 생성하는 방법은 다음과 같습니다:

생성자 함수(Constructor Function)와 new 키워드를 사용한 객체 생성:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

const person1 = new Person('Alice');
person1.sayHello(); // "Hello, my name is Alice"

Object.create() 메서드를 사용한 객체 생성:

const personProto = {
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

const person2 = Object.create(personProto);
person2.name = 'Bob';
person2.sayHello(); // "Hello, my name is Bob"

위의 예제에서 person1과 person2 객체는 Person 함수와 personProto 객체를 프로토타입으로 상속받아서 sayHello 메서드를 사용할 수 있게 됩니다.

프로토타입을 적절히 활용하면 코드의 재사용성과 상속을 쉽게 구현할 수 있으며, JavaScript에서 객체 지향 프로그래밍의 기반이 되는 개념입니다.

 

---

2. 질문) Promise를 사용한 비동기 통신과 asyns/await 에서 사용한 비동기 통신과 차이? 

2. 답변)

 

Promise를 사용한 비동기 통신과 async/await에서 사용한 비동기 통신은 JavaScript에서 비슷한 목적으로 사용되지만, 코드의 가독성과 유지보수성 측면에서 차이가 있습니다.

Promise를 사용한 비동기 통신:
Promise를 사용한 비동기 통신은 then()과 catch() 메서드를 이용하여 비동기 작업을 체이닝하는 방식입니다. 각각의 비동기 작업은 then() 메서드에서 다음 비동기 작업을 연결하고, 오류 처리는 catch() 메서드에서 수행합니다.

 

doSomethingAsync()
  .then(result1 => {
    return doSomethingElseAsync(result1);
  })
  .then(result2 => {
    return doThirdAsync(result2);
  })
  .then(finalResult => {
    console.log(finalResult);
  })
  .catch(error => {
    console.error(error);
  });

async/await를 사용한 비동기 통신:
async/await는 Promise를 기반으로 하며, 비동기 작업을 동기적으로 처리할 수 있도록 도와줍니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업의 결과를 기다릴 수 있습니다. 이로 인해 코드가 더 직관적이고 동기적인 스타일로 작성될 수 있습니다.

 

async function doAsyncTask() {
  try {
    const result1 = await doSomethingAsync();
    const result2 = await doSomethingElseAsync(result1);
    const finalResult = await doThirdAsync(result2);
    console.log(finalResult);
  } catch (error) {
    console.error(error);
  }
}

doAsyncTask();

차이점:

가독성: async/await를 사용한 코드가 더 직관적이고 읽기 쉽습니다. async/await는 코드를 동기적으로 작성할 수 있도록 해주기 때문에 콜백 지옥을 피하고 코드의 구조를 더 명확하게 표현할 수 있습니다.

오류 처리: Promise에서는 catch() 메서드로 오류를 처리하지만, async/await에서는 try/catch 구문을 사용하여 오류를 처리합니다. 이는 async/await를 사용한 코드가 예외 처리를 보다 직관적으로 할 수 있다는 장점이 있습니다.

코드 양: async/await를 사용하면 Promise를 사용한 코드보다 더 짧고 간결하게 작성할 수 있습니다.
사용해야 할 방법은 개발자의 취향과 프로젝트의 요구사항에 따라 달라질 수 있습니다. 일반적으로 async/await를 사용하는 것이 코드의 가독성을 향상시키고 디버깅을 간소화하는 데 도움이 되므로, 가능하다면 async/await를 사용하는 것이 좋습니다. 그러나 기존 코드가 Promise를 사용하고 있는 경우에는 이를 async/await로 바로 전환하기 어려울 수 있으므로, 적절한 판단과 상황에 맞게 선택하면 됩니다.

 

---

3. 질문) 함수 선언형과 함수 표현식에 대해서 설명?

3. 답변) 

 

함수 선언형(Function Declaration)과 함수 표현식(Function Expression)은 JavaScript에서 함수를 정의하는 두 가지 주요 방법입니다.

함수 선언형 (Function Declaration):
함수 선언형은 다음과 같이 function 키워드를 사용하여 함수를 정의하는 방법입니다.

function add(a, b) {
  return a + b;
}

 

함수 선언형은 함수가 정의된 위치와 관계없이 스코프 상단으로 호이스팅되어 전역 스코프 또는 해당 함수의 스코프 내에서 어디서든지 호출할 수 있습니다. 따라서 함수 선언 이전에 호출해도 에러가 발생하지 않습니다.

함수 표현식 (Function Expression):
함수 표현식은 함수를 변수에 할당하는 방식으로 정의하는 방법입니다. function 키워드를 사용하지만 변수에 함수를 할당하는 형태로 함수를 선언합니다.

 

const add = function(a, b) {
  return a + b;
};

함수 표현식은 변수에 함수를 할당하기 때문에 함수를 호출하기 전에 반드시 변수가 정의되어 있어야 합니다. 함수 표현식은 호이스팅이 발생하지 않으며, 정의된 위치 이전에 호출하면 에러가 발생합니다.

차이점:

호이스팅: 함수 선언형은 호이스팅으로 인해 함수 정의가 스코프 상단으로 끌어올려지지만, 함수 표현식은 호이스팅이 발생하지 않습니다. 따라서 함수 선언형은 정의 이전에 호출해도 문제 없지만, 함수 표현식은 정의 이전에 호출하면 에러가 발생합니다.
익명 함수: 함수 선언형은 반드시 함수에 이름을 붙여야 합니다. 하지만 함수 표현식은 이름을 붙일 수도 있고, 익명 함수(Anonymous Function)로 사용할 수도 있습니다.
할당 가능성: 함수 선언형은 변수에 할당할 수 없지만, 함수 표현식은 변수에 할당하여 사용할 수 있습니다.
어떤 방식을 선택할지는 개발자의 취향과 코드의 목적에 따라 달라집니다. 일반적으로 함수 선언형은 코드의 가독성을 높일 수 있으며, 함수 표현식은 함수를 값으로 다루어야 할 때 유용합니다. 또한, 함수 선언형은 호이스팅으로 인해 함수 정의가 끌어올려지므로, 코드를 구성하는 순서에 따라 함수 정의 위치를 신경 써야할 필요가 있습니다.

---

4. 질문) 렉시컬 환경에 대해서 설명?

4. 답변)

 

렉시컬 환경(Lexical Environment)은 JavaScript에서 스코프, 변수, 함수 등의 정보를 담고 있는 내부 데이터 구조입니다. 렉시컬 환경은 변수가 어떤 스코프에 속하는지와 해당 변수에 접근할 때 어떤 값이 바인딩되는지를 관리하는 역할을 합니다.

렉시컬 환경은 크게 두 가지 컴포넌트로 구성됩니다:

환경 레코드(Environment Record): 실제 변수와 해당 변수에 바인딩된 값을 저장하는 공간입니다. 이 환경 레코드는 객체로서, 변수 이름과 값의 쌍을 프로퍼티로 갖습니다. JavaScript 엔진은 변수를 사용할 때, 해당 변수를 찾기 위해 환경 레코드를 검색합니다.

외부 렉시컬 환경 참조(Outer Lexical Environment Reference): 중첩된 스코프가 있는 경우, 내부 스코프의 렉시컬 환경은 외부 스코프의 렉시컬 환경을 참조하는 링크를 갖습니다. 이를 통해 변수를 검색하는데 있어서 스코프 체인(Scope Chain)을 형성하여 외부 스코프까지 거슬러 올라가서 변수를 찾을 수 있습니다.

예를 들어, 다음과 같은 코드를 살펴봅시다:

 

function outer() {
  const x = 10;

  function inner() {
    const y = 20;
    console.log(x + y);
  }

  inner();
}

outer();

inner 렉시컬 환경:
Environment Record: {
  y: 20
}
Outer Lexical Environment Reference: outer 렉시컬 환경

여기서 inner 함수의 렉시컬 환경은 자신의 환경 레코드에 변수 y를 저장하고, 외부 렉시컬 환경 참조로 outer 함수의 렉시컬 환경을 가리킵니다. 따라서 inner 함수 내부에서 변수 x를 참조할 때, 외부 렉시컬 환경인 outer 함수의 환경 레코드에서 변수 x를 검색하여 사용합니다.

렉시컬 환경은 스코프와 클로저 등의 중요한 개념을 이해하는 데 도움이 되며, JavaScript 엔진은 이를 통해 변수의 유효 범위와 값의 바인딩을 관리하여 실행 컨텍스트를 구성합니다.

 

---

5. 질문) requestAnimationFrame이 머야?

5. 답변) 

 

requestAnimationFrame은 웹 브라우저에서 제공하는 JavaScript 메서드로, 주로 웹 애니메이션과 그래픽 처리에 사용됩니다. 이 메서드는 브라우저의 최적화된 리페인트 주기에 따라 애니메이션을 처리하도록 스케줄링합니다. 이를 통해 애니메이션이 부드럽게 실행되며, 화면의 주사율과 동기화하여 부드럽게 보여주는 장점이 있습니다.

requestAnimationFrame은 브라우저의 리페인트 주기에 따라 호출되므로, 브라우저가 활성화되어 있을 때만 실행됩니다. 즉, 해당 탭이나 창이 최소화되어 있거나 백그라운드로 이동한 상태에서는 애니메이션 처리가 중단되어 브라우저 성능에 영향을 덜 주는 특징이 있습니다.

requestAnimationFrame을 사용하여 애니메이션을 구현하면, setTimeout 또는 setInterval을 사용하는 것보다 더욱 부드러운 애니메이션을 만들 수 있습니다. 이는 브라우저가 애니메이션을 처리하기에 가장 적합한 타이밍에 함수를 호출하므로, 애니메이션이 화면 주사율과 동기화되어 깜빡임 없이 부드럽게 동작하는 결과를 얻을 수 있습니다.

requestAnimationFrame을 사용하여 애니메이션을 구현하는 방법은 다음과 같습니다:

 

function animateElement(timestamp) {
  // 애니메이션을 업데이트하는 로직 작성

  // requestAnimationFrame을 호출하여 다음 프레임 업데이트를 예약
  requestAnimationFrame(animateElement);
}

// 최초 애니메이션 시작
requestAnimationFrame(animateElement);

위 코드는 animateElement 함수를 requestAnimationFrame을 사용하여 반복적으로 호출하며, 애니메이션을 부드럽게 처리합니다. 애니메이션 업데이트 로직은 animateElement 함수 내부에 작성되며, 해당 함수는 브라우저가 최적의 시기에 호출하도록 합니다.

따라서 requestAnimationFrame은 웹 애니메이션과 그래픽 처리에서 매우 유용하게 사용되는 메서드로, 높은 성능과 부드러운 애니메이션을 제공하는 데 도움을 줍니다.

 

---

후기

 

프론트 직무에 지원했을 때 여러 물어볼만하 문제들 중 내가

바로 안떠올랐던걸 정리해보았다.

다음에는 리액트. 리덕스 등을 정리 할려고 한다.