const { serverTime } = window / window.__SERVERTIME__ = 1730000000000

이건 JS 문법 + 관례(convention) 이 섞인 부분이라 한 번에 정리해줄게.

---

1️⃣ const { serverTime } = window 는 뭐야?

이건 객체 구조 분해 할당 (destructuring assignment) 이야.

의미를 풀면:

const serverTime = window.serverTime;

이걸 짧게 쓴 문법이야.

---

예시로 보면 더 명확해

window.serverTime = 1730000000000;
const { serverTime } = window;

console.log(serverTime); // 1730000000000

👉 window 객체 안에서
👉 serverTime이라는 속성을 꺼내서
👉 같은 이름의 상수로 만든 것

---

이름 바꿔서 받을 수도 있음

const { serverTime: svrTime } = window;

➡️ window.serverTime → svrTime

---

2️⃣ window.__SERVER_TIME__ 는 뭐야?

이건 전혀 특별한 문법이 아님
👉 그냥 변수 이름 규칙 + 관례야.

window.__SERVER_TIME__ = 1730000000000;

➡️ 의미:

“이건 우리가 만든 전역 값이고,
일반 변수랑 헷갈리지 말아라”

---

그럼 왜 대문자?

관례 ①: 상수(CONSTANT) 표시

SERVER_TIME

• 값이 변하지 않는 기준값
• 설정값, 환경값

📌 “읽기 전용”이라는 의도 표현
(JS가 강제하진 않음)

---

그럼 왜 __ (언더바 두 개)?

관례 ②: 내부용 / 특수용

__SERVER_TIME__

 

이건:

• 라이브러리 내부 값
• 프레임워크 전역 데이터
• 건드리지 말라는 신호

📌 JS 문법상 의미 ❌
📌 사람에게 보내는 메시지

---

실제로 이런 패턴이 엄청 많아

• window.__NEXT_DATA__ (Next.js)
• window.__REACT_DEVTOOLS_GLOBAL_HOOK__
• window.__INITIAL_STATE__
• window.__ENV__

👉 전부:

“프레임워크가 쓰는 전역 데이터다”

---

3️⃣ 그럼 __ 쓰면 보호되나?

❌ 절대 아님

window.__SERVER_TIME__ = 0;

👉 마음대로 바꿀 수 있음

📌 보안 목적 ❌
📌 의사소통용 관례 ⭕

---

4️⃣ 언제 이런 이름을 쓰냐?

쓰는 경우

• HTML에서 JS로 데이터 전달
• 서버 → 클라이언트 초기값 주입
• 번들 JS 로딩 전에 접근해야 할 값

안 쓰는 경우

• 일반 로컬 변수
• 컴포넌트 내부 state

---

5️⃣ 다시 const { serverTime } = window로 돌아가면

이 문법은:

• 전역 객체에서 값 하나 뽑아 쓰기
• 코드 간결화
• 가독성 향상

📌 단점:

• serverTime이 없으면 undefined

---

안전하게 쓰면

const serverTime = window.serverTime ?? Date.now();

 

728x90

Q. ?? (null 병합 연산자)1️⃣ ?? 는 뭐냐?

 

window.serverTime ?? Date.now()

➡️ Nullish coalescing operator (널 병합 연산자)

 

의미 한 줄 요약:

왼쪽 값이 null / undefined면 →오른쪽 값을 써라

---

2️⃣ 네가 물어본 코드 해석

const serverTime = window.serverTime ?? Date.now();

이걸 말로 풀면:

1. window.serverTime을 본다
2. 그 값이
   • undefined 이거나
   • null 이면
3. 대신 Date.now()를 사용
4. 아니면 window.serverTime 그대로 사용

---

3️⃣ 예제로 보면 바로 이해됨

✅ case 1: 값이 있을 때

window.serverTime = 1730000000000;
const serverTime = window.serverTime ?? Date.now();

// 결과: 1730000000000

---

✅ case 2: 아예 없을 때

delete window.serverTime;
const serverTime = window.serverTime ?? Date.now();

// 결과: Date.now() 값

---

⚠️ 중요한 차이: ?? vs ||

많이 헷갈리는 부분이야.

---

4️⃣ ||랑 뭐가 다른데?

const t = window.serverTime || Date.now();

 

이건:

• 0
• ''
• false

같아도 ❌ “없다”로 취급함

---

반면 ??는:

const t = window.serverTime ?? Date.now();

• 0 ⭕
• false ⭕
• '' ⭕
• null ❌
• undefined ❌

👉 진짜로 “없는 경우”만 처리

---

5️⃣ 왜 여기서는 ??가 맞냐?

serverTime은:

• 숫자 (timestamp)
• 0은 이론상 가능 (1970-01-01)

그래서:

 

|| // ❌

?? // ⭕

---

6️⃣ 실제로 자주 쓰는 패턴

const config = window.__ENV__ ?? {};                                  // __ENV__ 없으면 {} 빈 객체
const serverTime = config.serverTime ?? Date.now();  

---

7️⃣ 한 문장으로 정리

??는
“값이 아예 없으면 대체값을 써라”는 연산자고,
||보다 더 정확한 기본값 처리 방식이다.

---

다음으로 이어서 이해하면 딱 좋은 것들:

• ??= 연산자
• 옵셔널 체이닝 ?.
• 왜 ||는 버그를 만들기 쉬운지

어디까지 더 볼까?

---

6️⃣ 한 문장 요약

• const { serverTime } = window
  → window.serverTime을 꺼내는 문법
• __SERVER_TIME__
  → 전역/내부용임을 나타내는 관례적 이름
• 대문자 + __는
  → “상수 + 건드리지 마라”는 신호

---

다음으로 이어서 보면 딱 좋은 주제:

• 왜 let/const는 window에 안 붙는지
• 전역 변수 충돌이 실제로 어떻게 사고로 이어지는지
• 프레임워크들이 전역 데이터를 숨기는 방식

어디까지 더 궁금해?