푸른영혼의별

프론트엔드와 관련된 질문이에요.
리액트에서 index를 key로 사용하는 것이 권장되지 않는 이유는 배열의 요소들이 추가되거나 삭제될 때, 배열의 순서가 바뀌는 경우 문제가 발생할 수 있기 때문입니다.

리액트는 key를 통해 리스트에서 어떤 요소가 변경, 추가, 삭제되었는지를 추적합니다. 그러나 index를 key로 사용하면 배열의 순서가 변경될 때 리액트가 요소들을 잘못 인식할 수 있습니다. 예를 들어, 배열에 새로운 요소가 추가되면 그 뒤에 있는 요소들의 인덱스가 모두 바뀌게 됩니다. 리액트는 이를 새로운 요소로 인식해 불필요하게 재렌더링을 하거나, 요소의 상태를 잘못 처리할 수 있습니다.

이로 인해 성능 문제가 발생하거나, 사용자 입력 상태 같은 요소가 의도치 않게 초기화되는 등 예기치 않은 버그가 생길 수 있습니다. 그래서 배열의 순서나 요소 변경에 영향을 받지 않는 고유한 값을 key로 사용하는 것이 좋습니다.

다만, 수정/삭제 등의 변경이 절대 발생하지 않는 정적인 리스트라면 index를 사용해도 무방합니다.

key로 사용할 고유 값을 생성하는 방법에는 어떤 것들이 있나요? 🤔
key로 사용할 고유한 값을 생성하는 방법에는 여러 가지가 있습니다. 주로 데이터의 유일성을 보장하고 변하지 않는 값을 사용하는 것이 중요합니다.

서버의 데이터베이스에서 제공하는 고유 ID를 사용하는 것이 가장 권장됩니다. 만약 이 방법이 불가능할 경우, ${item.title}_${item.username}와 같은 형태로 여러 필드를 결합하여 고유 값을 생성할 수 있습니다. 혹은, 렌더링 이전 시점에 UUID 혹은 랜덤 값을 생성하여 고유 값을 부여할 수 있습니다.

스레드, 프로세스, 코어의 수가 많을수록 시스템 성능이 향상된다고 생각할 수 있지만, 실제로는 그렇지 않을 확률이 큽니다.

스레드가 많으면?

스레드가 지나치게 많아지면 운영체제가 스레드 간 컨텍스트 스위칭을 자주 수행해야 하여 CPU 자원이 스레드 관리에 소모됩니다. 이로 인해 실제 작업 수행 효율이 떨어질 수 있으며, 많은 스레드가 동시에 실행될 경우 메모리나 캐시, 락 등의 자원을 경쟁하게 되어 성능 저하나 데드 락이 발생할 가능성이 높아집니다. 또한, 스레드가 많아지면 동기화와 상태 관리가 복잡해져 버그 발생 가능성도 커집니다.

프로세스가 많으면?

각 프로세스는 독립된 메모리 공간을 가집니다. 그래서 많은 프로세스가 동시에 실행되면 메모리 사용량이 급격히 증가할 수 있습니다. 또한, 프로세스를 생성하고 관리하는 데는 상당한 시스템 자원이 소모되며, 프로세스 간 통신(IPC)이 필요할 경우 성능 저하가 발생할 수 있습니다. 프로세스 간 컨텍스트 스위칭은 스레드 간 컨텍스트 스위칭보다 더 많은 오버헤드를 수반하기 때문에, 프로세스 수가 많아지면 시스템 성능이 저하될 수 있습니다. 운영체제는 동시에 실행할 수 있는 프로세스 수에 제한이 있으며, 이를 초과하면 새로운 프로세스 생성이 불가능하거나 시스템이 불안정해질 수 있습니다.

코어가 많으면?

많은 코어를 가진 CPU는 병렬 처리 성능을 향상시킬 수 있지만, 이를 최대한 활용하기 위해서는 소프트웨어가 멀티코어 환경에 최적화되어 있어야 합니다. 단일 스레드 작업이 주를 이루는 경우, 추가 코어의 이점을 제대로 활용하지 못할 수 있습니다. 또한, 코어 수가 많아질수록 CPU의 비용과 전력 소비가 증가할 수 있으며, 발열 관리도 더 복잡해집니다.

자바스크립트에서 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 실행하기까지 두 단계의 과정을 거치기 때문입니다.

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

디바운스(debounce) 와 쓰로틀(throttle) 은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법입니다. 이 두 가지 방법은 비슷해 보이지만, 동작 방식에 차이가 있습니다.

디바운스는 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러가 실행되는 방식입니다. 이를 통해 불필요하게 많은 이벤트 호출을 방지할 수 있습니다. 예를 들어, 검색창에 사용자가 키를 입력할 때마다 검색 요청을 보내면 부하가 지나치게 커지기 때문에, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보내는 방식으로 디바운스를 적용할 수 있습니다.

