HTML 요소들을 조작하는 편리한 Javascript 라이브러리로 사용전에 import 해주어야 한다. jQuery를 사용하기 위해서는 미리 작성된 자바스크립트 코드를 import 해와야 하는데, bootstrap css 파일을 가져올 때와 마찬가지로 내 컴퓨터에 해당 파일을 저장해서 사용할 수도 있지만 온라인 상의 파일을 참조할 수도 있다. 이를 head 태그 안에 넣어주면 된다. 또한 CSS와 마찬가지로 특정 요소를 가리켜야 조작할 수 있는데, CSS에서는 주로 class를 사용했다면 jQuery에서는 고유한 하나의 요소를 가리키는 id를 주로 사용한다. input 박스의 값 가져오기, 값 변경하기 let url = $('#article-url').val() url 'https://kimjingyu...
ES6 - Promise : 비동기 처리 결과를 반환한다. ES8 - async/await : 비동기 처리를 마치 동기처럼 동작하게 한다.
map과 filter 모두 배열의 내장함수이다. map 배열의 원소를 일괄적으로 변형시킬 때 사용하기 좋다. const classmate = ["철수","영희","훈이"] classmate.map((item)=>(item+"어린이")) const classmate = [ {name: "철수"}, {name: "영희"}, {name: "훈이"} ] classmate.map((item)=>({name : item.name + "어린이", school : "떡잎유치원"})) 실무에서는 컴포넌트의 return 값 안에서 많이 사용한다. map을 return 값 안에서 사용하기 위해서 { } 으로 감싸서 사용한다. // RenderMap 컴포넌트 export default const RenderMap = ()=>..
✍️ 정의 javascript 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리 지금은 Angular, React, Vue 와 같은 화면을 다루는 여러 기술들이 있지만, 그전에 화면 개발을 쉽게 해주는 라이브러리였다. 📘 Write less, do more - jQuery가 가지 철학 즉, 적은 코드로 생산성을 높이자는 뜻으로 해석할 수 있겠다. jQuery가 제공하는 기능 DOM과 관련된 처리를 쉽게 구현할 수 있다. 규칙성을 가지고 이벤트를 처리할 수 있다. 애니메이션 효과를 쉽게 만들 수 있다. Ajax 처리 방식을 편리하게 사용할 수 있다. 🔎 제이쿼리..
let origin = { name: "user", age: 20, petName: "dog", hobby: "playing game" } const { petName, hobby, ...rest } = origin console.log(rest) // { name:"user", age:20 }
얕은 복사: 주소값까지만 복사 let copyObj = { ...obj } let copyArr = [ ...arr, ...secArr ] 깊은 복사: 실제 데이터까지 복사 JSON 데이터 포맷을 사용해서 전혀 새로운 객체 생성 let origin = { name: "user", age: 20, favoriteFood: { first: "sushi", second: "hamburger" } } const copy = JSON.stringify(origin) const deepCopy = JSON.parse(copy)
하나로 뭉쳐있는 값들의 집합을 전개해주는 연산자 ... const arr = [ 1,2,3,4,5 ] console.log(...arr) // 1,2,3,4,5 const str = "hello" console.log(...str) // 'h','e','l','l','o' const obj = { name:"user", gender:"male" } const copyObj = {...obj}
구조화 되어있는 배열, 객체와 같은 데이터를 destructuring 시켜서 각각의 변수에 담는 것 iterable 한 경우 ( 배열 ) let arr = [ 1, 2 ] let [ one, two ] = arr 객체의 경우 - key를 토대로 let obj = { name: "user", gender: "male" } let { name, gender } = obj let { name: newName, gender: newGender } = obj
호이스팅 정의 : 함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것을 이야기한다. 동작 이유 : JavaScript가 코드를 해석하고 실행하는 과정과 내부적인 변수의 선언, 할당 과정 때문이다. 동작 과정 JavaScript는 코드를 실행하기 전에 먼저 선언된 변수, 함수 등을 전역 환경에 담아두게 된다. 이후에 정리된 코드를 실행하는 과정을 수행 변수 선언 단계 선언 단계 선언한 변수를 식별자가 담기는 객체에 할당하는 단계 초기화 단계 변수에 할당할 메모리 공간을 부여하는 단계 할당 단계 정의된 변수에 데이터가 할당되는 단계 TDZ ( Temporal Dead Zone ) let 과 const 는 선언 단계와 초기화 단계가 분리되어 실행되고, 그 사이에 TDZ가 존재한다. 따라서 초기화 단..
