클라이언트/JavaScript (49) 리스트형 [자바스크립트(JavaScript)] for .. of vs for .. in 파이썬을 먼저 배운 나에게는 for ... in 이 훨씬 익숙하다. 그런데 자바스크립트에서는 일반적으로 for .. in을 거의 사용하지 않고 for .. of를 더 많이 사용한다고 해서 두 문법을 비교해보았다. // for .. of - Iterable 객체(Array, String, Map, Set 등)의 값들을 순회한다. - 배열의 요소들을 순회할 때 특히 자주 사용한다. const animals = ['rabbit', 'tiger', 'lion']; for (const animal of animals) { console.log(animal); } // === 결과 === // rabbit // tiger // lion // for .. in - 객체의 모든 속성을 순회한다. - 객체의 키를 순회할.. [자바스크립트(JavaScript)] == vs === // == vs === ==와 === 모두 비교 연산자로 사용된다. 나는 자바스크립트보다 자바를 더 먼저 배웠기 때문에 ==가 더 익숙하고 자주 사용하고는 했다. 하지만 ==와 ===는 엄연히 다른 연산자로, 구분해서 사용할 필요가 있다. // ==, double equals - 타입을 가리지 않는다. - 두 값이 다른 타입이면 강제 형변환하여 비교한다. 1 == '1'//true null == undefined//true 0 == false//true // ===, triple equals - 엄격한 비교 연산자 - 타입을 구분하고 값과 타입을 모두 비교한다. 1 == '1'//false null == undefined//false 0 == false//false [자바스크립트(JavaScript)] Template Literals(템플릿 리터럴) // 템플릿 리터럴, Template Literals - 표현식을 포함한 문자열 코드를 작성하다 보면 문자열에 여러 변수를 넣어서 사용해야 할 때가 많다. 데이터 바인딩을 하다 보면 늘상 있는 일,, price = 1000 이고, cnt = 2일 때, '총액은 : 2000원입니다." 라고 출력해야 하는 상황이 생겼을 때, '총액은 ' + (price * cnt) + '입니다.' 라고 작성해야 한다면 굉장히 비효율적이다. 작은 따옴표 열고 닫고를 반복해야 하며 '+'를 사용해서 연결까지 해주어야 한다. 이러한 문제를 해결해주기 위해 나온 것이 템플릿 리터럴이다. 템플릿 리터럴에는 따옴표 대신 `(back-tick) 기호를 사용한다. 표현식은 ${} 안에 적는다. `총액은 ${price * cnt}입니다.` JSON //JSON, JavaScript Object Notation - 자바스크립트 객체 표기법 - 자바스크립트의 객체를 문자열로 표현할 때 사용하는 포맷 - 자바스크립트에서 사용 중인 데이터(객체)를 외부 환경(파일입출력, 네트워크)에 전달 > 하나의 문자열로 표현하는 방법 > JSON - XML과 함께 데이터 전달용으로 많이 사용 - 언어 독립적 > 대부분의 언어/환경에서 JSON 지원 - 프로퍼티(키)와 값은 반드시 쌍따옴표로만 묶는다.(홑따옴표, 역따옴표 불가능) * 값이 숫자 또는 boolean이면 그냥 표현 가능 - 메서드 표현 불가능 > 데이터(변수)만 표현 가능 https://jsonformatter.curiousconcept.com/ 참고 JSON Formatter & Validator For.. jQuery UI // jQuery UI - jQuery에 애니메이션 기능을 확장한 것 - draggable(): 마우스로 클릭해서 드래그할 수 있다. draggable({ axis: 'x' > 좌우로만 이동 가능 axis: 'y' > 상하로만 이동 가능 grid:[x,y] > 한번에 이동 가능한 범위 제한 containment > 지정 태그의 영역을 벗어날 수 없음 snap > 지정 태그에 가까이 가면 자석에 끌리듯 붙음 cursor > 커서 모양을 바꿀 수 있음 }); Interactions Draggable - droppable(): 무엇인가가 드래그 후 놓였을 때 발생하는 이벤트를 설정할 수 있다. droppable({ tolerance: 'fit' > 무엇인가가 완전히 들어올 때 이벤트 함수 발생 toleranc.. jQuery // 라이브러리, 프레임워크 - 라이브러리 : 프로그램에 필요한 부품이 되는 소프트웨어가 정리되어 있는 것 > 필요한 부분을 가져와서 사용 ~ Query ~ React - 프레임워크 : 만들고자 하는 프로그램의 종류에 따라서 공통적인 부분을 미리 만들어두는 것 > 필요한 부분을 직접 수정해서 사용 ~ Angular ~ Vue // jQuery - Javascript의 대표적인 라이브러리 1. jQuery 다운로드 https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file.. CSS 조작 // CSS 조작 - 태그에 속성값 지정하기 ~ .style.속성명 = 값; ~ .style[속성명] = 값; - 태그 속성에 적용된 현재 서식을 읽어오기 ~ const 변수명 = window.getComputedStyle(선택자); ~ 변수명.getPropertyValue('속성명'); - classList 활용하여 클래스 속성 추가 및 제거하기 ~ const 변수명 = document.querySelector('선택자') ~ 변수명.classList.add('클래스명') ~ 변수명.classList.remove('클래스명') JavaScript + CSS 상자 텍스트 텍스트 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo nulla sed .. [자바스크립트(JavaScript)] 클로저 // 클로저, Closure - 외부함수(포함하고 있는)의 변수에 접근할 수 있는 내부 함수 - 자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는 함수 - 함수가 선언되는 시점에 생성되고, 함수가 실행되는 도중에 사용될 수 있다. < 1 2 3 4 5 6 7 >
