-

Framework (프레임워크)애플리케이션의 구조와 흐름을 제어하기 위한 기본적인 구조(뼈대)를 제공보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함프레임워크는 개발자에게 미리 정의된 규칙과 구조를 제공하여 일관성 있는 개발을 도와주며, 개발자는 프레임워크에서 호출되는 메소드를 구현하는 역할자바스크립트 프레임워크 종류 : Angular, React, Vue.js, Spring ...도구설명Angular전체 구조와 생명주기를 Angular가 제어ReactUI 컴포넌트만 다루지만, Next.js 같은 프레임워크와 함께 쓰면 프레임워크처럼 사용 가능* 프레임워크와 라이브러리 경계가 모호함Vue.js전체 구조와 구성요소를 정의 .. CSS 프레임워크 종류 : Bootsta..

스프레드 연산자(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..

addEventListener() 함수이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수 document 객체, window 객체, 웹 문서, 이미지, 텍스트 등 어디에서든 사용 가능 다중 이벤트 한 번에 처리 대상.add 이벤트 유형 : 처리할 이벤트 유형을 지정, 'on'을 붙이지 않고, 'click', 'mouseover'와 같은 이벤트 이름만 사용 가능함수 : 이벤트가 발생했을 때 실행할 명령을 나열하거나 함수 이름을 지정캡쳐여부 : 이벤트를 캡쳐링하는지 여부를 지정, 생략가능 , true이면 캡처링, false(기본값) 이면 버블링이벤트 캡처링 : DOM의 부모노드에서 자식 노드로 이벤트가 전달이벤트 버블링 : DOM의 자식노드에서 부모노드로 이벤트가 전달

값에 의한 전달 (Copy by Value)값에 의한 전달기본적으로 모든 primitive 값은 copy by value원본 데이터와 복사본의 데이터가 서로 따로 제어 됨let origin = 'hi'let clone = originclone +=' john'console.log(origin); // hiconsole.log(clone); // hi john참조에 의한 전달(Copy by Reference)참조에 의한 전달원본 데이터와 복사본의 데이터가 같이 제어 됨const newObj = { name :'john'}originObj.name = 'Mike'console.log(originObj.name); // Mikeconsole.log(cloneObj.name); // Mikeconsole.l..

데이터 분류1. 원시 타입(Primitive Type)원형데이터로 더 이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태Boolean, String, Number, Undefined, Null, Symbol2. 객체 타입(Object Type) 참조데이터로 기본 타입을 제외한 모든 타입이 포함원형 데이터가 아닌 다른 데이터를 참조하는 데이터Array, Object, Date...데이터 타입 종류타입설명number숫자로 된 자료형- 정수와 실수 구분없이 모든 숫자 자료형을 number로 간주string문자열로 된 자료형boolean- true: any other value- false : 0, null, undefined, NaNnull명확하게 빈 값인 경우 ※ type은 object 에 ..