자바스크립트에서 Nullish Coalescing과 페이지 로딩 상태 관리 방법

29 Sep 2023

javascript

자바스크립트에서 Nullish Coalescing은 널 값(null 또는 undefined)을 다른 값으로 대체하는 데 사용되는 연산자입니다. 널 병합 연산자(??)라고도 불리며, 변수 또는 표현식이 널 또는 undefined인 경우 대체 값으로 지정된 값을 반환합니다.

const name = null;
const displayName = name ?? 'Unknown';
console.log(displayName); // 출력 결과: Unknown

const score = undefined;
const displayScore = score ?? 0;
console.log(displayScore); // 출력 결과: 0

Nullish Coalescing 연산자는 OR 연산자(

)와 유사한 개념이지만, OR 연산자는 falsy한 값들(0, 빈 문자열, false 등)도 대체 값으로 지정할 수 있기 때문에 더 많은 상황에서 사용될 수 있습니다.

페이지 로딩 상태 관리 방법

웹 애플리케이션에서 페이지 로딩 상태 관리는 사용자 경험을 향상시키는 데 매우 중요합니다. 사용자에게 로딩 중임을 알리거나, 로딩이 완료되었음을 알리는 등의 상태를 제공해야 합니다. 이를 위해 몇 가지 일반적인 방법을 소개하겠습니다.

1. 로딩 스피너

로딩 스피너는 로딩 중임을 시각적으로 표현하는 데 사용되는 디자인 요소입니다. 스피너는 보통 로딩 중임을 나타내거나 실제 컨텐츠가 로드되기 전에 보여줍니다.

<div class="loading-spinner"></div>

<style>
.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

2. 상태 변수 사용

로딩 상태를 추적하기 위해 상태 변수를 사용하는 방법도 있습니다. 예를 들어, 로딩 중임을 나타내는 변수를 true로 설정하고, 로딩이 완료되었을 때 false로 변경하는 방식입니다.

const isLoading = true;

if (isLoading) {
  // 로딩 중인 경우
  // 스피너를 화면에 표시하거나 로딩 메시지를 표시합니다.
} else {
  // 로딩이 완료된 경우
  // 로딩 스피너를 숨기거나 컨텐츠를 표시합니다.
}

위의 예시는 가장 기본적인 방법이며, 프레임워크나 라이브러리에서 제공하는 상태 관리 도구를 사용하는 것도 고려해볼만합니다.

#hashtags #javascript #webdevelopment