[1번과제] 인프런 워밍업 클럽 스터디 FE 1기 과제제출

언어 : JavaScript, HTML, CSSIDE : Visual Studio CodeConcept : BurgerKing Menu Appgithub : https://github.com/hyojin-park24/inflearn-warmingUp-club-fe/tree/main/inflearn-js-11) JavaScript 문법과 CSS 문법을 모르면 막막한 망망대해로 빠져 버린다. . .2) 이번 과제 하나로 많은 문법과 JS 응용을 해볼 수 있었다 가령, 아래 코드와 같은 것들이랄까// == 와 ===의 차이 console.log(true ==1); // true console.log(true == '1'); // true console.log(true === '1') // false // 여러가지 class 선언시 css selector (class selector, id selector)가 space 마다 차이가 있my음 // 단일 class class = "navigation"; const navigation = document.querySelector('.navigation'); // 다중 클래스 class = "navigation my-navi1 my-navi2"; const navigation = document.querySelector('.navigation.my-navi1'); //같은 요소로 인식 const navigation = document.querySelector('.navigation .my-navi1'); //하위 요소로 인식 const navigation = document.querySelector('.navigation>.my-navi1'); //자식 요소로 인식3) 기본 문법도 익힐 수 있었다map함수: map()함수로 호출한 배열 값을 반환해줌 (변환 가능)for/forEach와 차이점 : 값 반환 및 변환 기능Node복사 : clonNodeElement.children : 요소 노드만 (할당가능)const [imgElement, textContainer] = content.children; //content자식에 imgElement와 textContainer가 있음을 기대. const [titleElement, priceElement, descptionElement] = textContainer.children; //txtContainer에 titleElement와 priceElement와 descriptionElement가 있음을 기대.const [imgElement, textContainer] = content.children; const [titleElement, priceElement, descptionElement] = textContainer.children; 요소의 HTML 태크 값을 읽어오는 innerHTML/ 요소의 Text값만 읽어오는 innerText화살표 함수Element.addEventListener(: e.target.id) 4) JS 스승인 뀨님 다시한번 감사합니다, , , 핫투.실행 화면

[1주차] 인프런 워밍업 클럽 스터디 FE 1기 발자국

