오늘 공부에 투자한 순수한 시간: 2h 학습한 개념: *배열: 여러 개의 값을 순서대로 한 이름 아래 묶어 두는 상자 ex) const todos = ["영어 수업 준비", "생기부 검토", "닭가슴살 주문"]; console.log(todos[0]); // "영어 수업 준비" console.log(todos.length); // 3 필요한 이유: 1) 자유롭게 리스트 추가/삭제 2) 반복문으로 전부 한 번에 처리 가능 ex) const todos = [ { title: "영어 수업 준비", done: true }, { title: "생기부 검토", done: false }, { title: "교무회의", done: false }, ]; *for each(하나씩 꺼내서 뭔가 해라) todos.forEach((todo) => { console.log(todo.title); }); 영어 수업 준비 생기부 검토 교무회의 *map(하나씩 꺼내서 바꾼 새 배열을 만들어라)-> 원래 배열은 그대로 두고, 새구사 같은 새 배열을 돌려줌 const titles = todos.map ((todo) => todo.title); console.log(titles); ["영어 수업 준비", "생기부 검토", "교무회의"] *filter(조건에 맞는 것만 골라 새 배열을 만들어라) const notDone = todos.filter((todo) => todo.done === false); console.log(notDone); [ { title: "생기부 검토", done: false }, { title: "교무회의", done: false } ] *합쳐쓰기 ex) 안 끝난 일만 골라서 -> 제목만 뽑고 -> 하나씩 출력 todos .filter((todo) => !todo.done) .map((todo) => todo.title) .forEach((title, i) => console.log(`${i + 1}. ${title}`)); /// 배열의 칸을 하나씩 꺼내서, 번호. 제목 모양으로 화면에 찍어라 생기부 검토 교무회의 *렌더링 엔진, 자바스크립트 엔진 -렌더링 엔진: HTML과 CSS를 읽어서 화면에 그려 주는(render) 브라우저의 핵심 부품 (화가) -> 브라우저마다 페이지를 제멋대로 그려서, 같은 페이지가 브라우저별로 다르게 보이는 문제 해결 -> 엔진 하나를 여러 브라우저가 함께 쓰기 때문에 일관성이 생김 (파싱 → 렌더 트리 → 배치 → 그리기(→ 합성)라는 공통 공정을 만들고, 표준 규칙을 따르게 함) -자바스크립트 엔진: 자바스크립트 코드를 읽고 실행하는 부품 (ex. 크롬의 JS 엔진(V8) -> 지메일이나 지도처럼 무거운 웹앱을 빠르게 돌리기 위해 만듦) -> JS가 수십 배 빨라져 웹에서도 앱 수준의 프로그램이 가능해짐 *DOM, CSSOM / 필요한 이유 => 화면을 그리려면 둘 다 있어야 (DOM: 무엇이 있냐 / CSSOM: 어떻게 생겼냐) -DOM: 브라우저가 HTML 글자를 분석해 만든 부품 나무 (Document Object Model (문서를 객체로 표현한 모형) (HTML이 설계도라면 DOM은 부품 목록) -> 같은 기능을 브라우저별로 두 번 짜야 하는 불편함 해결 (같은 기능이 어느 브라우저에서나 똑같이 동작) -> 문서를 나무 구조로 표준화함 -CSSOM: 브라우저가 CSS를 파싱해서 만든 객체 나무 (CSS + Object Model) -> CSS를 읽는 브라우저마다 방법이 달랐습니다. -> CSS를 스타일시트 → 규칙 → 선택자 + 선언이라는 나무로 바꾸고, 규칙이 겹치면 명시도로 정함. AI 대화 내역 링크: https://claude.ai/share/0f78dcad-5d80-4d88-a827-ab9101f6196b 오늘 잘한 점: 어려운 내용을 이해하기 쉽게 가공하여 학습함. 퀴즈를 이용해서 이해도 점검하며 공부.