본문 바로가기

JavaScript & TypeScript33

JavaScript의 내장 함수 - some() JavaScript의 some 함수는 배열에 대해 부분적으로 조건을 만족하는 요소가 있는지를 확인할 때 유용한 메서드입니다. 이 글에서는 some 함수의 정의와 사용 방법을 예제로 설명하고, 다양한 상황에서의 활용 방법을 다룹니다.1. some 함수의 정의some 함수는 JavaScript의 Array.prototype에 내장되어 있는 메서드입니다. 배열 내의 요소 중 하나라도 주어진 테스트 함수를 통과하면 true를 반환하고, 모든 요소가 조건을 만족하지 못하면 false를 반환합니다.arr.some(callback(element[, index[, array]])[, thisArg])callback: 배열의 각 요소에 대해 실행할 테스트 함수입니다.element: 현재 처리 중인 배열의 요소.index.. 2024. 10. 8.
JavaScript의 내장 함수 - reduce() reduce 함수는 JavaScript 배열에서 강력하고 유용한 고차 함수로, 배열의 모든 요소를 단일 값으로 결합하는 데 사용됩니다. 이를 통해 배열을 순회하며 누적 값을 생성할 수 있으며, 다양한 용도로 활용할 수 있습니다. 특히 숫자 합계, 객체 생성, 배열 병합 등의 작업에 매우 유용합니다.1. reduce 함수의 기본 구조reduce 함수는 두 개의 인수를 받습니다:콜백 함수: 배열의 각 요소에 대해 실행될 함수초기 값: 선택 사항으로, 누적 값의 초기 값을 설정합니다콜백 함수는 다음 네 개의 인수를 받습니다:누적 값(accumulator): 이전 함수 호출에서 반환된 값입니다.현재 값(currentValue): 현재 배열 요소입니다.현재 인덱스(index) (선택 사항): 현재 배열 요소의 인.. 2024. 10. 7.
JavaScript의 내장 함수 - filter() JavaScript의 filter 함수는 배열에서 조건을 충족하는 요소들만을 추출하여 새로운 배열을 반환하는 매우 유용한 메서드입니다. 이 함수는 콜백 함수를 통해 각 요소에 대해 평가를 수행하며, 평가 결과가 true인 요소만 최종 배열에 포함됩니다. filter는 원본 배열을 변경하지 않고, 조건에 맞는 요소들로만 이루어진 새로운 배열을 반환한다는 점에서 매우 강력합니다.이번 글에서는 filter 함수의 동작 원리, 다양한 사용 사례, 그리고 성능상의 고려 사항 등을 중점으로 다뤄보도록 하겠습니다.1. filter 함수의 기본 사용법filter 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하며, 이 함수의 반환값이 true인 요소들로 새로운 배열을 생성합니다.문법array.filter(cal.. 2024. 10. 7.
JavaScript의 내장 함수 - map JavaScript의 map 함수는 배열의 각 요소를 일정한 규칙에 따라 변환하여 새로운 배열을 반환하는 데 자주 사용됩니다. 배열의 데이터를 수정하거나 새로운 형식으로 변환하는 데 강력한 도구입니다. 이번 글에서는 map 함수의 사용법과 다양한 예제를 살펴보며, 적절한 사용 사례와 함께 실무에서 어떻게 활용할 수 있는지 설명하겠습니다.1. map 함수의 기본 문법map 함수는 배열에서 자주 사용되는 고차 함수(higher-order function) 중 하나로, 다음과 같은 형식으로 사용됩니다:const newArray = array.map(callback(currentValue, index, array));callback: 배열의 각 요소에 대해 호출되는 함수currentValue: 현재 처리 중인 .. 2024. 10. 5.
JavaScript - join() 함수 소개 JavaScript에서 배열을 다룰 때, 요소들을 하나의 문자열로 결합하여 표현해야 하는 경우가 자주 있습니다. 이때 가장 유용하게 사용되는 함수가 join() 함수입니다. join() 함수는 배열의 모든 요소를 특정 구분자를 기준으로 결합해 문자열을 반환합니다. 이 글에서는 join() 함수의 기본 사용법, 다양한 예제, 주의 사항, 그리고 실무에서의 활용 방법을 다루어 보겠습니다.1. join() 함수 기본 문법array.join(separator);array: 문자열로 결합할 배열separator (optional): 배열 요소 사이에 넣을 문자열 구분자. 기본값은 콤마 ,입니다.2. 기본 사용 예시join() 함수의 가장 간단한 형태는 구분자를 생략한 사용입니다. 이 경우 배열 요소들은 기본 구분.. 2024. 10. 4.
npm mysql2 라이브러리에서 query와 execute 메서드 비교 MySQL2 라이브러리에서 query와 execute 메서드의 차이점은 Node.js와 MySQL을 사용하는 개발자들이 보안성과 성능을 고려할 때 중요한 부분입니다. 이 글에서는 query와 execute의 개념, 차이점, 그리고 각각의 사용 예시를 중심으로 자세히 설명하겠습니다.1. mysql2 라이브러리 소개mysql2는 Node.js에서 MySQL 데이터베이스와 상호작용하는 라이브러리입니다. MySQL의 기본 기능을 제공하면서도 성능 향상과 추가 기능들을 갖춘 라이브러리로, MySQL뿐만 아니라 MariaDB에서도 사용할 수 있습니다. 이 라이브러리는 비동기적으로 작동하며, Promises나 async/await와 함께 사용할 수 있어 최신 JavaScript 문법과 잘 어우러집니다.특히 mysql.. 2024. 10. 3.
MySQL2에서 명명된 플레이스홀더(named placeholders) 사용하기 Node.js에서 MySQL을 사용하여 데이터베이스 쿼리를 실행할 때, 플레이스홀더를 사용하면 파라미터화된 쿼리를 작성할 수 있어 SQL 인젝션 방지에 큰 도움이 됩니다. MySQL2 라이브러리는 기본적으로 unnamed 플레이스홀더 (?)를 지원하지만, 이를 명명된 플레이스홀더(named placeholders)로 대체하면 가독성이 향상되고 복잡한 쿼리에서 파라미터를 더 쉽게 관리할 수 있습니다. 이번 포스트에서는 MySQL2에서 명명된 플레이스홀더를 설정하고 사용하는 방법을 설명하겠습니다.1. 명명된 플레이스홀더란?명명된 플레이스홀더는 쿼리 내에서 파라미터에 고유한 이름을 부여하여, 코드의 가독성을 높이고 실수를 줄이는 데 도움이 됩니다. 예를 들어 SELECT * FROM users WHERE id.. 2024. 10. 3.
TypeScript에서 `??`와 `||`의 차이: 상세한 설명과 사용 예시 TypeScript는 JavaScript의 상위 집합으로서 더 명확하고 신뢰할 수 있으며 성능이 향상된 코드를 작성할 수 있도록 돕는 다양한 연산자를 제공합니다. 그중에서도 기본값을 제공하는 연산자인 ?? (널 병합 연산자)와 || (논리 OR 연산자)는 서로 비슷해 보이지만, 미묘하지만 중요한 차이점을 가지고 있습니다. 이러한 차이점을 이해하는 것은 올바르고 유지 보수가 용이한 코드를 작성하는 데 매우 중요합니다.이 글에서는 ??와 ||의 차이점을 설명하고, 각각의 사용 사례를 다루며, 구체적인 예시를 통해 이해를 돕겠습니다.1. ??와 || 개요?? (널 병합 연산자)??는 왼쪽 피연산자가 null 또는 undefined일 때만 기본값을 제공하는 연산자입니다. 즉, 만약 피연산자가 null이나 und.. 2024. 9. 19.
TypeScript에서 `==` 와 `===` 의 차이점 및 적절한 사용법 ==과 ===는 자바스크립트와 타입스크립트에서 가장 자주 사용되는 비교 연산자 중 하나로, 그 차이를 명확하게 이해하는 것이 중요합니다. 이 두 연산자는 비교하는 값이 같은지를 확인하지만, 비교하는 방식에서 중요한 차이가 있습니다.1. 느슨한 동등 연산자 (==)==는 느슨한 동등 연산자로, 비교하는 두 값의 타입이 다를 경우 타입 변환을 통해 같은지를 확인합니다. 즉, 타입이 다르더라도 값이 같다고 판단될 수 있습니다.예제 1: 타입 변환과 느슨한 동등 비교console.log(1 == '1'); // true이 예제에서 1은 숫자이고 '1'은 문자열이지만, == 연산자는 문자열을 숫자로 변환한 후 비교합니다. 변환된 값은 둘 다 숫자 1이기 때문에 true를 반환합니다.예제 2: 불리언 타입과 숫자 .. 2024. 9. 19.
npm options --save 실무에서 프로젝트를 계속 개발하다 보면 설치된 패키지가 많아진다. 만약 다른 팀원들과 공동 작업을 하고 있다면 매번 패키지 파일 전체를 공유 하는 것은 말이 안되다. 그래서 패키지를 설치할 때 --save 옵션을 사용한다.  --save 옵션을 사용하면 package.json파일에 설치한 패키지 정보가 추가 된다. 그래서 package.json만 공유하여 npm install 만 하면 서로 공유 하는 것과 동일한 효과를 볼 수 있다. Git으로 소스를 관리할 때도 유용하다.  끝 2022. 5. 2.
[javascript] new 연산자 생성자란 new와 함께 호출될 뿐 별다를 것 없는 함수에 불과하다. 그렇다면 생성자를 호출할 때 new를 빼먹으면 어떻게 될까? 문법 오류나 런타임 에러가 발생하지는 않지만, 논리적인 오류가 생겨 예기치 못한 결과가 나올 수 있다. new를 빼먹으면 생성자 내부의 this가 전역 객체를 가리키게 되기 때문이다.생성자 내부에 this.member와 같은 코드가 있을 때 이 생성자를 new 없이 호출하면, 실제로는 전역 객체에 member라는 새로운 프로퍼티가 생성된다. 이 프로퍼티는 window.member 또는 그냥 member를 통해 접근할 수 있다. 알다시피 전역 네임스페이스는 항상 깨끗하게 유지해야 하기 때문에 이런 동작 방식은 대단히 바람직하지 않다. 아래의 예제를 실행해보시면 정확하게 알 수 있.. 2016. 2. 23.
[javascript] 사용자 정의 생성자 함수 객체 리터럴 패턴이나 내장 생성자 함수를 쓰지 않고, 직접 생성자 함수를 만들어 객체를 생성할 수 있다.12var adam = new Person("Adam");adam.say(); // "I am Adam"cs이런 형태는 객체지향 언어에서 클래스를 사용하여 객체를 생성하는 방식과 상당히 유사하다. 그러나 문법은 비슷해도 자바스크립트에서는 클래스라는 것이 없으며 위의 예제의 Person은 그저 보통 함수일 뿐이다. 아래 예제는 Person의 함수이다. 123456var Person = function (name){ this.name = name; this.say = function(){ return "I am " + this.name; };};csnew와 함께 생성자 함수를 호출하면 함수 안에서 다음과 .. 2016. 2. 18.
[javascript] 객체 리터럴 자바스크립트의 리터럴 표기법 패턴을 사용하면 좀더 정화하고 표현력이 풍부하면서도 에러율은 낮은 방식으로 객체를 정의할 수 있다. 자바스크립트에서 '객체'라고 하면 단순히 이름-값 싸의 해시 테이블을 생각하면 된다. 다른 언어에서 '연관 배열'이라 불리는 것과 유사하다. 자바스크립트에서 생성한 객체(다시 말해 사용자가 정의한 네이티브 객체)는 언제라도 변경할 수 있으며, 내장 네이티브 객체의 프로퍼티들도 대부분 변경이 가능하다. 빈 객체를 정의해놓고 기능을 추가해나갈 수도 있다. 객체 리터럴 표기법은 이처럼 필요에 따라 객체를 생성할 때 이상적이다. 1234567891011 // 빈 객체에서 시작한다. var dog = {}; // 프로퍼티 하나를 추가한다. dog.name = "Test"; // 이번에는.. 2016. 1. 21.
[javascript] for문 사용법(최적화) javascript에도 기타 다른 언어들과 같이 for문이 존제 한다. 그런데 우리가 아무 생각없이(?) 하고 있이면서도 성능상에는 영향을 줄 수 있는(당연히 반복문이기 때문에 100만 루프이상을 이야기 하는 것이다.) 습관이 있다. 기본적으로 자바스크립트의 for문 문법은 아래와 같다. 구문for ([initialization]; [test]; [increment]) statement initialization : 선택 사항입니다. 이 식은 루프가 실행되기 전에 한 번만 실행됩니다. test : 선택 사항입니다. 부울 식입니다. test가 true이면 statement가 실행됩니다. test가 false이면 루프가 종료됩니다. increment : 선택 사항입니다. 식입니다. 증분식은 모든 루프의 끝에.. 2016. 1. 13.
[jQuery] Add함수를 이용한 확장집합 만들기 확장된 엘리먼트 집합이 있으면 새로운 엘리먼트를 추가해 이것을 증가시킬 수도 이쏙, 일치하는 원본 엘리먼트의 부분 집합으로 축소시킬 수도 있다. jQuery는 확장 엘리먼트의 집합을 관리하는 일련의 메소드를 지원한다. 1) 확장 집합에 다른 엘리먼트 추가하기예를 들어 alt나 title 어트리뷰트를 가진 모든 엘리먼트를 일치시키려고 한다. jQuery에는 이 요구사항을 셀렉터 하나로 표현할 수 있다. $(‘img[alt], img[title]’)하지만 add() 메소드를 사용하여도 똑같은 확장 엘리먼트를 만들 수 있다. $(‘img[alt]’).add(‘img[title]’)이와 같은 방식으로 add() 메소드를 사용하면 많은 셀렉터를 체인으로 연결해서 논리합(or) 관계를 형성하게 된다. 논리합 관계는.. 2014. 7. 2.

티스토리툴바