목록SW 개발/Vanilla JS (21)
DATA101
Step 1. 디렉토리 접근 터미널을 통해 package-lock.json과 node_modules 폴더가 위치한 디렉토리로 이동합니다. Step 2. package-lock.json 삭제 rm -rf package-lock.json Step 3. node_modules 삭제 rm -rf node_modules Step 4. npm 모듈 재설치 npm install 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊
🔥 목표 JavaScript와 HTML을 활용하여 간단한 Interactive Web 기능을 구현해 본다. 예제 간단한 예제를 실습해 봅니다. HTML을 활용해 버튼 UI를 생성하고 웹에 출력하고, JavaScript를 통해 사용자가 버튼을 클릭하는 것을 감지하여 클릭 횟수를 실시간으로 업데이트하는 것을 구현해 봅시다. 실습 코드 index.html Total Click: 0 버튼 실행결과 버튼 클릭 전입니다. 아래와 같이 버튼을 클릭하면 웹 페이지 및 콘솔에 클릭 횟수가 출력되는 것을 확인할 수 있습니다. JavaScript와 HTML를 활용하여 간단한 Interactive Web 기능을 구현해 봤습니다. 포스팅 내용에 오류나 질문이 있다면 댓글 남겨주시면 감사드리겠습니다. 고맙습니다 :)
💡 목표 JavaScript에서 객체 병합 방법에 대해 학습한다. 목차 1. Object.assign() 함수 2. 전개연산자 3. 일반 함수 정의 들어가며 객체를 병합하는 방법은 크게 3가지가 있으며 각각 알아보겠습니다. 먼저, 3개 객체를 예시로 정의하겠습니다. let obj1 = { a: 10, b: 20, c: 30 } let obj2 = { c: 30, d: 40, } let obj3 = { c: 770, d: 477, } 1. Objet.assign() 함수 함수 원형 Object.assign(객체1, 객체2, 객체3, ... , 객체 N); Object 객체 내 assign 함수는 객체의 원소를 중복을 허용하지 않고 병합합니다. 단, 중복되는 원소는 나중에 병합하는 객체의 원소로 최종 병합합..
💡 목표 JavaScript에서 배열 내 조건을 만족하는 원소를 찾는 filter 함수의 활용법에 대해 학습한다. 함수 원형(기본) 배열.filter(콜백함수(값, 인덱스, 배열 자신)); filter 함수는 전달인자가 배열 내 원소 값, 인덱스, 배열 자신인 콜백함수를 받는 함수로, 특정 조건을 만족하는 원소만 반환하는 함수입니다. 예제1 let arr1 = [1, 30, 39, 29, 10, 13]; function filterFunction1(value){ return value < 30; }; let arrFiltered = arr1.filter(filterFunction1); console.log(arrFiltered); filter 함수를 활용하여 30보다 작은 원소만 선택할 수 있습니다. 실..
💡 목표 JavaScript에서 forEach 함수와 map 함수의 활용법에 대해 학습한다. 1. forEach 함수 함수 원형(기본) 배열.forEach(콜백함수(값, 인덱스, 배열 자신)); forEach 함수는 전달인자가 배열 내 원소 값, 인덱스, 배열 자신인 콜백함수를 받는 함수입니다. 즉, forEach 함수는 for 반복문처럼 첫 번째 원소부터 마지막 원소까지 차례대로 배열에서 꺼내 콜백함수에 전달합니다. map 함수와 다르게 리턴 값이 없다는 특징이 있습니다. 예제 코드와 함께 살펴보겠습니다. 예제1 let arr1 = [100, 200, 300]; arr1.forEach( (v, idx, arr) => { console.log(`${idx} 인덱스의 값: ${v}`); console.lo..
💡 목표 JavaScript에서 배열 내 최댓값, 최솟값 찾는 방법에 대하여 학습한다. 1. Math.max() 함수: 최댓값 찾기 함수 원형 Math.max(배열); Math 객체 내 max 함수는 배열 내 최댓값을 반환합니다. 예제 console.log(Math.max(3, 4, 5, 6, -1)); // 6 2. Math.min() 함수: 최솟값 찾기 함수 원형 Math.min(배열); Math 객체 내 min 함수는 배열 내 최솟값을 반환합니다. 예제 console.log(Math.max(3, 4, 5, 6, -1)); // -1 오늘은 JavaScript에서 배열 내 최댓값, 최솟값을 구하는 방법에 대해 알아봤습니다. 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요! 그럼 오늘도 즐겁고 행복..
💡 목표 JavaScript에서 배열 내 조건에 맞는 원소를 구하는 방법에 대해 학습한다. 1. round 함수: 올림 함수 원형 Math.round(숫자); Math 객체 내 round 함수는 전달받는 숫자를 올림 합니다. 예제 console.log(Math.round(3.49)); // 4 console.log(Math.round(4.5)); // 5 console.log(Math.round(-3.26)); // -3 console.log(Math.round(-9.88)); // -9 2. ceil 함수: 반올림 함수 원형 Math.ceil(숫자); Math 객체 내 ceil 함수는 전달받는 숫자를 반올림합니다. ceil이 사전적으로 천장을 칠하거나 만드는 의미가 있으니 기억하기 쉽습니다. 예제 co..
💡 목표 JavaScript에서 배열 내 조건에 맞는 원소를 구하는 방법에 대해 학습한다. 1. every 함수: 모든 원소의 조건식 만족 여부 확인 함수 원형 배열.every(조건식 함수) every 함수는 배열 내 모든 원소가 조건을 만족하면 true를, 하나라도 불만족할 경우 false를 반환합니다. 예제 코드 let arr1 = [1, 30, 39, 29, 10, 13]; function everyFunction(value){ return value < 38; } let arr2 = arr1.every(everyFunction); console.log(arr2); // false 위의 예제는 배열 내 모든 원소가 38보다 큰지 확인하는 코드입니다. 딱 원소 39가 38보다 큰 값이기 때문에 eve..