Today Hailie Learned

문자열과 배열의 공통점 1. 접근과 수정 방법 배열은 접근과 수정 방법은 문자열의 접근과 수정 방법과 동일하게 [괄호 표기법]을 사용한다. const number = [0,1,2,3,4,5]; console.log(number[3]); // 3이 출력된다. number[2] = 20; console.log(number); // [0,1,20,3,4,5]이 출력된다. 2. 둘 다 index를 가져서 관련 메서드를 사용할 수 있다. ex) indexOf, slice, length 메서드를 사용할 수 있다. 2-1. 갯수 알아내기 length 속성을 이용한다. 혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다. 참고 https://developer.mozilla.org/ko/do..

innerHTML 와 textContent 메서드 모두 텍스트 값을 읽어오고, 설정할 수 있는 기능을 합니다. 하지만 이 둘의 차이점은 분명합니다. 먼저 innerHTML 메서드는 해당 요소에 포함된 HTML*, XML**의 전체 내용을 읽어오거나 설정할 수 있습니다. 그래서 태그는 물론이고, HTML 코드 내의 공백까지도 출력됩니다. 하지만 XSS*** 공격 위험에 취약하다는 단점이 있습니다. 이에 반해, textContent 메서드는 해당 요소와 그 자손의 텍스트 콘텐츠를 표시합니다. 따라서 innerHTML 메서드와는 달리 HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋고 XSS*** 공격 위험이 없습니다. 따라서 결론적으로 가급적 textContent를 사용하는 것이 ..

유효성 검사 사이트에서 원하는 조건에 맞게 반드시 형식을 맞춰 입력해야 하는 경우 특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등) 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다. 비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다. 신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다. 유효성 검사의 목표 작동이 가능한 MVP(Minimum Viable Product)를 만들어 내는 것 MVP : 최소 기능 제품(Minimum Viable Product, MVP)는 고객의 피드백을 받아 최소한의 기능(features)을 구현한 제품 DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다. - querySelector..

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. 함수의 호출이 두 번 발생 ✔️ ..