2025-07-30

1. 오늘 한 것 (What I Did)

• HTML로 만들어둔 페이지를 JSON 파일(데이터)과 JavaScript 함수로 쪼개서 다시 만들기 → 동적 렌더링
• 자바스크립트 최신 문법들 (템플릿 리터럴, 구조 분해 할당) 써보기
• http-server으로 로컬 서버 돌려서 파일 불러오는 방법 배우기 → CORS 문제 해결, 올바른 폴더에서 실행하기
• JSON 파싱 오류부터 JavaScript 문법 오류까지 다양한 디버깅 경험

---

2. 새로 이해한 것 (What I Learned)

왜 HTML을 쪼개서 만들까?

• 내용만 바꾸고 싶으면 JSON 파일만 수정하면 됨, 관리하기 편해짐 
• 같은 틀에 다른 데이터만 넣어서 여러 페이지 만들 수 있음, 재사용 가능 
• HTML 태그 직접 건드릴 일이 없어짐, 실수 줄어듦 

자바스크립트 새로운 문법들

템플릿 리터럴 - 문자열 만들기가 쉬워짐

// 예전 방식: 헷갈리고 실수하기 쉬움
let html = "<div>" + title + "</div>";

// 새로운 방식: 보기 쉽고 실수 안 남
let html = `<div>${title}</div>`;

구조 분해 할당 - 객체에서 값 꺼내기

// 예전 방식
function makeCard(data) {
    let title = data.title;
    let content = data.content;
}

// 새로운 방식: 한 번에 꺼내기
function makeCard({ title, content }) {
    // 바로 title, content 사용 가능
}

배열을 HTML로 바꾸는 패턴

// 데이터 배열을 HTML로 변환하는 기본 공식
데이터배열.map(항목 => `<div>${항목}</div>`).join('')

• map(): 배열의 각 요소를 변환
• join(): 배열을 문자열로 합치기

전체 흐름 정리

기본 패턴: 데이터 가져오기 → 변환하기 → 화면에 그리기

// 1. 데이터 로딩 (JSON 파일에서 데이터 가져오기)
fetch('./data.json')
    .then(response => response.json())
    
// 2. 데이터 변환 (데이터를 HTML로 바꾸기)
    .then(data => {
        return data.body.map(item => createComponent(item)).join('');
    })
    
// 3. DOM 렌더링 (화면에 보여주기)
    .then(html => {
        document.querySelector("#main").innerHTML = html;
    })

컴포넌트 만드는 기본 틀

const makeComponent = ({ title, content, items }) => {
    return `
        <div class="component">
            <h3>${title}</h3>
            <p>${content}</p>
            ${items.map(item => `<li>${item}</li>`).join('')}
        </div>
    `;
};

이 패턴만 알면 어떤 페이지든 똑같은 방식으로 만들 수 있다! (아마도....?) 

---

3. 만난 문제들과 해결법

자바스크립트 문법 실수 연발

• 증상: Malformed arrow function parameter list, contents.map is not a function
• 문제: 괄호 빠뜨리기, 변수명 헷갈리기, 함수 순서 바뀌기 
• 해결:  
  • 매개변수는 항상 괄호로 감싸기 (item) =>
  • 변수명 복사해서 붙여넣기로 일치시키기
  • map() 다음에 join() 순서 지키기

JSON 파일 에러

• 증상: Bad control character in string literal in JSON
• 문제: JSON에서 줄바꿈 때문에 파일이 깨짐
• 해결: 실제 엔터키 대신 \n 문자로 모두 바꾸기

데이터 구조 안 맞음

• 증상: TypeError: contents.map is not a function
• 문제: 코드에서 기대한 데이터 모양과 실제 JSON 데이터 모양이 달랐음
• 해결: JSON 파일 열어서 실제 구조 확인하고 코드 수정

---

4. 여전히 모르겠는 부분 

• 코드의 실행 순서, 흐름, 조건에 따라 결과가 왜 그렇게 나오는지 직관적으로 이해되지 않음
• DOM이 뭔지는 어렴풋이 알겠지만, 실제로 조작하거나 활용하는 방법이 익숙하지 않음
• 선언한 변수들이 언제 살아나고, 언제 사라지는지 모르겠음 → 스코프 개념인가? 
• 변수, 매개변수, 인자, 함수 등의 용어와 역할이 명확히 구분되지 않음