전체 글

오늘은 대망의 프로토타입과 상속에 관하여 물어보았다. 평소에도 대충 알고 있던 내용이라 정리에 큰 도움이 되었다! // 안녕하세요! 자바스크립트의 프로토타입과 상속 관련 내용 중 자바스크립트의 프로토타입 기반 상속에 대해 자세히 알려주세요. 안녕하세요! 자바스크립트의 프로토타입 기반 상속에 대해서 설명하겠습니다. 자바스크립트는 객체 지향 언어이지만, 클래스 기반 언어와는 조금 다른 특징을 가지고 있습니다. 클래스 기반 언어에서는 클래스라는 청사진을 만들고 이를 기반으로 객체를 생성하지만, 자바스크립트에서는 프로토타입이라는 객체를 만들고 이를 참조하여 다른 객체를 생성합니다. 이런 특징 때문에 자바스크립트를 프로토타입 기반 언어라고도 합니다. 자바스크립트의 모든 객체는 프로토타입이라는 다른 객체를 참조합니..

이제 많이 온 것 같다.. 오늘은 설탕(?) async / await 에 관해 물어보았다! // 최신 문법 중 하나인 async await 가 너무 어려습니다. 예시와 함께 쉽게 설명해 줄 수 있으십니까? 물론입니다. async와 await는 JavaScript의 비동기 처리를 단순화하고 더 읽기 쉽게 만들기 위한 문법입니다. async 키워드는 함수 앞에 위치하며, 이 함수는 항상 Promise를 반환하게 됩니다. 만약 함수가 명시적으로 Promise를 반환하지 않더라도, JavaScript는 암묵적으로 반환 값을 Promise로 감싸게 됩니다. await 키워드는 async 함수 내에서만 사용할 수 있으며, Promise의 해결을 기다립니다. 즉, Promise가 이행되거나 거부될 때까지 함수의 실행..

오늘은 그렇다 나왔다 프로미스다.. 프로미스(Promise)는 JavaScript에서 비동기 연산을 더 편리하게 관리할 수 있도록 하는 객체입니다. Promise는 비동기 연산의 최종 완료(또는 실패) 및 그 결과 값을 나타냅니다. Promise는 주로 서버에서 데이터를 가져오는 등의 비동기 작업에 사용됩니다. 프로미스는 3가지 상태를 가집니다: pending: 초기 상태로, 이행되거나 거부되지 않음. fulfilled: 연산이 성공적으로 완료됨. rejected: 연산이 실패함. 프로미스는 이러한 상태를 갖고, pending에서 fulfilled 또는 rejected 상태로 변경될 수 있습니다. 한번 상태가 변경되면, 그 상태는 영구적이며 다시는 변경되지 않습니다. 다음은 프로미스의 생성과 사용 예제입..

