생각해보기🤔 - 영화 리뷰

 

🍿 실제 API를 테스트해야 하는 경우와 fixture를 이용하여 테스트하는 것은 어떻게 다르고 각각 언제 사용하는 것이 좋을까요?

1. 실제 API 테스트

• 실제 API를 호출하여 서버와 클라이언트 간의 상호 작용 테스트 가능
• 실제 서버에 요청을 보내고 응답을 받아 작동 확인
• 네트워크 지연 및 다양한 요청/응답 시나리오 시뮬레이션 가능
• API 변경이 일어난 경우 업데이트 된 API가 올바르게 작동하는지 확인 가능

2. fixture를 이용한 테스트

• 실제 서버를 사용하지 않기 때문에 빠른 테스트 실행이 가능하며 외부 API 의존성 없음
• 응답 데이터를 미리 정의함으로써 예상되는 결과를 확인하고 특정 함수 또는 모듈만을 대상으로 테스트 수행 가능

 

🍿제네릭은 왜 사용할까요?

1. 타입 안정성

제네릭을 사용하면 컴파일 시점에서 타입 안정성을 보장할 수 있다.

일반적인 객체를 사용할 경우, 런타임에 다양한 타입의 객체를 저장하고 관리할 수 있다.

그러나 객체를 추출할 때 형변환을 수동으로 해야 하며 이는 다른 타입으로 인한 런타임 오류를 발생시킬 수 있다.

이때 제네릭을 사용하면 형변환 과정에서 발생할 수 있는 오류를 피할 수 있으며, 컴파일 시점에 타입 검사를 진행해 오류를 방지한다.

 

2. 코드 재사용성

제네릭을 사용하면 한 번 작성한 코드를 다양한 타입의 객체에 적용할 수 있다.

이를 통해 중복을 줄이고 유지 보수를 향상시킬 수 있다.

 

 

🍿 제네릭을 가급적 많이 사용하는 것이 좋을까요? 좋다면 왜 좋고, 안 좋다면 왜 안 좋을까요?

상황에 따라 적절하게 사용하는 것이 좋다.

제네릭을 사용할 때 장점으로는 위와 같이 타입 안정성과 코드 재사용성에 좋지만

코드가 복잡해지거나 예외 사항을 처리해야 할 때 까다로울 수 있다.

따라서 제네릭의 장점을 최대한 활용하되, 사용하기 애매하거나 복잡한 경우에는 다른 대안을 사용하는 것이 좋다.

 

 

🍿비동기가 무슨 뜻인가요?

비동기란 작업이 동시적으로 처리되도록 하여 다른 작업이 끝날 때까지 기다리지 않고 바로 다음 작업을 실행하는 것을 의미한다.

즉, 작업이 순차적으로 진행되지 않고 여러 작업이 동시에 실행될 수 있는 방식이다.

비동기 처리를 사용하면 애플리케이션의 처리 시간을 단축하고 전반적인 성능 향상을 도모할 수 있다.

JavaScript에는 대표적으로 Callback, Promise, async... await가 있다.

 

 

🍿Callback을 쓰는 데 어떤 한계가 있어서 Promise가 등장했나요?

1. 콜백 지옥

콜백 함수를 중첩하여 사용할 경우, 코드의 가독성이 떨어지고 유지보수가 어렵다.

특히 여러 비동기 작업을 연결해야 할 때 문제가 된다.

깊이 중첩된 콜백 구조는 들여쓰기가 많아지며, 콜백 지옥이 생긴다.

 

getData(function(a) {
  getMoreData(a, function(b) {
    getMoreData(b, function(c) {
      getMoreData(c, function(d) {
		...
      });
    });
  });
});

 

2. 오류 처리

콜백 함수의 경우 각 함수마다 별도의 오류 처리 코드를 작성해야 하는데, 이는 코드의 일관성과 가독성을 해친다.

 

 

이를 해결하기 위해 Promise가 등장했고, 장점은 아래와 같다.

 

1. 체이닝 

비동기 작업에 대한 반환 값이 Promise 객체이므로, 간결하게 여러 비동기 작업을 연결할 수 있다.

 

getData()
  .then((a) => getMoreData(a))
  .then((b) => getMoreData(b))
  .then((c) => getMoreData(c))
  .then((d) => {
    ...
  });

 

2. 중앙 집중식 오류 처리

Promise에서는 catch 메서드를 사용하여 한 곳에서 오류를 처리할 수 있다.

 

getData()
  .then((a) => getMoreData(a))
  .then((b) => getMoreData(b))
  .then((c) => getMoreData(c))
  .then((d) => {
    ...
  })
  .catch((error) => {
    // 오류 처리
  });

 

🍿 비동기 함수 내에서 await 키워드를 쓰면 동기적으로 동작할까요? 그렇다면, 그렇지 않다면 그 이유는?

비동기 함수 내에서 await를 사용하면 코드가 동기적으로 동작하지 않는다.

await는 async 함수 내에서 사용되며, Promise의 결과를 기다리는 역할을 한다.

await를 사용하면 코드 실행이 일시적으로 멈추어 보이지만, 실제로는 이벤트 루프를 적절하게 활용하여 비동기 처리가 진행된다.

 

 