1주차 회고록 작성.- 따라하며 배우는 자바스크립트 A-Z (Section0~1)- 음식 메뉴 App 만들기 [버거킹 메뉴 앱]: Javascript의 html 속성을 통해 각 노드의 요소마다 Button별로 Filtering된 Data를 넣어주기.1) 내게는 너무 낯선 Javascript2) 자유분방-예측불가-코드리뷰가 막막한 녀석. . .3) 어떻게든 돌아가도록 프로그램을 만들기 위해 탄생한 JavaScript라니. . .4) 이 녀석을 재밌게 만들어준 동료들(뀨님,꼉님, 쏘님) 사랑합니다 핫투.[JavaScript 기초]Console 객체IDE 설치VS codeWebStormVS code - Live Server 설치웹 프로젝트를 미리 볼 수 있도록 로컬 서버를 호스팅하는 확장 프로그램script.js - console.log크롬 개발도구(F12) Console 창에 출력됨개발시 어떠한 식으로 진행되는지 Console로 출력해서 알아보면 용이함어디서, 어떻게 에러가 났는지 출력을 할때 log사용함console.log('Hello,World'); console.log('1243'); console.log(true); var greeting = 'hello!'; console.log(greeting); console.log({a: "a", b: "b"}); console.table({a: "a", b: "b"}); console.error('Error!'); console.warn('Warning!!'); console.time('Hello'); console.time(1); console.time(2); console.time(3); console.time(4); console.time(5); console.time(6); console.time(7); console.timeEnd('Hello'); 변수 선언 : var, let, const자바스크립트 코드 작성브라우저 - 개발도구에서 바로 사용 가능IDE - VSCode 활용변수 선언 방식 / 참조범위 / 호이스팅호이스팅 : 인터프리터 언어 특성상, 호이스팅이 제공됨 (변수 끌어올려서 사용하는 것)| 변수 | 중복 | 재할당 | 유효한 참조 범위 (Scope) | 호이스팅 (변수 끌어올림) | | --- | --- | --- | --- | --- | | var | O | O | 함수 레벨 | 선언 : undefined 자동 할당 (초기화 전) 할당 : 값 할당 | | let(ES6) | X | O | 블록 레벨 | 선언 : undefined 할당 X (TDZ : Temporal Dead Zone) | | const(ES6) | X | X | 블록 레벨 | 선언 : undefined 할당 X (TDZ : Temporal Dead Zone) |// var type : 선언 및 할당 여러번 가능 (자유도 높음) // : 유지보수 하기 힘듦. var A = 1; console.log(A); var greeting = 'hello'; console.log(greeting); var greeting = 'hi'; console.log(greeting); greeting = 'how are you?'; console.log(greeting); // let type : 중복선언 X, 할당 가능 let ttt = 'hi, halo'; console.log(ttt); //let ttt 'haha'; // error. ttt = 'papapapa'; console.log(ttt); // const type : 중복 && 할당 X // : constant (상수) 약자 const damn = 'yess'; console.log(damn); //const damn = 'ttt'; //error. //damn = 'yesfds'; //console.log(damn); //error. //------------- 02. Scope //------------- 01) var 함수 레벨 스코프 function func() { if(true) { var a = 'a'; console.log(a); } console.log(a); } func(); //------------- 02) let,const 블록 레벨 스코프 function func2() { if(true) { let a = 'a_let'; console.log(a); } } func2(); //------------- 03. 호이스팅 //------------- 01) var 호이스팅 : undefined //------------- 02) let, const 호이스팅 : error. console.log(seelping); var seelping = '자고싶다'; // undefined let seelping = '자고싶다'; //error. //------------- 03) 함수 호이스팅 : 정상출력. func3(); function func3() { console.log('hosting test'); } 자바스크립트 타입원시타입 : Boolean, String, Numeric, Null, undefined, Symbol불변성에 저장됨고정 크기로 Call Stack에 저장됨실제 데이터가 변수에 할당됨참조타입 : Object, Array, Class, Functions실제 데이터는 Heep에 저장됨데이터 크기가 정해지지 않고 주소값이 Call Stack에 저장됨자바스크립트 = 동적 타입느슨한 타입동적 언어변수는 타입과 연결되지 않음모든 타입의 값으로 할당(및 재할당) 가능string → boolean → numeric 가능한 것//------------------------ 원시 타입 // 문자열 String const name = 'Edun'; // Number const age = 38; // Boolean const hasJob = true; // null const car = null; // undefined let anything; // Symbol const sym = Symbol(); //------------------------ 참조 타입 // Array 배열 : 객체의 하나의 형태 const hobbies = ['wailing', 'books']; // Object 객체 const addr = { province : '부산광역시', city : '남구' } console.log(typeof hobbies); console.log(Array.isArray(hobbies)); 자바스크립트 타입변환자바스크립트 함수 사용 변환let val; // Nuber to String val = String(111); val = String(8 + 4); // Boolean to String val = String(false); // Date to String val = String(new Date()); // Array to String val = String([1,2,3,4,5]); // toString() val = (5).toString(); // String to number val = Number('1'); val = Number(true); val = Number(false); val = Number(null); val = Number([1,2,3]); // NaN = Not a Number val = parseInt('111.40'); val = parseFloat('111.40'); console.log(val); console.log(typeof val); console.log(val.length); 자바스크립트 자체에 의해 자동 변환const val1 = 2; const val2 = String(3); const sum = val1 + val2; console.log(sum); // string으로 자동변환. console.log(typeof sum); 자바스크립트 연산 및 Math Objectconst num1 = 20; const num2 = 10; let val; // 산수 연산 val = num1 + num2; val = num1 * num2; val = num1 - num2; val = num1 / num2; val = num1 % num2; // 나머지 연산자 // Math Object //--------------------------------- 속성 val = Math.E; // 속성 val = Math.PI; // 속성 //--------------------------------- 메서드 val = Math.round(2.4); // 가까운 정수로 리턴 val = Math.ceil(2.4); // 무조건 올림 val = Math.floor(2.8); // 무조건 내림 val = Math.abs(-2); // 절댓값 val = Math.min(2,3,4,5,6,7,8,-1); val = Math.max(2,3,4,5,6,7,8,-1); val = Math.random(); // 0~1 사이에서 return. // 1~20 사이 랜덤 숫자 val = Math.floor(Math.random() * 20 + 1); //+1 필수. console.log(val); Template LiteralsTemlate Literals : javascript에서 backtick() 문자를 사용하여 문자열을 표현한 템플릿쉬운 줄바꿈‘\n’ → 실제 Enter 적용문자열 내부에 표현식을 포함할 수 있음‘+{a+b}+’ → 보간법 ${a+b}백틱(backtick) ⇒ ‘ ` '로 사용Loopsfor 코드 블록을 여러 번 반복 for/in 객체의 속성을 따라 반복 while 지정된 조건이 true 인 동안 코드 블록을 반복 do/while while 루프의 변형 조건이 true인지 검사하기 전에, 코드 블록 한 번 실행 후 조건이 true인 동안 루프 반복for vs forEachfor forEach 원래 사용되었던 접근 방식 배열 요소를 반복하는 새로운 접근 방식 breack 사용 가능 breack 사용 불가능 빠름 for보다 느림 비동기 await 작동 비동기 await 작동 애매함// for문 for(let i=0; i