오늘은 드디어 무서운 비동기를 물어보았다.. 먼저 콜백함수부터다 콜백 함수는 다른 함수에 인수로 전달되는 함수를 말합니다. "콜백"이라는 용어는 이 함수가 다른 코드에 의해 "호출되는 위치"를 설명하는 데에서 유래되었습니다. 콜백 함수는 자바스크립트의 중요한 부분이며, 특히 비동기 작업을 처리할 때 자주 사용됩니다. 예를 들어, 서버에 요청을 보내고 그 응답을 기다리는 동안 다른 코드를 계속 실행하려면 비동기 방식을 사용해야 합니다. 이 경우 콜백 함수는 응답이 도착하면 실행되는 함수가 됩니다. 다음은 콜백 함수를 사용하는 간단한 예입니다: function greet(name, callback) { console.log('Hello, ' + name); callback(); } greet('John', ..

오늘은 이벤트 핸들러에 대해 물어보았다! 자바스크립트에서는 addEventListener()와 removeEventListener() 메서드를 사용해 이벤트 리스너를 추가하거나 제거할 수 있습니다. 1. addEventListener(): 이 메서드는 특정 요소에 이벤트 핸들러를 등록합니다. 그러면 해당 이벤트가 발생할 때마다 이벤트 핸들러가 실행됩니다. element.addEventListener(event, function, useCapture); 여기서: event는 반응하려는 이벤트의 이름입니다(예: 'click', 'mouseover' 등). function는 이벤트가 발생할 때 실행할 함수입니다. useCapture는 선택적인 boolean 값으로, 이벤트 전파 방식을 결정합니다. true를 ..

이번에는 선택한 DOM 을 수정하고 추가하고 삭제하는 방법에 대해 물어보았다 1. 요소의 내용 변경: innerHTML 또는 textContent 속성을 사용하여 요소의 내용을 변경할 수 있습니다. let element = document.getElementById('myId'); element.innerHTML = '새로운 내용'; 혹은 let element = document.getElementById('myId'); element.textContent = '새로운 내용'; 2. 요소의 속성 변경: setAttribute() 메서드를 사용하여 요소의 속성을 변경할 수 있습니다. let element = document.getElementById('myId'); element.setAttribute('..

오늘은 DOM 을 조작하는 방법에 대해 물어보았다. 먼저 DOM 을 선택하는 것부터 시작! 자바스크립트에서는 다양한 방법으로 DOM 요소를 선택할 수 있습니다. 다음은 몇 가지 방법입니다. 1. getElementById: 아이디를 통해 요소를 선택합니다. 아이디는 페이지 내에서 유일해야 합니다. let element = document.getElementById("myId"); // Id 를 기준으로 찾아온다. Id는 고유하니까 당연히 유일한 요소만 선택된다 2. getElementsByClassName: 클래스 이름을 통해 요소를 선택합니다. 여러 요소가 선택될 수 있으므로 반환 값은 HTMLCollection입니다. let elements = document.getElementsByClassName..

오늘은 지난번에 언급되던 얕은 복사(shallow copy)와 깊은 복사(deep copy)에 대해 물어보았다. // 원시 타입(primitive type) 과 참조 타입(reference type)에 대해 알고 있으면 편하다.. // 이건 다음시간에 더 살펴보기로 하고.. "얕은 복사"와 "깊은 복사"는 객체를 복사할 때 사용되는 용어입니다. 이들은 복사된 객체와 원본 객체가 서로 어떻게 연관되어 있는지를 설명합니다. // 어떤 객체(배열도 포함)를 복사하고 싶은 경우에.. let origin = { name: 'kim', age : 20 }; let copy = origin; // 이렇게 하면 망한다 // 이렇게 하면 망한다. 왜냐하면 copy 는 그냥 origin을 '가리키고' (참조하고) 있을 뿐..

오늘은 배열에 사용할 수 있는 메소드에 대해 물어보았다. push(): 배열의 마지막에 새로운 요소를 추가하고, 새로운 길이를 반환합니다. let arr = [1, 2, 3]; let returnVal = arr.push(4); console.log(arr); // [1, 2, 3, 4] console.log(returnVal); // 4 // 원본 배열 변경한다! pop(): 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다. let arr = [1, 2, 3]; let returnVal = arr.pop(); console.log(arr); // [1, 2] console.log(returnVal) // 3 // 원본 배열 변경한다! shift(): 배열의 첫 번째 요소를 제거하고, 그 요소를 반..

잠깐 쉬어가는 타임으로 메소드(method)와 함수(function)의 차이에 대해 물어보았따.. 함수(function)와 메소드(method)는 모두 코드를 재사용하고 모듈화하는 데 사용되는 방법이지만, 그들 사이에는 약간의 차이가 있습니다. 함수(Function): 함수는 자체적으로 독립적으로 존재하며, 일련의 문장을 포함하고 있습니다. 이 문장들은 특정 작업을 수행하거나 계산을 수행하고 그 결과를 반환합니다. 함수는 전역 범위 또는 다른 함수 내부에서 정의될 수 있습니다. function greet(name) { return 'Hello, ' + name; } // 함수임.. 메소드(Method): 메소드는 객체의 특성을 나타내는 함수입니다. 객체에 속한 함수를 메소드라고 부릅니다. 메소드는 그것이..