Week 1

Last updated on April 2, 2026

📊 대화 분석: 사용자님의 질문 패턴

질문 카테고리별 분류

카테고리	질문 내용	빈도
JavaScript 기본	Array methods (map, filter, sort), localeCompare	🔴🔴🔴
Svelte 개념	Reactive statement ($:), 언제 사용?	🔴🔴🔴
데이터 흐름	MQTT 실시간 업데이트, 정렬 타이밍	🔴🔴
브라우저 API	history.replaceState, localStorage	🔴🔴
아키텍처	App.svelte 동작, routes 배열 순서	🔴
디버깅	“왜 같은 결과가 나올까?”, Edge case	🔴

🎯 약점 분석

JavaScript 배열/객체 메서드 이해 부족 🔴🔴🔴

증거:

“alertData에서 새 배열 만드는 방법?”
“localeCompare가 뭐야?”
“parseInt() vs localeCompare 차이?”
“정렬 주석처리해도 결과가 같더라”

문제:

Array.map(), filter(), reduce() 동작 원리 불명확
Set의 순서 보장 개념 모름
정렬 알고리즘 이해 부족

Svelte Reactive Statement 개념 혼란 🔴🔴🔴

증거:

”$: 없이 구현할 수 없을까?”
“시니어는 $:를 싫어하는 것 같아”
“MQTT 데이터가 추가되면 자동으로 정렬 안 되지?”

문제:

$:의 동작 시점 불명확
언제 사용해야 하는지 판단 못 함
Reactive vs Imperative 차이 이해 부족

데이터 흐름과 타이밍 이해 부족 🔴🔴

증거:

“최초 페이지 로드 시 alertData가 자동으로 정렬 안 되지?”
“MQTT로 데이터 추가하면 어떻게 되나?”

문제:

초기 실행 vs 런타임 업데이트 차이 모름
불변성(Immutability) 개념 부족

App.svelte 같은 “큰 그림” 이해 부족 🔴

증거:

“App.svelte가 하는 일이 이해가 안 가”
“routes[2]는 없는 거 아닌가?”

문제:

컴포넌트 생명주기 이해 부족
배열 인덱싱 기본 개념 부족

💪 강점 분석

✅ 잘하는 것들

질문을 잘 함: 이해 안 되면 바로 물어봄
직접 테스트: 코드 수정하고 콘솔 찍어봄
Step-by-step 사고: “한 줄씩 되짚어 가면서 동작 점검”
피드백 수용: 시니어 조언 적극 반영

📚 맞춤형 학습 커리큘럼

🎓 Phase 1: JavaScript 기초 다지기 (1-2주)

Week 1: 배열 완벽 정복

Day 1-2: 배열 메서드 기본

MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

실습 과제: // 과제 1: alertData에서 층 목록 추출 (중복 제거) const alertData = [ { floorName: ‘1F’, status: ‘Alert’ }, { floorName: ‘2F’, status: ‘Closed’ }, { floorName: ‘1F’, status: ‘Offline’ }, ];

// TODO: Set 사용해서 [‘1F’, ‘2F’] 만들기 const floors = […new Set(alertData.map(a => a.floorName))]; console.log(floors);

