본문 바로가기
728x90
반응형

전체 글104

Javascript에서 배열 합성과 가공을 하는 reduce 메서드 reduce는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하면서 하나의 값을 누적하는 메서드이다. 이를 통해 배열의 요소들을 단일 값으로 축소할 수 있다. array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue); callback : 각 요소에 대해 실행할 함수로, 네 개의 인자를 받는다. accumulator : 누적된 값. currentValue : 현재 배열의 요소. currentIndex : 현재 배열의 인덱스. array : 메서드가 호출된 배열. initialValue : 누적 값의 초기값으로, 생략할 수 있다. const numbers = [1, 2, 3, 4, 5]; // 배열의 모든 요소를 .. 2023. 11. 21.
Javascript 배열 처리를 위한 메서드들 1. map 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과로 새로운 배열을 생성한다. 원본 배열은 변경되지 않으며, 새로운 배열이 반환된다. JavaScript에서 배열을 변형하거나 수정할 때 자주 사용되는 고차 함수 중 하나이다. const numbers = [1, 2, 3]; const squaredNumbers = numbers.map(num => num ** 2); console.log(squaredNumbers); // 출력: [1, 4, 9] 2. filter 주어진 함수의 조건을 만족하는 배열의 요소만으로 새로운 배열을 생성한다. const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 ===.. 2023. 11. 20.
JavaScript에서 배열 변형과 데이터 가공을 위한 map메서드 JavaScript에서 배열을 다룰 때 많은 경우에 데이터의 변형이 필요하다. 이때 사용되는 유용한 메서드 중 하나가 map()이다. map()은 기존 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성한다. 이를 통해 코드를 간결하게 작성하고 데이터를 가공할 수 있다. const newArray = originalArray.map((currentValue, index, array) => { // 변형 또는 수정할 작업을 수행하고 반환 return transformedValue; }); - currentValue : 현재 처리 중인 요소의 값 - index : 현재 처리 중인 요소의 인덱스 - array : map을 호출한 배열 map() 메서드 활용 1) 데이터 변형 및 가공.. 2023. 11. 17.
JavaScript에서 많이 사용하는 함수들 1. setTimeout setTimeout 함수는 일정 시간이 지난 후에 한 번만 특정 함수를 실행하는 데 사용하고 함수 실행 이후에는 타이머가 해제된다. setTimeout(() => { console.log('After 1 second'); }, 1000); - 비동기 작업 후 일정 시간 동안 대기할 때. - 애니메이션 제어 및 타이밍 조절에 활용. 2. setInterval setInterval 함수는 일정한 간격으로 특정 함수를 반복해서 실행하는 데 사용되고 타이머를 해제하려면 clearInterval 함수를 사용한다. // 1초 간격으로 실행되는 함수 const intervalId = setInterval(function() { console.log('Function executed every.. 2023. 11. 17.
JavaScript에서의 함수 유형 1. 일반 함수 (Function Declarations) 함수 선언문은 function 키워드를 사용하여 정의되는 일반적인 함수이다. 주로 함수 선언문은 전역 스코프나 함수 스코프에서 사용된다. function add(a, b) { return a + b; } 2. 함수 표현식 (Function Expression) 함수가 변수에 할당되는 방식으로, 함수가 값으로 취급된다. 주로 변수에 함수를 할당하는 경우나 익명 함수를 사용할 때 주로 사용된다. 함수 표현식은 익명 함수일 수도 있고, 이름이 있는 함수일 수도 있다. const add = function(x, y) { return x + y; }; 2-1. 익명 함수 (Anonymous Function) 함수 이름이 없는 함수를 익명 함수라고 한다. .. 2023. 11. 17.
변수선언 키워드 var, let, const의 특징과 주의점 var, let, const 키워드는 변수를 선언할 때 사용되는 키워드로, 특징과 사용시의 주의점을 명확히 알고 있어야 한다. 0. 시작하기 전에 | 호이스팅(hoistion) 호이스팅은 변수 선언이 스코프 내에서 최상단으로 끌어올려지는 현상이다. | 스코프(Scope) 스코프는 변수와 함수의 유효 범위를 나타내는 개념으로, 코드 내에서 변수나 함수에 접근할 수 있는 범위를 결정하며, JavaScript에서는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있다. 1. var 'var'는 ES6 이전의 문법이므로 현대적인 JavaScript에서는 let과 const를 주로 사용한다. function example() { if (true) { var y = 10;.. 2023. 11. 16.
this값을 명시적으로 설정하는 메서드 - bind(), call(), apply() bind(), call(), apply()는 JavaScript에서 함수의 this 값을 명시적으로 설정하는 메서드다. 1. bind() bind() 메서드는 함수에 대한 this 값을 영구히 설정하고, 새로운 함수를 반환한다. 원본 함수에 영향을 주지 않고 새로운 함수를 생성하며, 새로운 함수를 호출하면 그 함수 내의 this가 bind()에 전달된 값으로 설정된다. const newFunction = originalFunction.bind(thisArg[, arg1[, arg2[, ...]]]); originalFunction : this를 영구적으로 설정하고자 하는 원본 함수. thisArg : originalFunction 내에서 this로 사용할 값. arg1, arg2, ... : origin.. 2023. 11. 15.
자바스크립트에서 this 동작 this는 현재 실행 중인 함수 내에서 사용되는 특별한 키워드이다. this의 값은 함수가 호출될 때마다 동적으로 결정되며, 호출 방식에 따라 달라진다. 여러 상황에서 this가 가리키는 대상이 다르기 때문에 상황별 this 동작을 알아야 한다. 1. 전역 컨텍스트 (Global Constext) 전역 컨텍스트에서 this는 전역 객체를 가리킨다. 브라우저 환경에서는 window 객체가 전역 객체이다. console.log(this); // {} 2. 함수 내부 (Function Context) 일반적인 함수 내부에서 this는 호출 시점에 따라 결정된다. function exampleFunction() { console.log(this); } exampleFunction(); // Object [glo.. 2023. 11. 15.
[확장프로그램] VSCode에서 코드를 실행하고 결과를 볼 수 있는 Code Runner Code Runner Visual Studio Code의 확장 프로그램 중 하나인 "Code Runner"은 소스 코드를 실행하고 결과를 출력하는 데 사용되는 도구입니다. 주로 다양한 프로그래밍 언어를 지원하며 코드를 편집하고 즉시 실행하여 결과를 확인할 수 있는 편리한 기능을 제공합니다. | 설치 VSCode를 열고 왼쪽 사이드바에서 "Extensions" (확장 프로그램) 아이콘을 클릭합니다. "Code Runner"을 검색하고 설치합니다. 이미 설치가 된 상태여서 버튼이 다른데 설치하기 전이면 Install 버튼만 있습니다. 1) 코드 실행 실행하려는 코드 블록 에서 마우스 오른쪽 버튼을 클릭하고 "Run Code"를 선택하거나, 단축키 Ctrl + Alt + N 를 사용하여 코드를 실행합니다. 출.. 2023. 11. 13.
[4-2] Express에서 정적 파일들을 제공하기 위한 미들웨어 - static express.static은 Express.js에서 정적 파일을 제공하기 위한 빌트인 미들웨어입니다. 이 미들웨어를 사용하면 서버에서 특정 디렉토리에 있는 정적 파일(이미지, CSS, JavaScript 파일 등)을 클라이언트에게 직접 제공할 수 있습니다. 기본적으로, express.static은 정적 파일들이 위치하는 폴더의 경로를 인자로 받습니다. 해당 폴더는 웹 서버에서 접근 가능한 위치에 있어야 하며, 클라이언트 측에서 해당 폴더의 파일들에 접근할 수 있습니다. 클라이언트 측에서 /styles.css와 같은 경로를 통해 서버에 정적 파일을 요청하면, Express.js는 해당 파일이 위치하는 폴더를 찾아서 파일을 클라이언트에게 전송해 줍니다. const express = require('expre.. 2023. 5. 24.
728x90
반응형