Today Hailie Learned

DOM (Document Object Model) DOM은 HTML 문서를 파싱한 결과물이다. HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다. DOM의 개념을 이해한다. DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다. HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다. [심화]DOM과 JavaScript의 차이에 대해 이해할 수 있다. HTML에 JavaScript를 ..

1. 인스타그램, 페이스북 같은 모바일 앱 리엑트 네이티브를 활용하자. 자바스크립트를 기반으로 프로그래밍할 수 있는 환경이다. https://reactnative.dev/ 2. 디스코드 같은 비디오 앱 & 오디오 앱 브라우저에서 프로그램이 돌아가는 비디오 앱 webRTC 기술을 사용. 자바스크립트로 만든 신디사이저도 존재한다. https://www.websynths.com/ 3. 아두이노, 라즈베리 파이 같은 로봇 및 IoT 디바이스 앱. JohnnyFive라는 라이브러리 활용해서 LED, 각종 모터, GPS, 적외선 센서, 근접 센서 등등 하드웨어를 제어할 수 있다. 4. 카카오톡이나 페이스북 메신저 같이 플랫폼에서 챗봇 기능 제공하는 챗봇 AI 스피커에도 적용가능 https://developers.k..

prompt() 입력창의 제목 부분에 메시지를 삽입할 수 있고, 창 입력 공간에 메시지를 삽입할 수 있다. const 행성 = [ '수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성', ]; const num = prompt('몇 번째 행성이 궁금한가요?'); console.log(행성[num - 1]); 입력한대로 콘솔창에 로그된다. 4를 입력한다면 화성이 출력된다. const 행성 = [ '수성', '금성', '지구', '화성', '목성', '토성', '천왕성', '해왕성', ]; const num = prompt('몇 번째 행성이 궁금한가요?', '9번째 명왕성은 제외되었습니다.'); console.log(행성[num - 1]); prompt("윈도우창", "입력창..

for in 반복문 const object = { a: 1, b: 2, c: 3 }; for (const property in object) { console.log(`${property}: ${object[property]}`); } // "a: 1" // "b: 2" // "c: 3" 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다. Symbol로 키가 지정된 속성은 무시한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in for...in - JavaScript | MDN for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자..

🍋 spread문법 => 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 6 🍋 rest 문법 => 파라미터를 배열의 형태로 받아서 사용할 수 있다. (파라미터 갯수가 가변적일때 유용) function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 6 sum(1,2,3,4) // 10 🍅 배열 합치기 let arr1 = [0, 1, 2]; let arr2 ..

예제1) result 값은? let x = 10; function outer () { x = 20; function inner () { x = x + 20; } inner(); } outer(); let result = x; 예제2) result 값은? let x = 10; function outer () { x = 20; function inner () { let x; x = x + 20; return x; } inner(); } outer(); let result = x; 예제3) result 값은? let x = 10; function outer () { let x = 20; function inner () { x = x + 10; return x; } inner(); } outer(); let r..

[목표] 클로저 함수의 정의와 특징에 대해서 이해할 수 있다. 클로저가 갖는 스코프 범위를 이해할 수 있다. 클로저를 이용해 유용하게 쓰이는 몇 가지 패턴을 이해할 수 있다. [참고] 클로저 공부하기 전 화살표 함수를 알아보자! 화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다. const pow = x => x * x; console.log(pow(10)); // 100 클로저란? 함수와 함수가 선언된 어휘적 환경의 조합 반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수 클로저 특징과 예시 🐜 특징 1. 함수의 호출이 두 번 발생 ✔️ ..

목표 스코프의 의미와 적용 범위를 이해한다. 스코프의 주요 규칙을 이해한다. 전역 스코프와 지역 스코프의 차이를 이해한다. block scope와 function scope의 차이를 이해한다. 변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다. 전역 객체가 무엇인지 설명할 수 있다. 스코프란? 스코프의 정의: 변수 접근 규칙에 따른 유효 범위 범위가 중괄호(블록) 또는 함수에 의해 나누어지고, 그 범위를 스코프라고 부른다. 규칙1. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능 규칙2. 스코프는 중첩이 가능하다. 규칙3. 가장 바깥의 스코프는 특별히 전역 스코프 (Global scope)라고 부른다..

원시 자료형(primitive data type) = number, string, boolean, null, undefined 과 같은 고정된 저장 공간을 차지하는 데이터 참조 자료형(reference data type) = array, object, function 원시 자료형의 특징과 종류 string, number, bigint, boolean, undefined, symbol, (null) 복사한다면 값을 복사 원시 자료형의 보관함인 변수에는 하나의 원시 자료형만 담을 수 있다. 일정한 크기의 데이터가 온다고 예상할 수 있기 때문에 원시 자료형이 담기는 보관함의 크기는 고정하는 것이다. 변수에는 데이터의 크기와는 관계없이 하나의 데이터만 담을 수 있다. 원시 자료형은 값 자체에 대한 변경이 불가능..

객체를 배우는 이유! 각기 다른 값을 가지지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. 목표! 배열과 객체의 특징을 구분하고, 배열과 객체의 특징에 따라 웹 애플리케이션 개발 시 어떻게 사용되는지 이해한다. 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다. 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다. 배열과 객체, 반복문을 응용하여 능숙하게 대량의 정보를 다룰 수 있다. 객체는 키(key)와 값(value)으로 이루어져 있다. let user = { firstName: ‘Hailie’, lastName: ‘Lee', email: ‘0000@gmail.com’,..