1. Intl API 소개 여러가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정을 국제화(internalization) 자바스크립트에서는 이러한 데이터 포멧팅 문제를 해결해주기 위해서 Intl API를 제공하고 있다. 2. Intl.DateTimeFormat Intl API의 Intl.DateTimeFormat를 사용하면 날짜나 시간 데이터를 쉽게 국제화를 할 수 있다. 포멧팅 옵션으로 dateStyle과 timeStyle이 자주 사용되는데 full, long, medium, short 중 하나로 설정할 수 있다. > new Intl.DateTimeFormat("ko", { dateStyle: 'full' }).format(new Date()) '2022년 3월 8일 화요일' ..

1. if-else if 문과 if - if 문의 차이점 if- else if 를 사용하는 경우 하나의 조건이 만족 되면 나머지 else if 부분은 수행되지 않음 if - if 로 사용하게 되면 각각 다른 조건 문으로 해석되어 각각 수행하게 됨 2. if-else if 문 let age = 12; let charge; if(age < 8){ charge = 1000; console.log('미 취학 아동입니다.') } else if(age < 14){ charge = 2000; console.log('초딩입니다.') } else if(age < 20){ charge = 2500; console.log('중고딩 입니다.') } else{ charge = 3000; console.log('어른입니다.') ..

* JSON (JavaScript Object Notation - 자바스크립트 객체 표기법)은 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷. 자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷으로, 대부분의 프로그래밍 언어에서 사용할 수 있음. { "name": "Lee", "age": 20, "alive": true, "hobby": ["traveling", "tennis"] } 1. JSON.parse 문자열로 된 JSON을 객체로 변환한다. (문자열 -> 객체) 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이므로 이를 객체로 사용하려면 JSON 포맷의 문자열을 객체화해야함. parse라는 것은 문장을 분석하다 라는 뜻 2. JSON.stringify 객체를 JSON ..

1. Set이란? Set 은 중복을 허용하지 않는 값을 모아놓은 컬렉션이다. 자바스크립트 표준 내장 객체 중 하나이다. set 객체는 자료형에 관계없이, 원시 값과 객체 참조 모두 유일한 값으로 저장할 수 있다. 즉, set 내의 모든 값을 유일한 값을 유지 const arr = [1, 1, 1, 2, 2, 2, 3, 3, 3]; console.log(new Set(arr)); // Set(3) { 1, 2, 3 } console.log(...[1, 2, 3]); // 1 2 3 console.log(...new Set(arr)); // 1 2 3 console.log([...new Set(arr)]); // [ 1, 2, 3 ] console.log(Array.from(new Set(arr))); //..

if : 조건이 만족 될 때에만 코드가 실행 const a = 5; if (a === 5) { console.log('5'); } else if (a === 6) { console.log('6'); } else { console.log('없음'); } const test = 100; switch (test) { case 100: console.log('100'); break; case 90: console.log('90'); break; default: break; } switch : 특정 값이 무엇이냐에 따라 다른 작업을 수행 switch문은 필요한 조건에 만족하는 경우마다 각각 다른 조건을 매칭하여 실행시킬 수 있다는 장점이 있다. 또한 모든 각각의 개별조건들이 많은 경우 이를 if 문을 사용하여 처..

전개 연산자로 할당하면 2차원 형태가 되지 않는다. 배열의 경우 const arr1 = [1, 2, 3]; const arr2 = [4, 5]; console.log(arr1.push(...arr2)) // [1, 2, 3, 4, 5] 객체의 경우 const obj1 = {a: 'A', b: 'B'}; const obj2 = {c: 'C', d: 'D'} const objWrap = {...obj1, ...obj2}; console.log(objWrap); // { a: 'A', b: 'B', c: 'C', d: 'D' } 기존 배열을 보존해야 할 때 유용 const arr1 = [1, 2, 3]; const arr2 = arr1.reverse(); console.log(arr1); // [3, 2, 1..

Math.ceil : (무조건) 반올림 let num1 = 5.1; let num2 = 5.7; console.log(Math.ceil(num1)) // 6 console.log(Math.ceil(num2)) // 6 Math.floor: (무조건) 내림 let num1 = 5.1; let num2 = 5.7; console.log(Math.floor(num1)) // 5 console.log(Math.floor(num2)) // 5 Math.round: 반올림 let num1 = 5.1; let num2 = 5.7; console.log(Math.round(num1)) // 5 console.log(Math.round(num2)) // 6 toFixed() : 소수점까지 반환 let num1 = 5.1..

1. Object.assign : 객체 복제 const user = { name: 'min', age: 30 } const cloneUser = Object.assign({}, user) // { ...user } 같다 cloneUser.name = 'jin' console.log(user) // { name: 'min', age: 30 } console.log(cloneUser) // { name: 'jin', age: 30 } assign({}

1. 데이터 속성 HTML5부터는 데이터 속성이라는 개념이 생겼다. 데이터 속성은 HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정한 데이터를 DOM 요소에 저장해두기 위한 목적. 데이터 속성은 'data-' 로 시작해야 하며, 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. ex ) input 태그에는 data-value 라는 데이터 속성을 내가 만들었다. 속성명은 data-value이지만 HTML 표준 속성인 value 속성과는 상관이 없다. 내가 임의로 만든 속성이므로! 2. 장점 이전과 같이 hidden으로 태그를 숨겨두고 데이터를 저장할 필요가 없다. 따라서 HTML ..