// 과제 2: Status별 개수 세기 // 결과: { Alert: 1, Closed: 1, Offline: 1 } const statusCount = alertData.reduce((acc, item) => { acc[item.status] = (acc[item.status] || 0) + 1; return acc; }, {});

 방법 1: 이중 reduce 사용 (고급)

  각 건물의 층 배열을 순회하면서 alertCount를 누적:

  function calculateTotalAlerts() {
    const total = MOCK_CENTER_ALARM_STAT.reduce((sum, buildingObj) => {
      // 1. 건물 객체에서 건물명 키 찾기 (A동, B동)
      const buildingKey = Object.keys(buildingObj).find(key => key !== 'total');
      const floors = buildingObj[buildingKey]; // 층 배열

      // 2. 각 층의 alertCount 합산
      const buildingTotal = floors.reduce((floorSum, floor) => {
        return floorSum + floor.alertCount;
      }, 0);

      return sum + buildingTotal;
    }, 0);

    return total;
  }

  디버깅용 console.log 추가 버전:
  function calculateTotalAlerts() {
    const total = MOCK_CENTER_ALARM_STAT.reduce((sum, buildingObj) => {
      const buildingKey = Object.keys(buildingObj).find(key => key !== 'total');
      const floors = buildingObj[buildingKey];

      console.log('건물:', buildingKey, '층 개수:', floors.length);

      const buildingTotal = floors.reduce((floorSum, floor) => {
        console.log('  층:', floor.floorName, 'alertCount:', floor.alertCount);
        return floorSum + floor.alertCount;
      }, 0);

      console.log('건물 합계:', buildingTotal);
      return sum + buildingTotal;
    }, 0);

    console.log('🔥 최종 전체 합계:', total);
    return total;
  }

  ---
  방법 2: forEach 중첩 (초보자 친화적)

  reduce가 어렵다면 forEach로 먼저 연습:

  function calculateTotalAlerts() {
    let total = 0;

    MOCK_CENTER_ALARM_STAT.forEach(buildingObj => {
      // 건물 키 찾기
      const buildingKey = Object.keys(buildingObj).find(key => key !== 'total');
      const floors = buildingObj[buildingKey];

      // 각 층의 alertCount 더하기
      floors.forEach(floor => {
        console.log('추가:', floor.floorName, floor.alertCount);
        total += floor.alertCount;
      });
    });

    console.log('최종 합계:', total);
    return total;
  }

  ---
  방법 3: flatMap 사용 (모던 JavaScript)

  가장 깔끔한 방법:

  function calculateTotalAlerts() {
    const total = MOCK_CENTER_ALARM_STAT
      .flatMap(buildingObj => {
        const buildingKey = Object.keys(buildingObj).find(key => key !== 'total');
        return buildingObj[buildingKey]; // 모든 층을 하나의 배열로 평탄화
      })
      .reduce((sum, floor) => sum + floor.alertCount, 0);

    return total;
  }

  ---
  🎯 학습 포인트

  Object.keys() 이해하기

  const obj = { A동: [...], total: 9 };
  Object.keys(obj); // ['A동', 'total']

  find()로 조건 필터링

  const keys = ['A동', 'total'];
  const buildingKey = keys.find(key => key !== 'total'); // 'A동'

  이중 reduce의 흐름

  외부 reduce: 건물별 순회 (A동 → B동)
    ↓
    내부 reduce: 층별 순회 (1F → 2F → 3F → 4F)
      ↓
      alertCount 누적

  ---
  💡 추천 학습 순서

  1. 먼저 방법 2 (forEach)로 시작 → 로직 이해하기 쉬움
  2. 방법 1 (이중 reduce)로 도전 → 함수형 프로그래밍 연습
  3. 방법 3 (flatMap) → 고급 기법 맛보기
     
     
     
     
 function getFloorAlertCount(bldgName, floorID) {
   // 1. MOCK_CENTER_ALARM_STAT에서 건물 찾기
   // 2. 건물의 층 배열에서 floorID 매칭
   // 3. alertCount 반환 (없으면 0)
 }

 템플릿에서 사용:
 {#each bldg.floorList || [] as floor}
   <div class="text-center fw-bold text-mute">
     {getFloorAlertCount(bldg.bldgName, floor.floorID)}
   </div>
 {/each}
 

Day 3-4: 정렬과 비교

MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

실습 과제: // 과제 3: 다양한 정렬 방법 비교 const floors = [‘10F’, ‘2F’, ‘1F’, ‘B1’, ‘Roof’];

// 방법 1: 기본 정렬 (문자열) console.log([…floors].sort()); // 결과: [‘1F’, ‘10F’, ‘2F’, ‘B1’, ‘Roof’] ← 10F가 2F 앞에!

// 방법 2: localeCompare console.log([…floors].sort((a, b) => a.localeCompare(b))); // 결과: 같음

// 방법 3: localeCompare + numeric console.log([…floors].sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))); // 결과: [‘1F’, ‘2F’, ‘10F’, ‘B1’, ‘Roof’] ← 올바른 순서!

// 과제 4: 왜 이런 차이가 생기는지 이해하기

Day 5: Set과 순서

MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set
블로그: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set#%EC%84%A4%EB%AA%85

실습 과제: // 과제 5: Set의 순서 이해하기 const data = [ { time: ‘09:00:02’, floor: ‘3F’ }, { time: ‘09:00:01’, floor: ‘1F’ }, { time: ‘09:00:01’, floor: ‘2F’ }, ];

// Q: Set은 삽입 순서를 보장한다. 결과는? const floors1 = […new Set(data.map(a => a.floor))]; console.log(‘정렬 전:’, floors1); // [‘3F’, ‘1F’, ‘2F’]

// Q: 데이터를 먼저 정렬하면? const sortedData = data.sort((a, b) => a.floor.localeCompare(b.floor, undefined, { numeric: true })); const floors2 = […new Set(sortedData.map(a => a.floor))]; console.log(‘정렬 후:’, floors2); // [‘1F’, ‘2F’, ‘3F’]

// 결론: Set은 순서를 보장하지만, 입력 순서를 보장한다!

Week 2: 객체와 참조

Day 1-2: 얕은 복사 vs 깊은 복사

MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

실습 과제: // 과제 6: 불변성 이해하기 let alertData = [ { time: ‘09:00:01’, status: ‘Alert’ } ];

// ❌ 잘못된 방법 (원본 변경) alertData.push({ time: ‘09:00:02’, status: ‘Closed’ });

// ✅ 올바른 방법 (새 배열 생성) alertData = […alertData, { time: ‘09:00:02’, status: ‘Closed’ }];

// Svelte에서는 왜 후자를 선호할까? (반응성 때문!)

Day 3-5: 브라우저 API

MDN: https://developer.mozilla.org/ko/docs/Web/API/History_API
MDN: https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

실습 과제: // 과제 7: URL 변경 없이 상태 업데이트 // 현재 URL: http://localhost:5173/floor/1?spaceID=3

// history.replaceState로 쿼리스트링 제거 const newUrl = window.location.pathname; window.history.replaceState(null, ‘’, newUrl); // 결과: http://localhost:5173/floor/1

// 과제 8: localStorage 활용 localStorage.setItem(‘selectedFloor’, ‘2F’); const floor = localStorage.getItem(‘selectedFloor’); console.log(floor); // ‘2F’

🎓 Phase 2: Svelte 핵심 개념 (1주)

Day 1-3: Reactive Statements 완전 정복

https://svelte.dev/tutorial/reactive-declarations
https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive

실습 과제: // 과제 9: $:의 동작 시점 이해 let count = 0;

// Q1: 이 코드는 언제 실행될까? $: doubled = count * 2; $: console.log(‘count changed:’, count);

// Q2: 버튼 클릭 시 몇 번 실행될까? function increment() { count += 1; count += 1; count += 1; } // 답: console.log는 1번만 실행! (Svelte가 batch 처리)

// 과제 10: 의존성 이해 let firstName = ‘John’; let lastName = ‘Doe’;

$: fullName = ${firstName} ${lastName}; // Q: firstName만 바뀌면? → fullName 재계산 // Q: lastName만 바뀌면? → fullName 재계산 // Q: 둘 다 안 바뀌면? → 재계산 안 함

Day 4-5: 생명주기

https://svelte.dev/tutorial/onmount
https://svelte.dev/tutorial/ondestroy

실습 과제: // 과제 11: onMount vs $: 차이 let data = [];

// 방법 1: onMount onMount(() => { data = fetchData(); // 1번만 실행 });

// 방법 2: $: $: { data = fetchData(); // data가 바뀔 때마다 실행 (무한 루프!) }

// Q: 언제 onMount를 쓰고, 언제 $:를 쓸까?

🎓 Phase 3: 실전 패턴 (진행 중)

지금 작업하는 프로젝트로 학습

패턴 1: MQTT 실시간 데이터 처리 // ❌ 초보자 코드 let alertData = […].sort(…); // 초기만 정렬

// ✅ 프로 코드 let alertData = […]; $: sortedData = alertData.slice().sort(…); // 항상 정렬

패턴 2: 캐스케이딩 필터 // ❌ 초보자 코드 function updateSpaceList() { … } function updateFilteredData() { … }

// ✅ 프로 코드 $: spaceList = selectedFloor === ‘all’ ? … : …; $: filteredData = alertData.filter(…);

📅 2주 학습 플랜

Week 1: JavaScript 기초

월: Array.map(), filter() 연습 화: Array.reduce() 연습 수: 정렬 (sort, localeCompare) 목: Set, 순서 보장 개념 금: 복습 + 퀴즈 주말: 실전 과제 (Bldg.svelte 리팩토링)

Week 2: Svelte + 실전

월: Reactive statements ($:) 화: $: 의존성 추적 수: onMount, onDestroy 목: 실전 패턴 (MQTT) 금: EventLog.svelte 직접 구현 주말: 전체 복습

🎯 학습 방법 권장

MDN 문서 읽는 법

1️⃣ 예제부터 읽기 (이론은 나중에) 2️⃣ 콘솔에서 직접 실행 3️⃣ 변형해보기 (숫자 바꾸기, 조건 바꾸기) 4️⃣ 이론 읽기 5️⃣ 실제 프로젝트에 적용

매일 30분 코딩 챌린지

// 매일 아침 루틴 const data = [/* 랜덤 데이터 */];

// Day 1: map 사용해서 특정 필드만 추출 // Day 2: filter 사용해서 조건 필터링 // Day 3: reduce 사용해서 그룹핑 // …

시니어에게 질문하기 전 체크리스트

✅ MDN 문서 읽어봤는가? ✅ 콘솔에서 테스트해봤는가? ✅ 에러 메시지를 구글링해봤는가? ✅ 비슷한 코드를 프로젝트에서 찾아봤는가?

🚀 첫 주 시작하기

오늘 당장 시작할 수 있는 것:

MDN Array.map() 읽기 (10분)
콘솔 열고 과제 1 풀기 (20분)
Bldg.svelte에서 map() 찾아보기 (10분)

총 40분이면 첫 스텝 완료!

— 📊 대화 분석: 사용자님의 질문 패턴