![]()
오늘은 바닐라 자바스크립트로 DOM에 요소를 추가하는 상황에서documentFragment 객체에 대해 알게 되었습니다.react를 사용하면 볼 일이 많이 없을 수도 있지만 새로운 개념을 알게되어 정리합니다! Document Fragment 의 정의DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. DocumentFragment 노드를 사용하면 메인 DOM 트리 외부에 경량화된 DOM을 만들 수 있어 브라우저 repaint 영향 없이 메모리에서 DOM 조작이 가능합니다. 용도와 효과-메인 DOM의 조작(manipulation)이 필요할때 페이지 reflow 등 성능적 영향을 최소한으로 줄이기 위해 사용합니다.-Document Fr..
![]()
오늘은 화살표함수와 일반함수에서의 this 바인딩이 너무 헷갈려서 다시 공부했습니다.안녕하세요! 자바스크립트에서 일반 함수와 화살표 함수의 this 바인딩 차이를 이해하는 것은 중요한 부분입니다. 두 함수 유형의 this 바인딩 방식의 차이는 다음과 같습니다:1. 일반 함수일반 함수에서 this의 값은 함수가 호출되는 방식에 따라 결정됩니다. 즉, 누가 함수를 호출하느냐에 따라 this가 결정됩니다. 다음은 몇 가지 일반적인 경우입니다:객체의 메소드로 호출될 때: this는 메소드를 호출한 객체를 가리킵니다.단독 함수로 호출될 때: 엄격 모드(strict mode)에서는 this가 undefined가 되고, 비엄격 모드(non-strict mode)에서는 this가 전역 객체(global object)를..
![]()
오늘도 팀원들과 함께 팀프로젝트를 진행하였습니다. 바닐라 환경(?) 그러니까 아무것도 없는 폴더에서 시작하여 html 마크업부터 하고, js, css 작성 및 연결하는 상황인데, 오늘의 문제는 env 사용시 마주친, "process is not defined" 였습니다... vite 혹은 react, next 프로젝트에서는 env사용시 클라이언트에서도 NEXT_PUBLIC 등을 붙여주면 접근이 가능했는데, 바닐라 환경(?)에서는 계속해서 process 에 접근하지 못하는 문제가 있었습니다. // 문제가 된 코드 const request = await fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${..
![]()
네, ES6 이전의 JavaScript에서는 주로 함수를 사용하여 클래스와 비슷한 구조를 만들곤 했습니다. 이러한 방식은 주로 생성자 함수와 프로토타입을 이용하여 객체 지향 프로그래밍을 구현합니다. 이러한 패턴을 '프로토타입 기반 상속'이라고 합니다. 생성자 함수 사용 예제 생성자 함수를 사용하여 클래스와 유사하게 객체를 생성하고 메서드를 정의할 수 있습니다. 아래는 생성자 함수와 프로토타입을 이용한 예제입니다. function Person(name, age) { this.name = name; this.age = age; } Person.prototype.greet = function() { console.log(`Hello, my name is ${this.name} and I am $..
![]()
...[1, 2, 3]은 이터러블인 배열을 펼쳐서 요소들을 개별적인 값들의 목록 1, 2, 3 으로 만든다. 이때 1 2 3은 값이 아니라 값들의 목록이다. 즉, 스프레드 문법의 결과는 값이 아니다. 이는 스프레드 문법 ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 의미한다. 따라서 스프레드 문법의 결과는 변수에 할당 할 수 없다. // 스프레드 문법의 결과는 값이 아니다. const list = ...[1, 2, 3]; 이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 *주의 스프레드 문법은 앞에서 살펴본 Rest 파라미터와 형..
![]()
push 인수로 전달받은 모든 값을 원본 배열의 마지막에 추가하고 변경된 length 값을 반환 > 원본 배열 변경 > 성능x, 다음 두가지 방법을 쓰는게 좋음 const arr = [1, 2]; // push 와 동일 arr[arr.length] = 3; // 스프레드 문법으로 원본 안건드리고 const newarr = [...arr, 3]; pop 원본배열에서 마지막 요소를 제거하고 제거한 요소를 반환 > 원본 배열 변경 unshift 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 반환 > 원본 배열 변경 shift 원본배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다. > 원본 배열 변경 concat 인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마..
![]()
클로저란? const x = 1; function outer() { const x = 10; const inner = function () { console.log(x); } return inner; } // outer 함수를 호출하면 중첩함수 inner 를 반환한다. // 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트는 스택에서 팝되어 제거된다. const innerFunc = outer(); innerFunc(); 위 코드를 실행하면 콘솔에 10이 찍힌다. 이미 생명주기가 종료되어 실행 컨텍스트 스택에서 제거된 outer 함수의 지역변수 x 가 다시 부활이라도 한듯이 동작한다. 이처럼 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참..
![]()
// this 는 어디서든지 참조 가능하다 // 전역에서 this 는 전역 객체 window 를 가리킨다 console.log(this); // window function square(number){ // 일반 함수 내부에서 this 는 전역객체 window를 가리킨다. console.log(this) // window; return number * number; } square(2); // 전역 함수는 물론이고 중첩함수를 일반 함수로 호출하면 // 내부의 this에는 전역 객체가 바인딩된다. // 다만 this 는 객체의 프로퍼티나 메서드를 참조하기 위한 자기참조 변수이므로 // 객체를 생성하지 않는 일반 함수에서 this 는 의미가 없다. // strict 모드에서는 undefined가 바인딩된다...
![]()
함수의 매개변수는 적을수록 좋다. 매개변수가 많다는 것은 함수가 여러가지 일을 한다는 증거이므로 바람직하지 않다. 이상적인 함수는 한가지 일만 해야 하며 가급적 작게 만들어야 한다. 따라서 매개변수는 최대 3개 이상을 넘지 않는 것을 권장한다. 만약 그 이상의 매개변수가 필요하다면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리하다. 모던자바스크립트 딥다이브 - 172p 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다. 따라서 함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는 것이 좋다. 비순수 함수는 코드의 복잡성을 증가시킨다. 비순수 함수를 최대한 줄이는 것은 부수 효과를 억제하는 것과 같다. 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는..
![]()
안녕하세요! JavaScript의 클로저(closure)에 대해 설명드리겠습니다. 클로저의 개념: 클로저는 JavaScript의 강력한 기능 중 하나로, 함수가 선언될 때의 렉시컬 환경(Lexical Environment)에 대한 참조를 유지하는 함수를 말합니다. 이를 통해 함수는 자신이 선언될 당시의 환경 밖에서 호출되더라도 그 환경에 접근할 수 있습니다. 클로저의 특징: 외부 함수의 변수 접근: 클로저를 통해 내부 함수는 외부 함수의 변수에 접근할 수 있습니다. 은닉화와 캡슐화: 외부에서 접근할 수 없는 private 변수를 만들 수 있습니다. 상태 유지: 함수가 호출될 때마다 새로운 환경이 생성되지 않고, 기존 환경을 유지할 수 있습니다. 클로저의 예시: function makeCounter() {..
![]()
드디어 기초편 마지막! 중요한 에러 처리에 관해 질문하였다. // 그동안 자바스크립트에 대한 기초적인 학습을 탄탄히 도와주셔서 감사합니다. 마지막 질문은 에러처리에 대한 것입니다. 1. try-catch 문 2. 에러 객체 사용 3. 사용자 정의 에러 생성 에 대해서 알려주시면 감사하겠습니다. 잘 알려진 사실이지만, 오류는 프로그래밍의 필수 부분입니다. 특히 JavaScript는 다양한 방식으로 오류를 처리할 수 있습니다. 다음 세가지 기법을 논의해보겠습니다: try-catch 문, 에러 객체 사용, 사용자 정의 에러 생성. 1. Try-Catch 문 Try-catch 문은 오류를 "catch"하고 처리하는 방법을 제공합니다. 이 방식을 사용하면, "try" 블록에서 오류가 발생할 수 있는 코드를 실행하..
![]()
거의 다 온 것 같다.. 오늘은 모듈에 관해 물어보았다. // 그러면 다음으로 자바스크립트의 모듈에 관련해서 질문하겠습니다. 모듈 작성 및 내보내기 가져오기, 그리고 commonJS와 ES6 모듈 시스템에 대해 자세히 설명해 주세요. 자바스크립트 모듈은 관련 있는 함수, 객체, 또는 값들을 그룹핑하여 캡슐화하고, 외부로부터의 접근을 제한하는 방법을 제공합니다. 이는 코드의 재사용성을 향상시키며, 유지 관리를 쉽게 하고, 이름 충돌을 방지하는 데 도움이 됩니다. 1. CommonJS (CJS): Node.js에서 사용하는 모듈 시스템이며, 동기식(Synchronous)으로 작동합니다. require() 함수를 사용해 모듈을 가져오고, module.exports를 사용해 모듈을 내보냅니다. // math.j..
![]()
// ES6의 class 문법을 constructor super extend 의 활용법과 함께 자세히 설명 부탁드려요! ES6에서 도입된 class 문법은 기존의 프로토타입 기반 상속을 보다 명확하고 간결하게 표현할 수 있도록 해줍니다. constructor, super, extend 키워드들이 이 문법의 주요 부분입니다. 1. constructor: 클래스의 생성자 메서드로, 객체가 생성될 때 호출됩니다. 이 메서드는 인스턴스를 초기화하는 코드를 포함하며, 인스턴스의 프로퍼티를 설정합니다. class Person { constructor(name) { this.name = name; } } let person = new Person('John'); console.log(person.name); // 출..
![]()
// 생성자 함수에 대해 더 자세히 설명해 주세요! 네, 그럼 생성자 함수에 대해 자세히 설명하겠습니다. 자바스크립트에서 생성자 함수는 새로운 객체를 만들고 초기화하는 데 사용되는 특별한 함수입니다. 생성자 함수는 대문자로 시작하는 이름을 가진 함수로 정의되는 것이 일반적입니다. 이는 생성자 함수와 일반 함수를 구분하는 좋은 방법입니다.다음은 생성자 함수의 예입니다:function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName;}var person1 = new Person('John', 'Doe');var person2 = new Person('Jane', 'Doe');console.log(perso..
![]()
오늘은 대망의 프로토타입과 상속에 관하여 물어보았다. 평소에도 대충 알고 있던 내용이라 정리에 큰 도움이 되었다! // 안녕하세요! 자바스크립트의 프로토타입과 상속 관련 내용 중 자바스크립트의 프로토타입 기반 상속에 대해 자세히 알려주세요. 안녕하세요! 자바스크립트의 프로토타입 기반 상속에 대해서 설명하겠습니다. 자바스크립트는 객체 지향 언어이지만, 클래스 기반 언어와는 조금 다른 특징을 가지고 있습니다. 클래스 기반 언어에서는 클래스라는 청사진을 만들고 이를 기반으로 객체를 생성하지만, 자바스크립트에서는 프로토타입이라는 객체를 만들고 이를 참조하여 다른 객체를 생성합니다. 이런 특징 때문에 자바스크립트를 프로토타입 기반 언어라고도 합니다. 자바스크립트의 모든 객체는 프로토타입이라는 다른 객체를 참조합니..
![]()
이제 많이 온 것 같다.. 오늘은 설탕(?) 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): 메소드는 객체의 특성을 나타내는 함수입니다. 객체에 속한 함수를 메소드라고 부릅니다. 메소드는 그것이..
![]()
오늘은 객체에 사용할 수 있는 내장 메소드에 대해 물어보았다. 자바스크립트에서는 객체와 배열을 조작하기 위한 다양한 내장 메소드를 제공하고 있습니다. 다음은 그 중 몇 가지를 소개합니다: Object.keys(obj): 이 메소드는 객체의 모든 열거 가능한 속성의 이름들을 배열로 반환합니다. const obj = { a: 1, b: 2, c: 3 }; console.log(Object.keys(obj)); // ["a", "b", "c"] // 객체의 키 값을 배열로 반환한다! Object.values(obj): 이 메소드는 객체의 모든 열거 가능한 속성의 값들을 배열로 반환합니다. const obj = { a: 1, b: 2, c: 3 }; console.log(Object.values(obj)); /..
![]()
오늘은 객체와 배열 중 배열에 대해 물어보았다. 자바스크립트에서 배열(array)은 여러 개의 값을 하나의 변수에 저장할 수 있는 데이터 타입입니다. 배열은 배열 리터럴(array literal)을 사용하여 생성할 수 있으며, 배열 리터럴은 대괄호([])로 표현되고, 그 안에는 쉼표로 구분된 값들이 들어갑니다. 예를 들면: let arr = [1, 2, 3, 4, 5]; 이것은 arr이라는 변수에 1부터 5까지의 값을 가진 배열을 생성한 예시입니다. 배열에는 인덱싱(indexing)을 사용하여 각 요소에 접근할 수 있습니다. 배열의 인덱스는 0부터 시작합니다. 따라서 첫 번째 요소는 인덱스 0, 두 번째 요소는 인덱스 1, 세 번째 요소는 인덱스 2, 이런 식으로 접근할 수 있습니다. 예를 들면: con..
![]()
오늘은 객체와 배열 중 객체(object)에 대해 물어보았다. 자바스크립트에서 객체는 다양한 데이터 유형을 보유할 수 있는 복합 데이터 타입입니다. 객체는 키(key)와 값(value)의 쌍으로 이루어진 프로퍼티(property)를 가집니다. 이러한 키-값 쌍을 속성(attribute)이라고도 부르기도 합니다. 객체는 보통 객체 리터럴(object literal)이라는 방식을 통해 생성됩니다. 객체 리터럴은 중괄호({})를 사용하여 표현하며, 내부에는 쉼표로 구분된 키-값 쌍이 들어갑니다. 예를 들면: let obj = { key1: 'value1', key2: 'value2', key3: 'value3' }; 여기서 key1, key2, key3는 객체의 키이며, 각 키에 해당하는 'value1', '..
![]()
오늘은 익명함수와 화살표 함수에 대해 물어보았다. 익명 함수와 화살표 함수는 자바스크립트에서 두 가지 중요한 함수 형태입니다. 각각에 대해 알아봅시다. 익명 함수 (Anonymous function) 익명 함수는 이름이 없는 함수입니다. 보통 이벤트 핸들러, 콜백 함수 또는 즉시 실행 함수 등과 같이 한 번 사용되거나 재사용할 필요가 없는 경우에 사용됩니다. 익명 함수는 변수에 할당되거나 다른 함수의 인수로 전달될 수 있습니다. // 변수에 할당된 익명 함수 const myFunction = function() { console.log('Hello, anonymous function!'); }; myFunction(); // 출력: Hello, anonymous function! // 익명 함수를 인수로..
![]()
오늘은 함수의 반환값 return 에 대해서 물어보았다. 자바스크립트에서 함수는 특정 작업을 수행하거나 계산을 수행한 결과를 반환할 수 있습니다. 이를 위해 return 문을 사용합니다. return 문은 선택적으로 표현식(expression)을 가질 수 있으며, 이 표현식의 결과가 호출자에게 반환됩니다. return 문의 사용법은 다음과 같습니다. function functionName(parameters) { // 함수 코드 return expression; // return 반환할거 라고 작성하면 된다 } 함수의 반환 값을 사용하는 예시를 살펴봅시다. function add(a, b) { let sum = a + b; // 인자로 받은 a,b를 더해서 sum 에 담고 return sum; // 함수..
![]()
오늘은 함수 중 파라미터와 인자에 대해 물어보았다. 매개변수(parameter)와 인자(argument)는 함수와 관련된 용어입니다. 이 둘은 서로 관련이 있지만, 서로 다른 개념입니다. 매개변수(parameter): 매개변수는 함수의 정의부분에 사용되며, 함수가 호출될 때 값을 받을 수 있는 변수입니다. 함수가 작동할 때 이 매개변수들에 값을 전달하면, 함수 내부에서 해당 값을 사용하여 계산이나 처리를 수행할 수 있습니다. 예를 들어, 두 수를 더하는 함수를 만들 때, 두 개의 매개변수를 사용할 수 있습니다. function add(a, b) { return a + b; } 여기서 a와 b는 매개변수입니다. 인자(argument): 인자는 함수를 호출할 때 전달하는 실제 값입니다. 함수를 호출할 때 인..