🍿 비동기 함수에서 숫자 1을 반환한다면 어떤 타입일까요?

Promise 타입이다.

비동기 함수는 항상 Promise를 반환한다.

 

async function asyncFunction() {
  return 1;
}

 

위 함수의 반환 값은 숫자 1이 아닌, Promise<number> 타입이 된다.

이 값을 사용하려면 Promise.then() 메서드를 사용하거나, await를 이용해야 한다.

 

// then() 사용
asyncFunction().then((value) => {
  console.log(value); // 출력: 1
});

// await 사용
(async () => {
  const value = await asyncFunction();
  console.log(value); // 출력: 1
})();

 

 

🍿 무한 스크롤을 구현하는 방식은 어떤 방식이 있나요?

1. 스크롤 이벤트 리스너

스크롤 이벤트 리스너를 통해 사용자의 스크롤 동작을 감지한다.

리스너가 특정 조건을 충족하면 추가 콘텐츠를 비동기 호출로부터 받아 화면에 삽입한다.

 

2. Intersection Observer

Intersection Observer는 대상 요소와 임계값을 설정해 원하는 요소가 보이는지에 따라 콜백 함수를 자동으로 호출한다.

 

 

🍿 이벤트 리스너를 사용했을 때의 한계점은 무엇이 있나요?

1. 성능 저하

빈번한 이벤트 처리에 의해 성능 저하가 발생할 수 있다.

이를 해결하기 위해 디바운싱 또는 쓰로틀링 기법을 사용할 수 있다.

 

2. 비효율적인 요청 및 데이터 로드

사용자가 스크롤을 과도하게 반복하는 경우 다수의 요청이 간섭되어 처리되지 않거나, 서버에 많은 부담을 줄 수 있다.

이를 해결하기 위해 적절한 요청 간격을 설정하거나, 데이터 로드가 완료되기 전에 추가 요청을 제한할 수 있다.

 

 

🍿 Intersection Observer는 어떻게 사용하는지 설명해 보세요.

1. Intersection Observer 인스턴스 생성

const callback = (entries, observer) => {
  entries.forEach(entry => {
    // 교차점을 감지할 때 실행할 로직 작성
  });
};

const options = {
  root: null, // 기본값은 null로 뷰포트를 기준으로 함
  rootMargin: '0px', // 뷰포트와 관찰 대상 요소를 둘러싼 여백 설정
  threshold: 1.0 // 1.0은 전체 요소가 뷰포트에 들어와 있는 경우를 의미함 (0.5는 50%, 0은 일부만 들어와도 감지)
};

const observer = new IntersectionObserver(callback, options);

 

2. 관찰 대상 요소 설정

const targetElement = document.querySelector('.target'); // 관찰 대상 요소 선택
observer.observe(targetElement); // 관찰 대상 요소에 Intersection Observer를 적용함

 

3. 관찰 중단 및 연결 해제

observer.unobserve(targetElement); // 특정 요소에 대한 관찰 중단
observer.disconnect(); // 모든 요소에 대한 관찰 중단

 

 

🍿 Intersection Observer의 한계점은 무엇이 있나요?

감지 지연

Intersection Observer는 비동기 방식으로 작동한다.

이 때문에 이벤트 처리에 약간의 지연이 발생할 수 있다.

극히 빠른 동작에서 정확한 처리를 요구하는 경우 영향을 줄 수 있다.

 

 

🍿 media query를 사용하는 것과 class를 더하고 빼주는 것은 각각 어떤 장단점들이 있을까요?

1. media query

장점

• CSS에서 직접적으로 반응형 웹 디자인을 처리한다.
• 빠르고 쉽게 구현할 수 있어 로딩 성능이 더 좋다.
• 유지 관리가 편리하다. CSS 코드 내에서 찾아볼 수 있어 스타일 관련 변경을 처리하기 쉽다.

단점

• 동적 디자인 요소를 처리하는데 어려움이 있다.

2. class 사용

장점

• 동적 디자인 요소를 처리할 수 있다. 특히 사용자 인터렉션을 기반으로 스타일링을 변경할 수 있다.

단점

• 유지 관리가 어려울 수 있다. 변경 사항을 처리하려면 CSS와 JavaScript 코드 모두 파악해야 한다.

 

🍿 디자인 패턴의 정의는 무엇인가요?

디자인 패턴이란 소프트웨어 설계 과정에서 반복적으로 발생하는 특정 문제들을 효율적이고 재사용 가능한 방식으로 해결하는 일종의 설계 템플릿 또는 지침이다.

디자인 패턴을 통해 개발자의 생산성을 향상 시키고 코드의 유지 관리성, 확장성, 재사용성이 증가한다.

 

 

🍿 디자인 패턴을 쓰면 좋을까요? 왜 좋을까요? 좋지 않다면, 왜 좋지 않을까요?

장점

• 재사용성
• 유지 관리성
• 커뮤니케이션

단점

• 과잉 설계
• 패턴 사용의 강제

즉, 문제와 요구 사항에 적합한 경우에만 사용하는 것이 좋다.

소프트웨어의 요구 사항과 문제를 정확하게 이해한 후, 적절한 디자인 패턴을 적용하는 것이 중요하다.