쓰로틀은 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리하는 방식입니다. 즉, 이벤트가 계속해서 발생하더라도 설정된 시간 동안은 한 번만 이벤트 핸들러가 실행됩니다. 예를 들어, 사용자가 연속 클릭을 한다면 클릭할 때마다 이벤트가 발생하는데, 이를 매번 처리하면 부하가 불필요하게 커지니, 쓰로틀을 적용해 일정 간격 내 한 번만 처리하게 할 수 있습니다.

디바운스와 쓰로틀 중에서 무한 스크롤 구현 시 어떤 방식을 선택하실 건가요? 그 이유는 무엇인가요? 🤔
무한 스크롤 구현 시에는 쓰로틀을 사용하는 것이 더 적합합니다.

먼저, 스크롤은 연속적인 동작이며 사용자가 페이지 하단에 도달했을 때 즉각적인 반응을 기대합니다. 쓰로틀은 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행하므로, 사용자에게 더 자연스러운 스크롤 경험을 제공할 수 있습니다.

반면, 디바운스를 사용할 경우, 사용자가 반복적으로 스크롤한다면 마지막 스크롤이 멈춘 후에야 데이터를 불러오기 시작하므로 지연이 발생할 수 있습니다.

TCP 3-way handshake는 TCP/IP 네트워크에서 안정적이고 연결 지향적인 통신을 설정하기 위해 사용되는 절차입니다. 이 절차는 클라이언트와 서버 간에 신뢰할 수 있는 연결을 설정하기 위해 세 개의 메시지(세그먼트)를 교환하는 과정을 포함합니다.

우선 클라이언트는 서버에 연결을 요청하는 SYN 세그먼트를 보내는데요. 이 세그먼트에는 초기 순서 번호(Sequence Number)와 윈도우 크기(Window Size) 정보가 포함되어 있습니다.

이후 서버는 클라이언트의 요청을 수락하고, SYN과 ACK 플래그가 설정된 세그먼트를 클라이언트에 보냅니다. 이 세그먼트는 서버의 초기 순서 번호와 클라이언트의 초기 순서 번호에 대한 응답(ACK=클라이언트의 초기 순서 번호 + 1)을 포함합니다.

클라이언트는 서버의 응답을 확인하고, ACK 플래그가 설정된 세그먼트를 서버에 보냅니다. 이 세그먼트는 서버의 순서 번호에 대한 응답(ACK=서버의 초기 순서 번호 + 1)을 포함합니다. 이 절차가 완료되면 클라이언트와 서버 간에 신뢰할 수 있는 연결이 설정되고, 데이터 전송이 시작될 수 있습니다.

 이벤트 전파는 DOM에서 이벤트가 발생했을 때, 그 이벤트가 어떤 방식으로 전파되는지를 설명하는 개념입니다. 이벤트 전파는 크게 세 단계로 나뉘는데, 캡처링(Capturing), 타겟(Target), 그리고 버블링(Bubbling) 입니다.

외부 서비스 장애로 인해 응답이 오래 걸린다고 했을 때 외부 API 응답으로 대기하는 자원들이 운영 서버 내부에 쌓이면서 성능에 악영향을 줄 수 있습니다. 이를 해결하기 위한 가장 기본적인 방법은 타임아웃을 설정하는 것입니다. 크게 타임아웃에는 커넥션 타임아웃과 리드 타임아웃, HTTP 커넥션 풀 타임아웃을 설정해 볼 수 있습니다.

다음과 같이 특정 서비스의 장애가 전체 서비스에 영향을 주는 경우는 어떻게 해결할 수 있을까요? 🤔
1. A 서비스, B 서비스, C 서비스 연동 코드가 HTTP 커넥션 풀을 공유한다.
2. A 서비스의 장애로 응답 시간 지연이 발생하는 경우
    2-1. 풀에 남은 커넥션이 점점 줄어든다.
    2-2. 풀에서 커넥션을 구하는 대기 시간이 증가한다.
    2-3. B, C 서비스에 대한 연동도 함께 대기한다.
이 경우는 벌크헤드 패턴을 적용해 볼 수 있습니다. 벌크헤드 패턴은 기능의 종류마다 자원 사용을 분리하는 것을 의미하는데요. 자원을 격리하여 서비스 일부에 장애가 발생해도 전체로 전파되지 않도록 보장해 주는 패턴입니다. 위 예시에서는 외부 서비스마다 다른 HTTP 커넥션 풀을 사용하도록 벌크헤드 패턴을 적용할 수 있습니다. 서로 다른 커넥션 풀을 사용하기 때문에 A 서비스에 문제가 발생해도 B,C의 영향을 최소화할 수 있습니다.

