JavaScript (60) 썸네일형 리스트형 Console console 객체에서 사용 가능한 메서드는 아래와 같습니다. log log 메서드의 경우 일반 메시지를 출력합니다. warn warn 메서드의 경우 경고 메시지를 출력합니다. error error 메서드의 경우 에러 메시지를 출력합니다. dir dir 메서드의 경우 속성을 볼 수 있는 객체를 출력합니다. count / countReset count 메서드와 countReset 메서드의 경우 콘솔에 메서드 호출의 누적 횟수를 출력하거나 초기화합니다. *함수 내부에서 콘솔을 출력하여 해당 함수가 몇 번 호출되었는지 확인할 때 유용하게 사용 가능합니다. time / timeEnd time 메서드와 timeEnd 메서드의 경우 콘솔에 타이머가 시작해서 종료되기까지의 시간(ms)을 출력합니다. time 메서드를.. Event 제어 기본동작 기본 동작이란 브라우저에서 제공하는 동작들을 의미하며, 대표적으로 스크롤을 이용하여 view port 이동이나 페이지 전환 등이 있습니다. JavaScript에서는 event 객체의 preventDefault를 사용하여 이러한 기본 동작을 사용하지 못하도록 방지할 수 있습니다. 우선 클래스 명이 parent 인 요소에 마우스 휠 이벤트가 발생할 때 해당 콘솔이 출력되도록 해주었습니다. 기본 동작에 해당하는 스크롤을 사용하지 못하도록 앞서 언급한 event 객체의 preventDefault를 사용하여 스크롤을 하지 못하도록 해주었으며, 해당 요소에서 스크롤 시 콘솔 출력은 정상적으로 이루어지지만 스크롤이 되지 않는 것을 확인할 수 있습니다. *preventDefault는 이벤트가 발생하는 것을 막.. 비동기 [22.12.20 수정] 동기와 비동기 동기(Synchronous) : 순차적으로 코드를 실핼하는 방법 console.log(1); console.log(2); console.log(3); // 1 -> 2 -> 3 출력 동기 방식은 코드를 입력한 순서대로 순차적으로 실행되어 위의 콘솔 명령도 순차적으로 실핼되어 위의 결과가 나오게 됩니다. 비동기(Asynchronous) : 순차적으로 코드가 실행되지 않는 방법 console.log(1); setTimeout(() => { console.log(2); }, 1000); console.log(3); // 1 -> 3 -> 2 출력 비동기의 대표적인 setTimeout() 함수의 인자로 기존의 콘솔 명령을 전달해주게 되면, 코드가 순차적으로 실행되지 않고 .. JavaScript 라이브러리 lodash 스크롤 action 시 함수를 실행하는 로직 구현 중 스크롤 action 발생 시마다 함수가 실행되는 상황에 lodash 라이브러리를 사용하여 일정 시간에 한 번씩만 함수가 실행되도록 제한을 걸어주었습니다. lodash 라이브러리의 _.throttle() 메서드를 사용하면 함수의 실행에 부하를 주어 인수로 전달한 시간이 지난 후에 함수가 실행되게 할 수 있습니다. lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers A utility library delivering consistency, customization, performance, & extras. -.. map() map() 메서드는 배열에 사용 가능한 메서드입니다. map() 메서드에는 함수를 인자로 주게 되고 배열 내의 모든 요소에 적용되며 해당 함수의 결과 값을 모은 배열을 반환하게 됩니다. map() 메서드에는 함수를 인자로 주어진 함수에는 매개변수를 3개까지 줄 수 있으며, 첫 번째 인자는 배열의 각 요소를 담을 매개변수, 두 번째 인자는 각 요소의 인덱스를 담을 매개변수, 세 번째 인자는 메서드를 호출한 배열을 나타냅니다. Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 예제 코드와 함께 정리해보도록 하겠습니다. map() c.. Math.max() 와 Math.min() Math.max() 와 Math.min()를 사용하면 인자로 받은 값 중 최댓값이나 최솟값을 구할 수 있습니다. 아래 예제 코드와 함께 정리해보도록 하겠습니다. Math.max() const numbers = [1, 2, 3, 4, 5, 6]; const maximumValue = Math.max(...numbers); console.log(maximumValue); // 6 출력 Math.max()는 인자로 받은 값 중 최댓값을 return 해주는 메서드입니다. 위의 예제 코드와 값이 여러 개의 인자를 줄 수 있고 그중 가장 큰 값을 반환하게 됩니다. Math.max() - JavaScript | MDN **Math.max()**함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환합니다. .. 객체 구조 분해(비구조화할당) 객체 전체를 사용하는 것을 원하지 않고 객체 안 각각의 프로퍼티를 사용하거나 일부 프로퍼티만 사용하고 싶은 경우가 있을 수 있습니다. 예시 코드와 함께 객체 안 각각의 프로퍼티를 분리하여 사용하는 방법을 정리해보겠습니다. const person1 = { name: "SH", hobbies: ["Sports", "Cooking"], age: 28 }; const personName = person1.name; const personHobbies = person1.hobbies; const personAge = person1.age; 객체의 각 프로퍼티에 접근하여 상수에 할당할 수도 있지만 아래의 방법을 사용하시면 보다 간편하게 분리하여 할당이 가능합니다. const person1 = { name: "SH".. 객체에서 전개 연산자 사용 객체에서 전개 연산자를 사용하는 것을 예시 코드와 함께 정리해보도록 하겠습니다. 이전 1 2 3 4 5 6 ··· 8 다음
