2주 동안 배운 전부를 하나로 합친다: 변수/함수(Day 1-3), 배열/객체 처리(Day 4-7), DOM/이벤트(Day 8-9), 클래스(Day 12), Web Components(Day 13). 새 개념은 없다 — 오늘은 순수하게 "읽고 쓸 수 있는가"를 스스로 확인하는 자리다.
<berry-stats>는 진짜로 이 사이트에 끼워 넣을 수 있다 — _system/components.js에 등록하고 아무 문서에나 <berry-stats></berry-stats>를 써넣으면 된다. 오늘은 우선 독립된 파일로 완성하는 게 목표다.
<berry-stats> 커스텀 엘리먼트Pi의 상태(온도/가동시간/쓰로틀링 여부)를 받아서 카드 형태로 렌더링하는 위젯. state 명령이 하는 일을 시각적 컴포넌트로 옮긴다고 생각하면 된다.
_submissions/day14.js다음 요구사항을 만족하는 BerryStats extends HTMLElement 클래스를 작성하고 customElements.define("berry-stats", BerryStats)로 등록한다.
a. 데이터 입력
setData({ tempC, uptimeSeconds, throttled }) 인스턴스 메서드를 구현한다. 호출되면 내부 상태를 저장하고 즉시 다시 렌더링한다.
b. 온도 표시 (색상 코드)
Day 13의 temp-badge 로직을 재사용한다: tempC를 80 이상 "위험"(빨강), 65 이상 "경고"(노랑), 그 외 "정상"(초록) 라벨과 함께 표시.
c. 가동시간 표시
Day 3의 formatUptime(seconds)를 이 파일 안에 그대로(또는 개선해서) 포함시켜, uptimeSeconds를 "N일 N시간" 형식으로 표시.
d. 쓰로틀링 배너
throttled가 true면 눈에 띄는 경고 문구("⚠ 쓰로틀링 발생 — 전원 어댑터 확인" 등)를 카드 안에 추가로 렌더링하고, false면 안 보이게 한다.
e. 렌더링 방식
innerHTML 한 방으로 몰아넣지 말고, createElement/textContent/classList 조합으로 최소 온도 라벨 요소와 가동시간 요소는 분리된 자식 노드로 구성한다 (Day 8에서 배운 안전한 렌더링 원칙 적용). connectedCallback에서 최초 렌더링, setData 호출 시 재렌더링되어야 한다.
테스트용 사용 예시 (이렇게 동작해야 함):
const el = document.createElement("berry-stats");
document.body.append(el);
el.setData({ tempC: 71.4, uptimeSeconds: 276543, throttled: false });
// 카드에 "경고 71.4°C", "3일 4시간" 표시, 배너 없음
el.setData({ tempC: 83.0, uptimeSeconds: 500, throttled: true });
// "위험 83°C", "8분", 쓰로틀링 배너 표시됨cd ~/Documents/javascript-2주완성
bun _grade.ts day14serve.ts가 TS다), 또는 이 위젯을 진짜로 사이트에 붙여보는 것부터 시작하면 좋다.