Memory Heap: 메모리 할당이 일어나는 곳 Call stack: 코드 실행에 따라 스택 프레임이 쌓이는 곳 Web APIs : DOM, AJAX, Timer 등 브라우저에서 제공하는 api Callback queue : 콜백 함수들이 대기하는 곳 Event Loop : call stack이 비워질 때마다 callback queue에 대기 중인 콜백함수가 있다면, callback 함수를 call stack에 보내줌. 자바스크립트는 싱글 스레드(single-threaded) 언어이기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다. 하지만 이벤트 루프(event loop)라는 메커니즘을 통해 비동기(asynchronous) 처리가 가능해집니다. 이벤트 루프는 자바스크립트 엔진이 비동기 작업을 처리..

1. fill() 배열의 start index부터 end index 전까지(end index는 미포함) value값으로 채워주는 함수 파라미터 value 배열에 채울 값을 지정합니다. start value 값을 채울 배열의 시작 index입니다. 입력하지 않으면 기본값은 0입니다. end value 값을 채울 배열의 종료 index입니다. 입력하지 않으면 기본값은 배열의 길이(arr.length)입니다. 리턴값 지정한 값으로 채워진 배열을 리턴합니다. const arr1 = [1, 1, 1, 1]; console.log(arr1.fill(2)); // [2, 2, 2, 2] const arr2 = [1, 1, 1, 1]; console.log(arr2.fill(2, 1)); // [ 1, 2, 2, 2 ..

1. event.preventDefault 기본(default)를 막다(prevent)라는 단어에서 유추 할수 있듯이 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다. 예를 들어 앵커태그 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데 preventDefault() 메서드를 통해 해당 이벤트 발생을 막을 수 있습니다. 이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소합니다. 즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다. Event.cancelable을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다. 취소 불가능한 이벤트에 대해 preventDefault()를 호출해도 아무 효과가 없습니다..

1.정의 주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다. 콜백함수의 인자는 순서대로 값(value), 인덱스(index), 원 배열(array)이다. let numbers = [1, 4, 9] let parameters = numbers.filter((num, index, arr) => {console.log(num, index, arr)}) // 결과 1 0 [ 1, 4, 9 ] 4 1 [ 1, 4, 9 ] 9 2 [ 1, 4, 9 ] 2. 사용법 const person = [ { name: 'a', money: 500000 }, { name: 'b', money: 400000 }, { name: 'c', money:..

1. click 사용자해 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다. 2. mousedown 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다. 3. mouseup 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다. 4. dblclick 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다. 5. mousemove 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다. 6. mouseover 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다. 7. mouseout 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. 8. mouseenter 사용자가 ..

1.이벤트와 이벤트 핸들링 자바 스크립트의 대부분의 코드는 이벤트(event)에 의해 동작된다. 이벤트란 클릭이라던가 키 입력 같이 사용자가 행하는 모든 동작을 의미하는데, 이러한 이벤트가 발생했을 때 이에 맞는 상황을 지정해주고 처리하는 것을 이벤트 핸들링이라 한다. element.addEventListener(event, function, useCapture) 위처럼 addEventListener()를 사용할 때, 세 번째 인자인 useCapture와 관련된 개념이 바로 이벤트 버블링(Bubbling)과 캡쳐링(Capturing)이다. default 값은 false (버블링)이며, true로 변경 시 캡쳐링을 통해 이벤트를 전파한다. 2. 이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이벤트가 발..