[인프런 워밍업 스터디 클럽 3기 FE] 1주차 발자국
1주차 학습 정리명시적 형변환• Number() - 전달된 값을 숫자로 변환합니다. 정수, 실수 모두 지원하며, 불리언, null, 공백 등도 처리합니다. - 숫자로 변환할 수 없는 문자열(예: "123abc")은 NaN을 반환합니다.• parseInt() - 문자열을 정수로 해석합니다. 문자열의 앞부분부터 숫자를 읽어 정수로 변환합니다. - 두 번째 인수로 진법(보통 10)을 명시하는 것이 좋으며, 변환 불가능한 경우 NaN을 반환합니다.• parseFloat() - 문자열을 부동 소수점 숫자로 해석합니다. - 숫자 앞의 공백은 무시하지만, 숫자 형식이 깨지는 시점에서 파싱을 중단합니다.• String() - 전달된 값을 문자열로 변환합니다. - 객체의 경우 내부적으로 toString()을 호출하며, null과 undefined는 각각 "null", "undefined"로 변환됩니다.• Boolean() - 전달된 값을 불리언(true/false)으로 변환합니다. - 0, NaN, 빈 문자열(""), null, undefined는 false로, 그 외의 값은 true로 변환됩니다. 암시적 형변환• 문자열 결합: + 연산자가 문자열과 다른 타입의 값을 만나면 다른 타입이 문자열로 변환됩니다. (예시: "5" + 5 → "55")• 동등 비교 (==) : 비교하는 두 값의 타입이 다르면 자바스크립트가 암묵적으로 타입을 변환하여 비교합니다. • === (일치비교)는 두 값의 타입이 동일한 경우에만 true를 반환(암묵적 타입 변환 없음) • == (동등비교)는 두 값의 타입이 다르면 암묵적인 형변환을 수행• 불리언 컨텍스트: 조건문이나 논리 연산에서 값이 불리언으로 평가되어 암묵적으로 형변환됩니다.• 산술 연산: - 연산자가 숫자와 다른 타입의 값을 만나면 다른 타입이 숫자로 변환됩니다. (예시: "10" - 2 → 8) 배열, 유사 배열 객체, 이터러블배열 (Array) - Array 생성자나 배열 리터럴([])을 통해 생성된 객체 - 내장 메서드(push, pop, map, filter 등)를 사용할 수 있음 - 프로토타입 체인을 통해 다양한 기능이 제공유사 배열 객체 (Array-like Object) - 인덱스와 length 프로퍼티를 가지고 있지만, Array.prototype에 정의된 메서드를 직접 사용할 수 없는 객체 - 함수 내의 arguments 객체, DOM에서 반환되는 NodeList 등 - Array.from()이나 전개 연산자(...) 등을 사용해 실제 배열로 변환 가능이터러블 (Iterable) - [Symbol.iterator] 메서드를 가지고 있는 객체입니다. - 배열, 문자열, Map, Set 등이 이터러블이며, for...of 문 등으로 순회할 수 있습니다. - for...of 문은 [Symbol.iterator] 메서드 내 next 함수를 호출 const arrayLike = { 0: "a", 1: "b", 2: "c", length: 3 }; const realArray = Array.from(arrayLike); console.log(realArray) // 출력: ["a", "b", "c"] const iterable = { maxData: 5, [Symbol.iterator]: function() { let index = 0; const max = this.maxData; return { next: function() { return index < max ? { value: index++, done: false } : { done: true }; } }; } }; for (const value of iterable) { console.log(value); // 0, 1, 2, 3, 4 출력 } DOM, window, Node• 자바스크립트는 다양한 환경에서 동작하며, 이때 플랫폼을 호스트라고 부름• 브라우저에서는 모든 객체의 최상위에 존재하는 window라는 루트 객체가 있음• 새로운 탭이나 창이 열릴 때 내부적으로 자동 생성됩니다.• window 객체는 DOM, BOM, JS로 구성됩니다. - DOM (문서 객체 모델) • 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다. • 최상위 객체는 document이며, DOM의 엔트리 포인트 역할을 합니다. • document의 메서드를 통해 DOM을 선택, 추가, 삭제할 수 있습니다. - BOM (브라우저 객체 모델) • DOM과 JS를 제외하고 호스트가 제공하는 추가 객체들을 나타냅니다 (비표준). - JS (ECMAScript Core) • ECMAScript에 정의된 내장 객체와 함수들이 전역 객체(window)의 프로퍼티로 등록되어 접근 가능합니다.• 전역 변수와 함수는 window 객체의 프로퍼티로 등록되어 전역 스코프를 형성합니다. window ├── document (DOM) ├── documentElement () ├── head (document.head) └── body (document.body) └── ... (노드, 메서드 등) ├── BOM (Browser Object Model) ├── location ├── navigator ├── history ├── screen └── ... (타이머, cookies 등) ├── JavaScript (ECMAScript Core) ├── 기본 객체들 (Object, Array, Function 등) └── 내장 함수 및 프로토타입 └── 기타 Web API ├── fetch, XMLHttpRequest ├── WebSockets ├── Canvas, WebGL 등 └── ... (여러 브라우저 제공 API) 노드 타입 (총 12가지 중 자주 사용되는 4가지)• Document Node: DOM의 진입점 (document)• Element Node: HTML 태그를 나타내며, DOM 트리를 구성함• Text Node: 텍스트(새 줄, 공백 포함)를 나타냄• Comment Node: 주석을 나타내며, 화면에 표시되지는 않지만 정보 기록 및 DOM 조작 시 활용 가능 1주차 과제day1 음식 메뉴 앱day2 가위바위보 앱day3 퀴즈 앱day4 책 리스트 앱day5 깃허브 파인더 앱
