10월 28일

오늘 공부에 투자한 순수한 시간: 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}`)); /// 배열의 칸을 하나씩 꺼내서, 번호. 제목 모양으로 화면에 찍어라

1. 생기부 검토

2. 교무회의

*렌더링 엔진, 자바스크립트 엔진

-렌더링 엔진: 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

오늘 잘한 점: 어려운 내용을 이해하기 쉽게 가공하여 학습함. 퀴즈를 이용해서 이해도 점검하며 공부.