• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

Javascript29

728x90
[Javascript]HTMLCollection과 querySelector의 차이 HTMLCollection과 querySelector (또는 querySelectorAll)의 차이는 주로 반환 객체의 형태, 동작 방식, 사용 사례에 있습니다. 이를 아래에서 자세히 비교합니다.1. 반환 객체의 차이메서드getElementsByClassName, getElementsByTagName, 등querySelector, querySelectorAll반환 객체HTMLCollectionElement 또는 NodeList실시간 업데이트문서가 변경되면 자동 업데이트문서가 변경되어도 업데이트되지 않음다중 요소 선택항상 여러 요소를 반환 (HTMLCollection)querySelector: 첫 번째 요소만 반환 querySelectorAll: NodeList로 모든 요소 반환예시// HTML 구조Ite..
[Javascript]HTMLCollection을 반환하는 주요 DOM 메서드 HTMLCollection을 반환하는 주요 DOM 메서드document.getElementsByTagName(tagName)특정 태그 이름을 가진 모든 요소를 선택합니다.예: document.getElementsByTagName('div')→ 태그를 모두 포함하는 HTMLCollection 반환.document.getElementsByClassName(className)특정 클래스를 가진 모든 요소를 선택합니다.예: document.getElementsByClassName('item')→ 클래스가 item인 모든 요소를 포함하는 HTMLCollection 반환.document.forms현재 문서의 모든 요소를 선택합니다.예: document.forms→ 문서의 모든 태그를 포함하는 HTMLColle..
[Javascript]DOM Script 이벤트와 선택자 이벤트HTML DOM에서 지원하는 스크립트 이벤트 종류는 웹 페이지에서 다양한 사용자 상호작용과 브라우저 동작을 처리하기 위해 사용됩니다. 주요 이벤트는 다음과 같은 그룹으로 나눌 수 있습니다.1. 마우스 이벤트onclick: 요소를 클릭했을 때 발생ondblclick: 요소를 더블 클릭했을 때 발생onmousedown: 마우스 버튼을 눌렀을 때 발생onmouseup: 마우스 버튼을 뗐을 때 발생onmousemove: 마우스가 요소 위에서 움직일 때 발생onmouseover: 마우스가 요소 위로 들어갈 때 발생onmouseout: 마우스가 요소를 벗어날 때 발생onmouseenter: 마우스가 요소 위로 들어갈 때 (버블링 없음)onmouseleave: 마우스가 요소를 벗어날 때 (버블링 없음)Click..
[Javascript]많이 사용되고 유용한 JavaScript 라이브러리와 프레임워크 웹사이트에서 많이 사용되고 유용한 JavaScript 라이브러리들은 다양한 기능을 제공하며, 웹 개발을 더욱 효율적이고 편리하게 만들어 줍니다. 여기 몇 가지 인기 있고 유용한 JavaScript 라이브러리와 프레임워크를 소개합니다1. React용도: UI 구축설명: React는 Facebook에서 개발한 사용자 인터페이스(UI) 라이브러리입니다. 컴포넌트 기반 아키텍처를 사용하여 효율적으로 복잡한 UI를 관리할 수 있습니다. React는 Virtual DOM을 사용하여 성능 최적화와 빠른 렌더링을 제공합니다.추천 이유: 현대 웹 애플리케이션에서 가장 인기 있는 라이브러리로, 대규모 애플리케이션에 적합하고 많은 커뮤니티와 리소스가 존재합니다.링크: https://reactjs.org/ ReactReact..
[Javascript]반복문의 종류와 사용 용도 JavaScript에서 for...of, for...in, forEach, map, filter, reduce는 모두 반복문이지만, 각기 다른 용도와 특성을 가지고 있습니다. 특정 상황에 맞는 반복문을 선택하는 것이 중요합니다. 아래에 각 반복문의 사용 용도와 차이점을 설명하겠습니다.1. for...of용도: 배열, 문자열, Map, Set 등의 iterable 객체의 값을 순회할 때 사용.언제 사용해야 할까?배열이나 iterable 객체의 요소 값을 순회할 때 가장 유연하게 사용 가능.요소의 순서대로 값을 읽어오는 작업에 적합.중간에 break 또는 continue로 반복을 중단하거나 건너뛰고 싶을 때 사용.const arr = [1, 2, 3];for (const value of arr) { con..
[Javascript]비동기 처리 Promise, async/await 살펴보기 javascript에서 비동기 처리를 다루는 방법으로는 Promise와 async/await이 있습니다. 이 두 가지 방법은 비동기 작업(예: API 호출, 파일 읽기 등)을 처리하는 데 매우 유용합니다.1. Promise 예제Promise는 비동기 작업이 성공했는지 실패했는지에 따라 결과를 처리할 수 있는 객체입니다.// 비동기 작업을 시뮬레이션하는 Promise 생성const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { const success = true; // 작업이 성공했다고 가정 if (success) { re..
[Javascript]고차함수, 익명함수, 콜백함수 설명 및 예제 1. 고차 함수 (Higher-Order Function)고차 함수는 하나 이상의 함수를 인수로 받거나, 함수를 반환하는 함수입니다.// 고차 함수: 함수를 인수로 받음function higherOrderFunction(callback) { console.log("고차 함수가 호출되었습니다."); callback(); // 전달받은 함수를 호출}// 인수로 전달될 함수 (익명 함수 형태로 작성)higherOrderFunction(function() { console.log("이 함수는 콜백 함수로 전달되었습니다.");}); 고차 함수는 함수를 인수로 받아 호출합니다.2. 익명 함수 (Anonymous Function)익명 함수는 이름이 없는 함수로, 변수에 할당하거나 다른 함수에 전달될..
[Javascript]현재 페이지의 url값을 가져올 때 한글이 들어가있는 경우 현재 페이지의 url값이 한글일경우 한글을 가져오지 못하고 " %EC%BB%A4%EC%8A%" 이런식으로 깨지게 될경우 decodeURL()로 처리하면 됩니다.// 현재 페이지의 URL을 가져오기let url = window.location.href;// URL 디코딩url = decodeURI(url);// 결과 출력 (선택 사항)console.log(url); 코드 설명let url = window.location.href;window.location.href: 브라우저의 현재 페이지 URL을 나타냅니다. window.location 객체는 현재 문서의 위치(URL)에 대한 정보를 제공하며, href 속성은 전체 URL을 문자열로 반환합니다.이 줄은 현재 페이지의 URL을 url 변수에 저장합니다.예..
[Javascript]코딩테스트 프로그래머스 "양꼬치" 풀이 코딩테스트 연습 > 코딩테스트 > 입문 양꼬치문제 설명머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solution 함수를 완성해보세요. 제한사항0 n / 10 ≤ k 서비스로 받은 음료수는 모두 마십니다. 입출력 예 입출력 예 설명입출력 예 #1- 10인분을 시켜 서비스로 음료수를 하나 받아 총 10 * 12000 + 3 * 2000 - 1 * 2000 = 124,000원입니다. 입출력 예 #2- 64인분을 시켜 서비스로 음료수를 6개 받아 총 64 * 12000 + 6 * 2000 - 6 ..
[Javascript]코딩테스트 프로그래머스 "뒤에서 5등까지" 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 뒤에서 5등까지문제 설명정수로 이루어진 리스트 num_list가 주어집니다. num_list에서 가장 작은 5개의 수를 오름차순으로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 제한사항- 6 ≤ num_list의 길이 ≤ 30 - 1 ≤ num_list의 원소 ≤ 100 입출력 예num_list[12, 4, 15, 46, 38, 1, 14] result[1, 4, 12, 14, 15] 입출력 예 설명입출력 예 #1- [12, 4, 15, 46, 38, 1, 14]를 정렬하면 [1, 4, 12, 14, 15, 38, 46]이 되고, 앞에서 부터 5개를 고르면 [1, 4, 12, 14, 15]가 됩니다.  문제 풀이function solut..
[Javascript]코딩테스트 프로그래머스 "정수" 부분 풀이 코딩테스트 연습 > 코딩 기초 트레이닝 > 정수 부분문제 설명실수 flo가 매개 변수로 주어질 때, flo의 정수 부분을 return하도록 solution 함수를 완성해주세요. 제한사항0 ≤ flo ≤ 100 입출력 예flo result1.42 169.32 69 입출력 예 설명입출력 예 #1- 1.42의 정수 부분은 1입니다. 입출력 예 #2- 69.32의 정수 부분은 69입니다. 문제 풀이let solution = (flo) => Math.floor(flo);console.log(solution(3.534423)); //확인 풀이 설명Math.floor정적 Math.floor()메서드는 항상 반올림하여 주어진 숫자보다 작거나 같은 가장 큰 정수를 반환합니다. 참고Math.floor()https://de..
[Javascript]자바스크립트 console.log 사용방법 JavaScript의 console.log() 함수는 콘솔에 메시지를 출력하는 데 사용됩니다. 이 함수를 사용하여 코드 실행 중에 값을 확인하거나 디버깅에 도움을 얻을 수 있습니다. 아래는 console.log()의 간단한 사용 방법입니다 1.텍스트 출력 console.log("안녕하세요, 콘솔!"); 2.변수 출력 let 변수 = "값"; console.log(변수); 3.여러 값 출력 let 변수1 = "값1"; let 변수2 = "값2"; console.log(변수1, 변수2); 4.변수와 문자열 결합 let 숫자 = 42; console.log("숫자는 " + 숫자 + "입니다."); 5.포맷된 출력 let 이름 = "John"; let 나이 = 25; console.log(`이름: ${이름}, ..
[Javascript]자바스크립트 객체(Objec의 기본 구조 및 예제 JavaScript에서 객체는 데이터와 해당 데이터를 조작하기 위한 동작을 포함하는 복합 데이터 유형입니다. 객체(Object)란? 객체는 키-값 쌍의 모음이며, 키는 문자열 또는 기호이고, 값은 어떠한 데이터 유형이나 함수가 될 수 있습니다. 객체는 중괄호 {}로 표현되며, 키-값 쌍은 쉼표로 구분됩니다. object = 물건, 물체 자바스크립트 객체는 속성(Property)과 행동(또는 메서드(Method))으로 구성됩니다. 객체는 데이터를 저장하는 속성과 그 데이터를 조작하거나 동작하는 메서드를 포함합니다. 이러한 속성과 메서드는 객체의 상태와 행동을 정의하며, 객체의 핵심적인 특징 중 하나입니다. 객체의 기본 구조 및 예제 다음은 JavaScript 객체의 기본 구조 및 예제입니다. // 객체 생..
[Javascript]자바스크립트 날짜 시간 정보를 가져오는 함수 자바스크립트에서는 Date 객체를 사용하여 날짜와 시간 정보를 가져올 수 있습니다. Date 객체를 생성하고 해당 객체의 메서드를 사용하여 다양한 날짜와 시간 정보를 얻을 수 있습니다. 현재 날짜와 시간 가져오기 const currentDate = new Date(); console.log(currentDate); // 예: Sun May 31 2023 10:30:00 GMT+0900 (Korea Standard Time) 위의 코드에서 currentDate 변수에 현재 날짜와 시간 정보가 담긴 Date 객체가 생성됩니다. 해당 객체를 출력하면 현재 날짜와 시간이 표시됩니다. 연도 가져오기 const currentYear = currentDate.getFullYear(); console.log(curre..
[Javascript]자바스크립트 타입변환 JavaScript에서는 다양한 방법으로 타입 변환을 할 수 있습니다. 일반적으로 사용되는 방법들은 다음과 같습니다. 암시적 타입 변환(Implicit Conversion) JavaScript는 필요한 경우에 자동으로 타입을 변환합니다. 예를 들어, 숫자와 문자열을 함께 사용하면 숫자를 문자열로 자동 변환하여 연결할 수 있습니다. let num = 42; let str = "The answer is " + num; // 암시적으로 숫자를 문자열로 변환하여 연결 console.log(str); // "The answer is 42" 명시적 타입 변환(Explicit Conversion) 개발자가 직접 타입을 변환하는 메서드나 연산자를 사용하여 타입을 변환할 수 있습니다. 문자열로의 변환 toString()..
[Javascript]자바스크립트 null typeof(타입)이 object로 나오는 원인과 대응 방법은? JavaScript에서 `typeof null`을 실행하면 "object"라는 결과가 반환됩니다. 이는 JavaScript의 설계 결함 중 하나로 알려져 있습니다. 이러한 동작은 초기 버전의 JavaScript가 개발되면서 발생한 오류로 인해 현재까지 유지되고 있습니다. null은 원래 object가 아닌 개별적인 타입으로 존재해야 할 것입니다. 실제로 null은 값이 없음을 나타내는 원시 타입이지만, `typeof` 연산자는 null을 "null"이 아닌 "object"로 분류합니다. 이는 기존 JavaScript 엔진의 내부 구현에 기인한 문제입니다. 대응 방법은? `typeof null`을 사용하여 null 타입을 확인하는 대신, null인지 확인하기 위해 엄격한 동등 비교(`===`)를 사용하거나..
[Javascript]자바스크립트 ES6에 추가된 백틱(`)과 기존 코드 비교 자바스크립트 ES6에서 백틱(`) 방식(esc 아래 있는 키)이 추가되었습니다. (영문키로 변경 후 눌러주세요) 백틱은 어떨 때 사용할까요? JavaScript에서 백틱(`)은 템플릿 리터럴(template literal)을 나타내는 데 사용됩니다. 백틱은 기존의 따옴표('작은따옴표' 또는 "큰따옴표") 대신 사용할 수 있으며, 여러 줄로 이루어진 문자열과 표현식의 삽입을 편리하게 작성할 수 있도록 도와줍니다. 기존의 따옴표로 둘러싸인 문자열을 사용할 때는 여러 줄을 작성하기 위해 줄 바꿈 문자(\n)를 사용해야 했습니다. 또한, 문자열과 변수 값을 함께 사용하려면 문자열 연결(concatenation) 연산자인 +를 사용해야 했습니다. 아래는 기존의 따옴표를 사용한 코드와 백틱을 사용한 코드의 비교 예..
[Javascript]자바스크립트(ES6) 데이터 타입 종류 자바스크립트(ES6)는 7개의 데이터 타입을 제공합니다. 원시 타입(Primitive types): number: 숫자를 나타내는 데이터 타입입니다. 정수 및 부동 소수점 숫자를 포함합니다. string: 문자열을 나타내는 데이터 타입입니다. 따옴표(큰 따옴표 또는 작은 따옴표)로 둘러싸여 있습니다. boolean: true 또는 false 값을 나타내는 데이터 타입입니다. null: 값이 없음을 나타내는 데이터 타입입니다. undefined: 변수에 할당되지 않은 값, 존재하지 않는 속성 또는 존재하지 않는 배열 요소를 나타내는 데이터 타입입니다. (ECMAScript 5에서는 실제로 undefined라는 값으로 할당되지만, 개념적으로는 타입입니다.) symbol: 유일하고 변경할 수 없는 값을 나타내..
[Javascript]자바스크립트 표현식인 문과 표현식이 아닌 문 자바스크립트에서는 문(Statement)과 표현식(Expression) 두 가지 유형의 코드를 사용합니다. 1. 표현식(Expression) 표현식은 값을 평가하여 결과를 반환하는 코드입니다. 예를 들면, 숫자, 문자열, 변수, 함수 호출 등이 표현식의 예입니다. 표현식은 다른 표현식과 연산자를 조합하여 만들어질 수 있습니다. 표현식은 대부분 다른 코드에서 값으로 사용될 수 있습니다. 2 + 3 // 5 x = 10 // 10 (할당 표현식은 할당된 값 자체를 반환합니다.) myFunction() // 함수 호출 표현식 2. 문(Statement) 문은 어떤 작업을 수행하는 완전한 코드 단위입니다. 문은 보통 세미콜론(;)으로 끝나며, 여러 개의 문은 중괄호({})로 블록으로 그룹화될 수 있습니다. 문은..
[블로그 운영팁]티스토리 ‘오늘까지 블로그 몇일 운영한지’ 보여주기 블로그 운영 며칠 되었는지 보여주는 소스입니다. 꼭 블로그가 아니더라도 사이트도 될 수 있고, D-day로 응용 가능합니다. 티스토리 기준으로 설명하겠습니다. 먼저 안에 아래 코드를 넣으세요. 위에 '블로그 개설일'은 본인 블로그 오픈 날짜로 변경해주세요. 다음으로 사이드바에 전체 방문자 보여주는 곳에 아래 코드를 넣으세요. 전체 방문자 Today : [!##_count_today_##] Yesterday : [!##_count_yesterday_##] [!##_count_total_##] 블로그 개설일 : 2007년 2월 27일 오늘까지 일 운영중 // 해당 부분입니다. 위에 [!##_count 이 부분에서! 는 없애고 적용해 주세요. (치환자를 넣었더니 변경되는 걸 방지하기 위해! 를 임시로 넣은 것..
반응형