-

javascript 요소 선택각 메서드는 특정 상황에서 적절하게 사용 가능querySelector / querySelectorAll → 가장 유연하고 대부분의 상황에서 대응 가능반복이 필요한 경우 NodeList는 forEach를 바로 사용할 수 있지만, HTMLCollection은 Array.from()으로 변환해야 함.요소 탐색 대상요소 선택 메서드는 document와 부모 요소가 탐색 대상이 됨 getElementById()의 경우 documnet만 가능탐색 대상 객체설명document웹 페이지 전체 문서 전체Element (특정 요소)특정 요소 내 자식 요소들만 탐색getElementById()// [문법]document.getElementById('아이디');용도: id 속성이 있는 요소 하나를..

DOM(Document Object Model) 웹 페이지의 HTML을 트리 구조로 표현한 자바스크립트 객체 웹 페이지의 구조(HTML)를 자바스크립트에서 객체(트리 구조) 형태로 표현한 모델HTML, CSS로 웹사이트를 만들 때 자바스크립트로 이를 제어하기 위해 DOM이 필요함DOM은 브라우저가 자동으로 만들어줌브라우저가 HTML을 파싱 해서 만든 객체 구조이고, 자바스크립트는 이 DOM에 접근해서 내용을 읽거나 수정할 수 있음DOM의 구조 예HTML은 계층적인 구조를 DOM은 트리 형태(노드 트리)로 바꿔 표현 각 HTML 요소가 노드(Node)로 표현되고, document는 그 모든 것의 최상위 객체[HTML 텍스트] ↓ (파싱)[DOM 트리 구조] 🗺️ └─ [노드1] 🌿 └─ [노..

switch특정 변수나 상수 또는 반환값에 따라 작업을 실행하나의 값이 여러 경우 중 어디에 해당하는 지 찾을 때 유용switch (표현식) { case value1: // value1일 때 실행 break; case value2: // value2일 때 실행 break; default: // 어떤 case와도 일치하지 않을 때 실행} expression의 결과와 case의 값을 **===(엄격 비교)**로 비교함.일치하면 해당 case의 코드를 실행하고 break를 만나면 빠져나감.break가 없으면 다음 case로 계속 넘어감(이걸 "fall-through"라고 부름).어느 case에도 일치하지 않으면 default 실행.표현식 안에 설정 가능한 값값을 도출할 수 있는..

Framework (프레임워크)어플리케이션을 만들 때 기본 구조와 흐름을 정해놓고 개발을 하도록 도와주는 도구프레임워크는 기본적으로 전체적인 뼈대, 아키텍처, 규칙을 제공하고 개발자는 그 위에 기능을 구현하는 형태보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함프레임워크는 '제어의 역전(Inversion of Control)'을 가짐. 즉, 개발자가 호출하는 게 아니라 프레임워크가 개발자의 코드를 호출하는 방식으로 동작종류구분예CSSBootstrap, Tailwind CSS, Bulma, FoundationJSAngular, React, Vue.js, Svelte, Express, Next.js, Nuxt.js✓ "틀(frame)" + "작업(work)" = 작업을..

스프레드 연산자(spread operator)0개 이상의 인수 (함수 호출용) 또는 원소(배열 리터럴용)가 예상되는 위치에서 배열 표현식이나 문자열과 같은 이터러블 항목을 확장하거나 0개 이상의 키/값 쌍(객체 리터럴용)이 예상되는 위치에서 객체 표현식을 확장 가능ES6이상 사용 가능/* [구문] */[...배열 또는 문자열]// 반환object스프레드 연산자 활용1. 배열의 결합스프레드 문법을 활용하여 배열 결합 가능const list1 = ['a', 'b', 'c'];const list2 = ['e', 'f', 'g'];const total = [...list1, ...list2];console.log(total); // ⇒ [ 'a', 'b', 'c', 'e', 'f', 'g' ]const str..

Array.from()ES6에서 새로 생긴 메서드배열처럼 보이지만 배열이 아닌 객체를 받아 실제 배열로 반환유사배열을 배열로 변환하여 배열의 메서드 활용 문자열을 받아 각각의 배열로 변환 가능/* [구문] */Array.from(유사배열객체)// 반환object a b c;const list = document.querySelectorAll('.list li'); // Nodelist 객체// Array.from을 통해 배열로 변환하고, 두번째 인수를 활용하여 배열의 map 함수와 동일한 기능 적용 가능const listArr = Array.from(list, val => { return val.textContent;});console.log(listArr); // ⇒ (3) ['a', 'b', ..

디스트럭처링 (Destructuring)디스트럭처링 할당 문법이란 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식을 의미변수로 선언 됨을 인지하여 따옴표를 사용하지 않도록 유의객체 디스트럭처링{ } 를 활용하여 조금 더 간결하게 변수 생성 가능디스트럭처링을 활용하여 객체의 속성에 접근함과 동시에 해당 속성 이름으로 변수 선언이 가능/* 형식 */const {객체의 속성 이름, 객체의 속성 이름 } = 객체명 const person = { name : 'John', age : 20, links: { website: { google : 'http://www.google.com' } }}// ES6const { name, age } = person;con..

this의 값은 함수가 호출되는 방식에 따라 다름객체 내 this객체 내 this를 호출하는 경우 해당 객체를 가리킴// 스코프 내 this 호출 const temp = { inner : function(){ console.log(this) } } temp.inner() // 해당 객첼ㄹ 가리킴전역 범위에서의 this전역 범위에서 this 호출 시 Window 객체를 가리킴 'use strict' 를 활용하여 Window 객체 참조 방지 가능strict 모드에서 window 객체 대신 undefined로 값을 설정하는 규칙이 적용되어 undefined가 되는 경우 bind() 함수를 활용하여 this 값을 수동으로 설정 할 수 있음// 전역 범위에서 this 호출 function temp02(){ con..

브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 주요 브라우저 내장객체Window : 브라우저 창이 열릴 때마다 하나씩 생성되는 객체 Document : 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체Location : 현재 페이지에 대한 URL 정보를 저장하고 있는 객체Navigator : 현재 사용 중인 웹 브라우저의 정보를 저장하고 있는 객체Screen : 현재 사용 중인 화면 정보를 저장하고 있는 객체Window 객체브라우저 창이 열릴 때마다 하나씩 생성되는 자바스크립트 최상위 객체 자바스크립트의 모든 객체는 window객체에 포..

name을 활용 Form 제어name을 활용한 폼 제어 시에는 form 뿐만 아니라 접근하려는 form 요소에 name값을 지정해야 함 Name 배열을 활용한 Form 제어폼 요소의 배열을 사용하여 접근하는 경우, form에 접근은 forms, 요소에 접근은 elements를 사용 docuent.forms[0].elements[0].value select 요소 접근 // 배열 활용 select옵션 접근document.폼 이름.폼 요소이름.options[인덱스]document.폼 이름.폼 요소이름.options[인덱스].value// 선태된 select indexdocument.폼 이름.폼 요소이름.options.seletedIndexdocument.폼 이름.폼 요소이름.options[폼요소이름.sel..