외부 서비스 장애가 계속 발생하면 어떻게 되나요?
지속되는 외부 서비스 장애로 타임아웃에 의한 서비스 에러가 발생할 수 있습니다. 외부 서비스가 장애가 발생했는데도 불구하고 운영 서버는 계속 요청을 보내게 되니, 불필요하게 응답 시간이 저해되고, 처리량도 감소하게 됩니다. 이 문제를 해결하기 위해서는 서킷 브레이커를 적용할 수 있는데요. 서킷 브레이커는 오류가 지속되는 경우 일정 시간 동안 기능 실행을 차단할 수 있습니다. 서킷 브레이커가 빠른 실패를 도와주기 때문에 외부 서비스 장애에 의한 응답 시간 증가를 예방할 수 있습니다.

먼저, 두 속성 모두 스크립트를 비동기적으로 로드한다는 공통점이 있습니다. 하지만 실행 시점에서 중요한 차이가 있습니다.

async 속성
async 속성에는 다음과 같은 특징들이 존재합니다.

스크립트를 비동기적으로 다운로드합니다.
다운로드가 완료되면 즉시 실행됩니다.
HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단됩니다.
여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행됩니다.
defer 속성
defer 속성에는 다음과 같은 특징들이 존재합니다.

스크립트를 비동기적으로 다운로드합니다.
HTML 문서 파싱이 완전히 끝난 후에 실행됩니다.
DOMContentLoaded 이벤트 발생 직전에 실행됩니다.
여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행됩니다.
따라서, 실행 순서가 중요한 스크립트나 메인 어플리케이션의 로직을 담고 있는 스크립트의 경우 defer를 사용하고, 독립적으로 실행되는 스크립트(ex. Google Analytics)의 경우 async를 사용하는 것이 적절합니다.

이러한 차이를 이해하고 적절히 활용하면 웹 페이지의 로딩 성능을 최적화하는 데 큰 도움이 됩니다

자바스크립트 함수에는 여러가지 특징들이 있습니다.

첫번째 특징은 자바스크립트 함수는 일급 객체라는 점입니다.
자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있습니다.

const sayHello = function() { return 'Hello'; };
console.log(sayHello()); // 'Hello'

const executeFunction = function(fn) {
  return fn();
};
console.log(executeFunction(sayHello)); // 'Hello'
이를 통해 매우 유연하게 코드를 작성할 수 있으며, 고차 함수를 포함한 다양한 패턴을 구현할 수 있습니다.

두번째 특징은 익명 함수와 함수 표현식입니다.
자바스크립트에서는 이름 없는 함수, 즉 익명 함수를 정의할 수 있습니다. 익명 함수는 함수 표현식에서 주로 사용되며, 필요에 따라 함수에 이름을 지정하지 않아도 됩니다.

const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3)); // 5
세번째 특징은 호이스팅입니다.
함수 선언식을 통해 선언한 함수는 코드가 실행되기 전에 호이스팅되어, 함수 선언 이전에 호출할 수 있습니다. 반면, 함수 표현식은 변수에 할당된 후에 사용할 수 있습니다.

console.log(declaredFunction()); // 'Declared Function'
function declaredFunction() {
  return 'Declared Function';
}

// 함수 표현식은 할당 후에만 사용할 수 있음
const expressedFunction = function() {
  return 'Expressed Function';
};
console.log(expressedFunction()); // 'Expressed Function'
네번째는 클로저입니다.
자바스크립트 함수로는 클로저를 구현할 수 있습니다. 클로저는 함수가 자신이 선언된 환경(스코프) 을 기억하고, 해당 환경에 접근할 수 있는 기능(혹은 특징)입니다. 이를 통해 함수는 자신이 선언된 당시 스코프 내의 변수를 참조할 수 있습니다.

function outer() {
  const outerVar = 'I am outer!';
  
  return function inner() {
    return outerVar; // 외부 변수에 접근 가능
  };
}
const innerFunction = outer();
console.log(innerFunction()); // 'I am outer!'
다음으로는 고차 함수입니다.
자바스크립트에서는 함수가 일급 객체이기 때문에, 고차 함수, 즉 다른 함수를 인자로 받거나 반환하는 함수를 정의할 수 있습니다. 이는 함수형 프로그래밍 패턴을 가능하게 합니다.

function multiplyBy(factor) {
  return function(num) {
    return num * factor;
  };
}
const double = multiplyBy(2);
console.log(double(5)); // 10
마지막으로 화살표 함수입니다.
화살표 함수는 더 간결한 문법을 제공하고, 특히 this 바인딩에서 기존 함수와 다른 동작을 합니다. 화살표 함수는 선언된 위치의 this 값을 유지하므로, 일반 함수와 달리 별도로 this를 바인딩할 필요가 없습니다.

const obj = {
  value: 42,
  method: function() {
    setTimeout(() => {
      console.log(this.value); // 42 (Arrow 함수는 obj의 this를 유지)
    }, 1000);
  }
};
obj.method();