![]()
동기와 비동기 1. 동기와 비동기 - 동기와 비동기 실행 방식은 코드의 동작 및 효율성을 제어하는 데 중요한 역할을 합니다. 2. 동기 (Synchronous) - 동기 코드 실행은 순차적으로 진행되는 것을 의미합니다. 한 작업을 완료한 후, 다음 작업이 실행됩니다. - 동기 코드 실행 방식은 코드 블록이 위에서 아래로 순차적으로 실행되는 것이 특징입니다. - 동기 코드 실행은 주로 함수 호출, 루프, 파일 처리 등에서 사용됩니다. - 하나의 작업이 지연되면, 모든 작업이 지연되는 단점이 있습니다. console.log("첫 번째 실행"); console.log("두 번째 실행"); console.log("세 번째 실행"); 3. 비동기 (Asynchronous) - 비동기 코드 실행은 순차적으로 진행되..
![]()
fetch 함수 1. fetch( ) 함수 - 네트워크 요청을 보내고, 응답을 처리하기 위한 기본적인 웹 API - 웹 페이지 or 웹 패을리케이션에서 서버로 HTTP 요청을 보내고, 서버로부터 데이터를 받아올 수 있음 - 비동기적으로 작동하며, Promise를 반환함 2. 구문 - 각 매개변수와 메소드는 다음과 같음 - url : 요청을 보낼 URL 주소 - options : 요청에 대한 추가 설정을 정의하는 객체. HTTP 메서드, 헤더, 요청 본문 등 다양한 옵션 지정 가능 (선택) - .then( ) : fecth( )가 성공적으로 요청을 보내고, 응답을 받으면 실행되는 Promise의 첫 번째 핸들러. 여기서 응답을 처리 - .catch( ) : 네트워크 오류 or 요청 처리 중 발생한 다른 오..
![]()
Callback 함수 1. Callback 함수 - 다른 함수 내에서 실행되는 함수를 뜻함 - 주로 비동기 코드에서 사용되며, 비동기 작업이 완료되면 실행되어야 하는 작업을 정의함 2. Callback 함수의 특징 - 함수 내에서 다른 함수의 인자로 전달될 수 있음 - 함수 내에서 다른 함수의 결과로 반환될 수 있음 - 함수를 비동기 작업의 완료 후, 실행되도록 스케줄링할 수 있음 3. 예시 - a 함수는 3초 후, 비동기 작업이 완료되고 그 작업이 완료된 후, b 콜백 함수가 실행됨 console.clear(); function a(callback) { setTimeout(function () { console.log("비동기 작업 완료"); callback(10); // callback 함수를 호출 ..
![]()
localStorage 1. localStorage - JavaScript에서 localStorage는 웹 브라우저에서 데이터를 로컬로 저장하고, 유지할 수 있는 웹 스토리지 메커니즘 - 클라이언트 측에서 데이터를 영구적으로 저장하기 위한 간단하고 편리한 방법을 제공 - 사용자의 브라우저 세션 간에 데이터를 유지하며, 브라우저를 닫았다 열어도 데이터가 유지됨 2. 사용방법 - 데이터 저장 // localStorage.setItem('키', '값'); // 예시 localStorage.setItem('a', 10); localStorage.setItem('b', 20); console.log(localStorage); - 브라우저 안에 키와 값이 저장됨 - 데이터 가져오기 // const a = local..
![]()
findIndex 함수 1. findIndex( ) 함수 - 배열 내에서 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 찾는 데 사용되는 배열 메서드 - 콜백 함수를 이용하여 요소를 검색하며, 조건을 만족하는 요소를 찾으면, 해당 요소의 인덱스를 반환 ※ 조건을 만족하는 요소가 없을 시, -1을 반환 2. 예시 const todos = [ { id:10, content:"운동", }, { id:5, content:"목욕", }, { id:2, content:"공부", }, ]; function removeTodo(deleteIndex) { // index가 deleteIndex와 다른 것 들만 반환 return todos.filter((_, index) => index != deleteIndex); }..
![]()
fill 함수 1. fill( ) 함수 - 배열의 모든 요소를 지정한 값으로 채우는 메서드 - 원본 배열을 변경하며, 새로운 배열을 반환하지 않음 2. 구문 - value : 배열의 요소를 채울 값 - start : 채우기가 시작될 인덱스 (기본값 : 0) (선택 사항) - end : 채우기가 종료될 인덱스. 즉, 이 인덱스의 요소는 포함되지 않음 (기본값 : array.length) (선택사항) array.fill(value[, start[, end]]) 3. 예시 const numbers= [1, 2, 3, 4, 5]; // 2번째 부터 4번째까지 0으로 변경 numbers.fill(0, 1, 4); console.log(numbers);
![]()
filter 함수 1. filter( ) 함수 - 배열(Array) 객체의 메서드 - 배열 내의 요소들을 특정 조건에 따라 걸러내어, 새로운 배열을 생성하는 데 사용 2. 예시 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const evenNumbers = numbers.filter(function(number) { return number % 2 === 0; }); console.log(evenNumbers);
![]()
focus 함수 1. focus( ) 함수 - HTML 요소에 포커스를 설정하는 메서드 - 사용자가 키보드 or 마우스 등을 사용하여, 상호작용할 때, 해당 요소에 집중되는 것을 의미
![]()
trim 함수 1. trim( ) 함수 - 문자열의 앞과 뒤에 있는 공백(space, tab, 줄바꿈 등)을 제거하는 메서드 - 문자열을 가공할 때, 유용하게 사용 가능 2. 예시 const str = " Hello, World! "; const trimmedStr = str.trim(); console.log(trimmedStr); // "Hello, World!"
![]()
preventDefault 함수 1. preventDefault( )함수 - JavaScript에서 이벤트 처리를 제어하는 데 사용되는 메서드 - 주로 웹 페이지에서 발생하는 기본 동작(URL 이동, 페이지 세로고침 등)을 막고자 할 때, 사용 - 이는 이벤트 객체에 속한 메서드이며, 이벤트 처리 함수내에서 호출됨 - 호출 시, 해당 이벤트의 기본 동작이 막히게 되며, 이후 원하는 동작 수행 가능
![]()
map 함수 1. map( ) 함수 - 배열(Array)의 각 요소에 대해 주어진 함수를 호출하여, 새로운 배열을 생성하는 함수 2. map( ) 함수 구문 - function : 배열의 각 요소에 대해 실행될 함수 (3개의 매개변수를 가짐) - currentValue : 현재 처리 중인 요소의 값 - index : 현재 요소의 인덱스 - array : map( ) 함수가 호출된 배열 자체 - thisArg : function 내부에서 사용할 this의 값 (선택사항) array.map(function(currentValue, index, array) { // 변환 또는 가공 작업을 수행하는 코드 }, thisArg); 3. 예시 const numbers = [1,2,3,4,5]; const twiceN..
![]()
setTimeout 함수 1. setTimeout 함수 - 비동기적인 실행을 할 때, 사용되는 타이머 함수 - 특정 코드 블록을 지정된 시간 후에 실행할 수 있음 2. setTimeout 함수의 구문 - callback : 지연 후 실행될 함수 - delay : 실행을 지연시킬 시간을 밀리초 단위로 정수값으로 지정 - arg1, arg2, ... : 콜백 함수에 전달할 인수들 setTimeout(callback, delay, arg1, arg2, ...); 3. 예시 function hello() { console.log("실행3"); } // 실행3은 바로 실행되지 않고, 3초 뒤에 실행됨 setTimeout(hello, 3000); console.log("실행1"); console.log("실행2")
![]()
타이머 함수 1. 타이머 함수 - 특정 시간에 코드를 실행하거나 일정한 간격으로 코드를 반복 실행하는 기능 제공함 2. setTimeout 함수 - 일정 시간 경과 후, 특정 코드 블록 or 함수를 실행하는 기능 제공함 setTimeout(callback, delay); - callback : 지정된 시간이 경과 후, 실행할 콜백 함수 - delay : 콜백 함수를 실행하기까지의 지연 시간을 밀리초(Millisecondes) 단위로 나타냄 (지연 시간 후, 콜백 함수 실행) - clearTimeout(id) 함수를 사용하여 실행되고 있는 timeout을 중지 - 예시 - setTimeout 함수로 인하여 그 뒤의 console.log가 먼저 실행한 후, 지연시간 4초 뒤에 Callback함수에 있는 a ..
![]()
클로저 (Closure) 1. 클로저 (Closure) - 외부 변수를 기억하고, 이 외부 변수에 접근할 수 있는 함수 - 자바스크립트의 함수와 그 함수가 선언될 때의 환경으로 이루어짐 console.clear(); function countFunction(num) { var count = num; function Increase() { count++; console.log(count); } return Increase; } var counter1 = countFunction(0); var counter2 = countFunction(5); counter1(); counter2(); - 결과를 보면, counter1( ) 함수의 값은 1이고, counter2( ) 함수의 값은 6임 → 그 이유는 coun..
![]()
메서드와 this 1. 메서드 (method) - 함수가 객체의 속성 값이 될 경우 그 함수를 메서드라고 함 - 다음과 같이 첫 번째 Hello World는 a( ) 함수, 두 번째는 바인드된 메서드로 호출된 것 function a() { console.log('Hello World'); } var b = {name : 'object', method : a}; a(); b.method(); 2. this - 함수가 호출되었을 때, 어떤 객체에 바인드된 속성으로 호출된 것인지를 보여 줌 - this는 예약어임 ※ 예약어 : 프로그래밍 언어에 미리 정의된 키워드
