본문 바로가기
반응형

Programing/Javascript40

javascript String.includes() 함수 샘플코드 모음 javascript String.includes() 함수 샘플코드 모음 JavaScript String includes() 메서드는 문자열에 주어진 문자가 포함되어 있는지 여부를 결정합니다. 이 메서드는 문자열에 문자가 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 참고: includes() 메서드는 대소문자를 구분합니다. 즉, 대문자와 소문자를 다르게 취급합니다. 1. 샘플코드 let str = 'MongoDB, Express, React, Node' str.includes('MongoDB') //true str.includes('Java') //false str.includes('Node') //true let str = 'MongoDB, Express, React, N.. 2023. 6. 23.
jQuery를 사용하여 페이지 섹션으로 부드럽게 스크롤하는 방법 1. 섹션으로 부드럽게 스크롤하는 방법은 무엇인가? 한 페이지 템플릿 및 웹 사이트의 경우 앵커 링크를 클릭할 때 페이지 섹션으로 스크롤하는 것이 일반적입니다. 다음은 방문자가 탐색 메뉴(또는 페이지의 다른 곳)에서 앵커 링크를 클릭할 때 페이지 섹션으로 부드럽게 스크롤하기 위해 자주 사용하는 약간의 jQuery 해킹입니다. 스크롤 속도 값 조정 1000원하는 속도로. 이 값은 밀리초 단위입니다. $(document).on('click', 'a[href^="#"]', function (e) { e.preventDefault() $('html, body') .stop() .animate( { scrollTop: $($(this).attr('href')).offset().top }, 1000, 'linear.. 2023. 6. 16.
JavaScript Array.find 코드 모음 JavaScript Array.find 코드 모음 var array = ['cat', 'dog' , 'car']; var found = array.find(function (element) { return element == 'dog'; }); document.write(found); // return dog var array = [10, 20, 30, 40]; var found = array.find(function (element) { return element > 10; }); document.write(found); // return 20 const vehicles = [ "car", "bus", "truck", "SUV" ]; const result = vehicles.find(tree => t.. 2023. 3. 14.
JavaScript 프록시 설정 방법? JavaScript 프록시 설정 방법? JavaScript에서 프록시를 설정하려면, Proxy 객체를 사용해야 합니다. Proxy 객체는 새로운 객체를 생성할 때, 이 객체를 감싸서 다양한 동작을 추가하거나 제어할 수 있습니다. Proxy 객체는 두 개의 인수를 받습니다. 첫 번째 인수는 감싸려는 원본 객체이고, 두 번째 인수는 handler 객체입니다. handler 객체는 원본 객체의 동작을 제어하는데 사용됩니다. handler 객체는 다양한 속성을 가지며, 그 중 가장 일반적인 속성은 get, set, apply 등입니다. 예를 들어, handler 객체의 get 메소드를 사용하여, 프로퍼티를 가져올 때 동작을 추가할 수 있습니다. 다음은 Proxy 객체를 사용하여 target 객체의 name 프로.. 2023. 3. 13.
NodeJS vs Python: 비교하기 응용 프로그램의 서버 측 또는 백엔드는 프로젝트의 백본이며 클라이언트 측에서 실행됩니다. 프론트엔드가 아무리 예쁘고 반응성이 뛰어나더라도 애플리케이션을 지탱할 강력한 백엔드가 없으면 애플리케이션이 엎어질 것입니다. 이것은 모든 개발자가 백엔드 기술의 두 감정가인 Nodejs 대 Python 중에서 하나를 선택해야 하는 불가피한 선택으로 이어집니다. PHP, Java 및 C++는 서버 측 작업에 널리 사용되는 프로그래밍 언어이지만 이 두 가지는 시장에서 가장 큰 점유율을 차지했습니다. 그러나 앱에 가장 적합한 것을 어떻게 결정할 수 있습니까? 이 선택을 더 쉽게 하기 위해 Node JS와 Python을 나란히 비교하여 찾을 때 지침을 매우 명확하게 알 수 있습니다. 거쳐야 할 주요 패러다임은 다음과 같습니.. 2022. 7. 8.
JavaScript Reflection 사용방법 1. Reflection 무엇인가? 컴퓨터 프로그래밍에서 리플렉션은 런타임에 개체의 변수, 속성 및 메서드를 조작하는 프로그램의 기능입니다. ES6 이전에 JavaScript에는 커뮤니티나 사양에서 공식적으로 호출하지 않았지만 이미 리플렉션 기능이 있습니다. 예를 들어 Object.keys(), Object.getOwnPropertyDescriptor() 및 Array.isArray()와 같은 메서드는 고전적인 리플렉션 기능입니다. ES6에는 메서드를 호출하고, 객체를 구성하고, 속성을 가져오고 설정하고, 속성을 조작 및 확장할 수 있는 Reflect라는 새로운 전역 객체가 도입되었습니다. Reflect API는 동적 코드를 처리할 수 있는 프로그램과 프레임워크를 개발할 수 있도록 해주기 때문에 중요합니.. 2022. 7. 7.
JavaScript Proxy 사용방법 1. JavaScript Proxy란 무엇인가? JavaScript Proxy는 다른 객체(target)를 감싸고 target 객체의 기본적인 동작을 가로채는 객체입니다. 기본 작업은 속성 조회, 할당, 열거 및 함수 호출 등이 될 수 있습니다. 2. proxy object 생성 새 프록시 개체를 만들려면 다음 구문을 사용합니다. let proxy = new Proxy(target, handler); 이 구문에서: target – 래핑할 객체입니다. handler – 대상의 동작을 제어하는 메서드가 포함된 개체입니다. 핸들러 객체 내부의 메소드를 트랩이라고 합니다. 3. simple proxy 사용방법 먼저 user라는 객체를 정의합니다. const user = { firstName: 'John', la.. 2022. 7. 7.
JavaScript String includes() 함수 사용방법 1. JavaScript String includes() 함수는 무엇인가? Include() 메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인합니다. string.includes(searchString [,position]) Include() 메서드는 문자열에서 searchString이 발견되면 true를 반환하고, 그렇지 않으면 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 선택적 position 매개변수는 searchString 검색을 시작할 문자열 내의 위치를 지정합니다. 위치의 기본값은 0입니다. include()는 대소문자를 구분하여 문자열과 일치합니다. 2. JavaScript String includes() 사용방법 이 예에서는 Include() 메서드를 사용하여 .. 2022. 7. 7.
JavaScript String endsWith, 특정문자열로 끝나는지 체크 1. String endsWith 란 무엇인가? endWith()는 문자열이 지정된 문자열의 문자로 끝나는 경우 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 다음은 endWith() 메서드의 구문입니다. String.endsWith(searchString [,length]) 2. Arguments searchString은 문자열 끝에서 검색할 문자입니다. length는 검색할 문자열의 길이를 결정하는 선택적 매개변수입니다. 기본값은 문자열의 길이입니다. 문자열이 지정된 문자열의 문자로 시작하는지 확인하려면 startsWith() 메서드를 사용합니다. 3. JavaScript String endsWith() 사용법 제목이라는 문자열이 있다고 가정합니다. const title = 'Jack.. 2022. 7. 7.
JavaScript String startsWith, 특정문자열 시작하는지 체크 1. String startsWith란 무엇인가? startsWith()는 문자열이 지정된 문자열의 문자로 시작하는 경우 true를 반환합니다. 그렇지 않으면 false가 반환됩니다. 다음은 startsWith() 메서드의 구문을 보여줍니다. String.startsWith(searchString [,position]) 2. Arguments searchString은 이 문자열의 시작 부분에서 검색할 문자입니다. position은 searchString을 검색할 시작 위치를 결정하는 선택적 매개변수입니다. 기본값은 0입니다. 3. String startsWith() 사용법 다음과 같이 title이라는 문자열이 있다고 가정합니다. const title = 'Jack and Jill Went Up the H.. 2022. 7. 7.
JavaScript Object.is() 사용방법 1. JavaScript Object.is() 무엇인가? Object.is()는 두 가지 차이점이 있는 === 연산자처럼 작동합니다. -0 and +0 NaN 2. Negative zero === 연산자는 -0과 +0이 같은 값으로 취급됩니다. let amount = +0, volume = -0; console.log(volume === amount); Output: true 그러나 Object.is()는 +0과 -0을 다른 값으로 취급합니다. 예를 들어: let amount = +0, volume = -0; console.log(Object.is(amount, volume)); Output: false 3. NaN === 연산자는 NaN과 NaN이 다른 값이라고 간주합니다. NaN은 자신과 같지 않은 .. 2022. 7. 7.
JavaScript Object.assign() 사용방법 1. JavaScript Object.assign() 무엇인가? 다음은 Object.assign() 메서드의 구문을 보여줍니다. Object.assign(target, ...sources) Object.assign()은 소스 개체에서 대상 개체로 모든 열거 가능한 속성과 자체 속성을 복사합니다. 대상 객체를 반환합니다. Object.assign()은 소스 개체의 getter와 대상의 setter를 호출합니다. 새 속성을 복사하거나 정의하지 않고 속성만 할당합니다. 2. Object.assign()을 사용하여 객체 복제하기 다음 예제에서는 Object.assign() 메서드를 사용하여 개체를 복제합니다. let widget = { color: 'red' }; let clonedWidget = Object... 2022. 7. 7.
JavaScript Array findIndex() 사용방법 1. JavaScript Array findIndex() 란 무엇인가? ES6은 findIndex()라는 새로운 메소드를 Array.prototype에 추가했습니다. 이를 통해 제공된 테스트 기능을 충족하는 배열의 첫 번째 요소를 찾을 수 있습니다. findIndex() 메서드는 테스트 기능을 충족하는 요소의 인덱스를 반환하거나 테스트를 통과한 요소가 없으면 -1을 반환합니다. 다음은 findIndex() 메서드의 구문을 보여줍니다. findIndex(testFn(element[, index[, array]])[, thisArg]) findIndex()는 두 개의 인수를 취합니다. 1) testFn testFn은 요소가 발견되었음을 나타내는 true를 반환할 때까지 배열의 각 요소에 대해 실행하는 함수입.. 2022. 7. 7.
JavaScript Array find() 함수 사용법 1. Array find() 란 무엇인가? ES5에서 배열의 요소를 찾으려면 indexOf() 또는 lastIndexOf() 메서드를 사용합니다. 그러나 이러한 메서드는 일치하는 첫 번째 요소의 인덱스만 반환하기 때문에 매우 제한적입니다. ES6에서는 Array.prototype 객체에 find()라는 새로운 메서드가 추가되었습니다. find() 메서드는 제공된 함수를 충족하는 배열의 첫 번째 요소를 반환합니다. 다음은 find() 메서드의 구문을 보여줍니다. find(callback(element[, index[, array]])[, thisArg]) 2. Arguments find()는 콜백 함수와 콜백 함수 내에서 this에 사용할 선택적 값의 두 인수를 허용합니다. 1) callback 콜백은 배.. 2022. 7. 7.
JavaScript Array.from()란 무엇인가? 1. JavaScript 배열 Array.from() 메서드 소개 ES5에서 배열과 유사한 객체에서 배열을 생성하려면 모든 배열 요소를 반복하고 다음과 같이 중간 배열에 각 요소를 추가합니다. function arrayFromArgs() { var results = []; for (var i = 0; i < arguments.length; i++) { results.push(arguments[i]); } return results; } var fruits = arrayFromArgs('Apple', 'Orange', 'Banana'); console.log(fruits); Output: [ 'Apple', 'Orange', 'Banana' ] 더 간결하게 만들기 위해 다음과 같이 Array.prototy.. 2022. 7. 6.
JavaScript Array.of()란 무엇인가? 1. Array.of() 메서드 소개 ES5에서 배열 생성자에 숫자를 전달하면 JavaScript는 길이가 숫자와 동일한 배열을 생성합니다. 예를 들면 다음과 같습니다. let numbers = new Array(2); console.log(numbers.length); // 2 console.log(numbers[0]); // undefined 그러나 Array 생성자에 숫자가 아닌 값을 전달하면 JavaScript는 해당 값을 가진 하나의 요소를 포함하는 배열을 만듭니다. 예를 들면 다음과 같습니다. numbers = new Array("2"); console.log(numbers.length); // 1 console.log(numbers[0]); // "2" 이 동작은 Array 생성자에 전달하는.. 2022. 7. 6.
JavaScript Set object란 무엇인가? 1. JavaScript Set object란? ES6은 모든 유형의 고유 값 모음을 저장하는 Set이라는 새로운 유형을 제공합니다. 새 빈 집합을 만들려면 다음 구문을 사용합니다. let setObject = new Set(); Set 생성자는 또한 선택적 반복 가능한 객체를 허용합니다. 반복 가능한 객체를 Set 생성자에 전달하면 반복 가능한 객체의 모든 요소가 새 집합에 추가됩니다. let setObject = new Set(iterableObject); 2. Useful Set methods 유용한 Set 메소드 Set 개체는 다음과 같은 유용한 메서드를 제공합니다. add(value) – 지정된 값을 가진 새 요소를 집합에 추가합니다. Set 개체를 반환하므로 이 메서드를 다른 Set 메서드와 .. 2022. 7. 6.
JavaScript Map 이란 무엇인가? 1. JavaScript Map 객체 소개 ES6 이전에는 키를 모든 유형의 값에 매핑하여 맵을 에뮬레이트하기 위해 객체를 자주 사용했습니다. 그러나 객체를 지도로 사용하면 몇 가지 부작용이 있습니다. 객체에는 항상 프로토타입과 같은 기본 키가 있습니다. 객체의 키는 문자열 또는 기호여야 하며 객체를 키로 사용할 수 없습니다. 개체에는 지도의 크기를 나타내는 속성이 없습니다. ES6은 이러한 결함을 해결하는 Map이라는 새로운 컬렉션 유형을 제공합니다. 정의에 따라 Map 객체는 모든 유형의 값을 키 또는 값으로 사용할 수 있는 키-값 쌍을 보유합니다. 또한 Map 객체는 키의 원래 삽입 순서를 기억합니다. 새 맵을 만들려면 다음 구문을 사용합니다. let map = new Map([iterable]);.. 2022. 7. 6.
JavaScript Promise Error Handling Promise Error Handling Promise를 반환하는 getUserById()라는 함수가 있다고 가정합니다. function getUserById(id) { return new Promise((resolve, reject) => { resolve({ id: id, username: 'admin' }); }); } Normal error 먼저 getUserById() 함수를 변경하여 promise 외부에서 오류를 발생시킵니다. function getUserById(id) { if (typeof id !== 'number' || id { resolve({ id: id, username: 'admin' }); }); } 둘째, then() 및 catch() 메서드를 모두 사용하여 약속을 처리합니다.. 2022. 7. 5.
JavaScript Promise Chaining(Promise 연쇄사용법) Introduction to the JavaScript promise chaining(promise chaining 란?) 경우에 따라 다음 작업이 이전 단계의 결과로 시작되는 두 개 이상의 관련된 비동기 작업을 실행하려고 합니다. 예를 들어: 먼저 3초 후에 숫자 10으로 확인되는 새 약속을 만듭니다. let p = new Promise((resolve, reject) => { setTimeout(() => { resolve(10); }, 3 * 100); }); setTimeout() 함수는 비동기 작업을 시뮬레이션합니다. 그런 다음 약속의 then() 메서드를 호출합니다. p.then((result) => { console.log(result); return result * 2; }); then().. 2022. 7. 5.
JavaScript Promises 무엇인가? Why JavaScript promises(promises 무엇인가?) 다음 예제는 사용자 객체 목록을 반환하는 getUsers() 함수를 정의합니다. function getUsers() { return [ { username: 'john', email: 'john@test.com' }, { username: 'jane', email: 'jane@test.com' }, ]; } 각 사용자 개체에는 username과 email의 두 가지 속성이 있습니다. getUsers() 함수에서 반환된 사용자 목록에서 사용자 이름으로 사용자를 찾으려면 다음과 같이 findUser() 함수를 사용할 수 있습니다. function findUser(username) { const users = getUsers(); cons.. 2022. 7. 4.
JavaScript yield란 무엇인가? Introduction to the JavaScript yield keyword(yield 키워드 소개) yield 키워드를 사용하면 생성기 함수(function*)를 일시 중지하고 다시 시작할 수 있습니다. 다음은 yield 키워드의 구문을 보여줍니다. [variable_name] = yield [expression]; 이 구문에서: 표현식은 반복 프로토콜을 통해 생성기 함수에서 반환할 값을 지정합니다. 표현식을 생략하면 yield는 undefined를 반환합니다. variable_name은 iterator 객체의 next() 메서드에 전달된 선택적 값을 저장합니다. JavaScript yield examples(예제) yield 키워드를 사용하는 몇 가지 예를 들어보겠습니다. 1. Returning .. 2022. 7. 2.
[JavaScript] JavaScript Generators(자바스크립트 생성기) Introduction to JavaScript Generators (JavaScript 생성기 소개) JavaScript에서는 실행 후 완료 모델을 기반으로 일반 함수가 실행됩니다. 중간에 일시 중지할 수 없으며 일시 중지된 위치에서 계속됩니다. 예를들면 다음과 같습니다. function foo() { console.log('I'); console.log('cannot'); console.log('pause'); } foo() 함수는 위에서 아래로 실행됩니다. foo()를 종료하는 유일한 방법은 foo()에서 반환하거나 오류를 발생시키는 것입니다. foo() 함수를 다시 호출하면 위에서 아래로 실행이 시작됩니다. foo(); Output: I cannot pause ES6은 일반 함수(regular f.. 2022. 6. 30.
[JavaScript] JavaScript 반복자에 대한 필수 가이드 The Essential Guide to JavaScript Iterators (JavaScript 반복자에 대한 필수 가이드) 반복문 문제점 데이터 배열이 있는 경우에는 일반적으로 for문을 사용/반복하여 요소 위로 이동합니다.예를 들어 다음과 같습니다. let ranks = ['A', 'B', 'C']; for (let i = 0; i < ranks.length; i++) { console.log(ranks[i]); } for 루프는 변수 i를 사용하여 순위 배열의 인덱스를 추적합니다. I의 값은 I의 값이 순위 배열의 요소 수보다 적다면 루프가 실행될 때마다 증가합니다. 이 코드는 간단합니다. 그러나 다른 루프 내부의 루프를 중첩하면 복잡성이 커집니다. 또한 루프 내부의 여러 변수를 추적하는 것이 .. 2022. 6. 29.
[JavaScript] Symbol 에 대한 궁극적인 가이드(Symbol Guide) The Ultimate Guide to JavaScript Symbol (JavaScript Symbol 에 대한 궁극적인 가이드) Creating symbols ES6은 새로운 기본 유형으로 Symbol을 추가했습니다. number, boolean, null, undefined, string과 같은 다른 기본 유형과 달리 Symbol() 유형에는 리터럴 형식이 없습니다. 새 Symbol를 만들려면 다음 예제와 같이 전역 Symbol() 함수를 사용합니다. let s = Symbol('foo'); Symbol() 함수는 호출할 때마다 새로운 고유 값을 생성합니다. console.log(Symbol() === Symbol()); // false Symbol() 함수는 설명을 선택적 인수로 받아들입니다. 설.. 2022. 6. 29.
[JavaScript] When You Should Not Use Arrow Functions When You Should Not Use Arrow Functions (화살표 기능을 사용하면 안 되는 경우) 화살표 함수에는 자체 this 값과 arguments 객체가 없습니다. 따라서 이벤트 핸들러, 객체 리터럴의 메서드, 프로토타입 메서드 또는 인수 객체를 사용하는 함수가 있는 경우에는 사용하지 않아야 합니다. 1) Event handlers 다음 입력 텍스트 필드가 있다고 가정합니다. 그리고 사용자가 사용자 이름을 입력할 때 요소에 인사말 메시지를 표시하려고 합니다. 사용자가 사용자 이름을 입력하면 입력의 현재 값을 캡처하고 이를 요소에 출력합니다. const greeting = document.querySelector('#greeting'); const username = document.q.. 2022. 6. 28.
[JavaScript] JavaScript 화살표 함수(Arrow Functions) 소개 JavaScript 화살표 함수 소개 ES6 화살표 함수는 함수 표현식에 비해 더 짧은 구문을 작성할 수 있는 대안을 제공합니다. 다음 예제는 두 숫자의 합을 반환하는 함수 표현식을 정의합니다. let add = function (x, y) { return x + y; }; console.log(add(10, 20)); // 30 다음 예는 위와 동일합니다. add()함수 표현식이지만 대신 화살표 함수를 사용하십시오. let add = (x, y) => x + y; console.log(add(10, 20)); // 30; 이 예에서 화살표 함수에는 하나의 표현식이 있습니다. x + y따라서 표현식의 결과를 반환합니다. 그러나 블록 구문을 사용하는 경우 다음을 지정해야 합니다. return 예시: let.. 2022. 6. 27.
Introduction to JavaScript new.target Metaproperty JavaScript new.target 소개 ES6은 new.targetnew 연산자라는 메타 속성을 제공합니다. new.target은 new 키워드, 점, target 속성으로 구성됩니다. new.target은 모든 기능에서 사용할 수 있습니다. new.target은 주변 함수에 속한 것입니다. new.target은 함수가 함수로 실행되는지 생성자로 실행되는지 여부를 런타임에 검사하는 데 매우 유용합니다. 부모 클래스 내에서 new 연산자를 사용하여 호출된 특정 파생 클래스를 확인하는 것도 편리합니다. JavaScript 함수의 new.target Person생성자 함수: function Person(name) { this.name = name; } 다음과 같이 new 연산자를 사용하여 Person 함.. 2022. 6. 27.
JavaScript Inheritance Using extends & super extends그리고 super 사용하여 JavaScript 상속 구현 ES6 이전에는 적절한 상속을 구현하기 위해 여러 단계가 필요했습니다.가장 일반적으로 사용되는 전략 중 하나는 프로토타입 상속입니다. 다음 예시는 다음과 같습니다.Bird에서 속성을 상속합니다.Animal원형 상속 기법을 사용하여 다음을 수행합니다. function Animal(legs) { this.legs = legs; } Animal.prototype.walk = function() { console.log('walking on ' + this.legs + ' legs'); } function Bird(legs) { Animal.call(this, legs); } Bird.prototype = Object.create(Animal.. 2022. 6. 27.
JavaScript Computed Property JavaScript 계산 속성 소개 ES6에서는 괄호 안의 식을 사용할 수 있습니다.[]그런 다음 식 결과를 개체의 속성 이름으로 사용합니다. 예를 들어 다음과 같습니다. let propName = 'c'; const rank = { a: 1, b: 2, [propName]: 3, }; console.log(rank.c); // 3 이 예에서는[propName]의 계산 속성입니다.rank물건.속성명은 다음 값에서 파생됩니다.propName변수. 에 액세스 할 수 있는c의 특성rank오브젝트, JavaScript 평가propName속성 값을 반환합니다. 오브젝트 리터럴과 마찬가지로 클래스의 getter 및 setter에 대해 계산된 속성을 사용할 수 있습니다. 예를 들어 다음과 같습니다. let name .. 2022. 6. 27.
반응형

티스토리툴바