Javascript

📚 사용자 검색 기능을 구현 사용자 검색 사용자 검색 ⭐️ 태그란? 은 미리 정의된 HTML을 복제하여 여러 번 사용할 수 있는 템플릿 역할을 합니다. 브라우저에 렌더링되지 않고 JavaScript 코드에서 템플릿을 복제하여 동적으로 요소를 생성하는 데 사용됩니다. // main.js const userCardTemplate = document.querySelector("[data-user-template]"); const userCardContainer = document.querySelector("[data-user-cards-container]"); const searchInput = document.querySelector("[data-search]"); // 사용자 데이터 배열 let users..

⭐️ JadenCase 문자열 변환 함수 function solution(s) { // 문자열 s를 모두 소문자로 변환합니다. s = s.toLowerCase(); // 문자열 s를 단어 단위로 쪼개어 배열로 만듭니다. const words = s.split(" "); // 배열의 각 요소를 순회하며, 각 요소의 첫 번째 문자를 대문자로 변경하고, 나머지 문자는 소문자로 변경합니다. const convertedWords = words.map((word) => { // 각 요소의 첫 번째 문자를 대문자로 변경합니다. const firstChar = word.substring(0, 1).toUpperCase(); // 나머지 문자는 소문자로 변경합니다. const restChars = word.slice(1..

🧐 map() 함수와 Number 함수를 사용한 배열 변환 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. Number는 내장 객체로, 숫자형으로 변환하는 함수입니다. // 예를 들어, 아래와 같은 문자열 배열이 있다고 가정 const strArr = ['1', '2', '3']; // 이 문자열 배열을 숫자형 배열로 변환하려면, map() 함수와 Number 함수를 사용할 수 있습니다. const numArr = strArr.map(Number); // [1, 2, 3] map() 함수는 배열의 각 요소를 순회하며, 각 요소를 Number() 함수로 변환하여 새로운 배열을 반환합니다. 이렇게 함으로써, 문자열로 이루어진 배열을 숫자로 ..

⭐️ Loop 함수import { isFunction } from "./typeOf.js"; import { throwTypeError } from "./throwError.js"; export function loop(callback, repeatCount = 10) { if (!isFunction(callback)) { throwTypeError("callback 인자 유형은 함수여야 합니다."); } Array(repeatCount) .fill(null) .forEach((_, i) => callback(i)); }loop 함수는 반복 횟수와 콜백 함수를 인자로 받아서, 주어진 횟수만큼 콜백 함수를 반복 호출하는 함수입니다. 만약 인자로 전달된 콜백 함수가 함수 유형인지 체크하고, 아니라면 예외를 ..

⭐️ Memoization(메모이제이션) 패턴을 구현한 memo 함수import { isFunction, isString } from "./typeOf.js"; import { throwTypeError } from "./throwError.js"; export const memo = (() => { const cache = {}; return (memoized, key, showLog = false) => { if (!isFunction(memoized)) { throwTypeError("memoized 인자는 함수 유형이여야 합니다"); } if (!isString(key)) { throwTypeError("key 인자는 문자 유형이여야 합니다"); } if (cache[key]) { return c..

⭐️ throttle 유틸리티 함수 export const throttle = (callback, delay = 300) => { let isThrottling = false; return (...args) => { if (!isThrottling) { callback.apply(this, args); isThrottling = true; setTimeout(() => (isThrottling = false), delay); } }; }; //! Test // window.addEventListener( // "mousemove", // throttle(() => { // console.log("throttling"); // }, 300) // ); 위의 함수는 지정된 시간 간격(delay) 동안 여러 ..

⭐️ 객체나 배열의 각 요소를 처리하는 유틸리티 함수객체 또는 배열에서 각 요소를 반복적으로 처리하는 each 함수를 제공하며, 유효하지 않은 인자가 전달되었을 경우 예외를 발생시키는 재사용 가능한 함수import { throwTypeError } from "./throwError.js"; import { isArray, isObject, isFunction } from "./typeOf.js"; /** * * @param {Array | Object} arrayOrObject 순환할 객체(배열 또는 객체) * @param {Function} callback 반복 순환 처리할 함수 * @returns {Array} 집합 객체 반환 */ export function each(arrayOrObject, ca..

⭐️ 에러 유틸리티 함수 export const throwError = (message) => { throw new Error(message); }; export const throwSyntaxError = (message) => { throw new SyntaxError(message); }; export const throwReferenceError = (message) => { throw new ReferenceError(message); }; export const throwTypeError = (message) => { throw new TypeError(message); }; Error, SyntaxError, ReferenceError, TypeError 객체를 생성하고, 이들 객체에 인수로..