JavaScript
-
@2023/10/05 안녕하세요 lika-7입니다이번시간에는 replace 메서드에 대해 정리 하겠습니다 replace 메서드는?💡1. 문자열 내에서 특정 패턴 또는 문자열을 다른 패턴 또는 문자열로 대체하는데 사용됩니다.주의⚠️replace() 메서드는 원본 문자열을 변경하지 않고 새로운 문자열을 반환합니다. 대체한 결과를 새로운 변수에 저장하거나 반환된 값을 활욜해야 합니다.코드newStr = str.replace(searchValue, replaceValue)str: 원본 문자열입니다.searchValue: 대체하려는 문자열 또는 정규 표현식 패턴을 나타냅니다.replaceValue: 대체될 새로운 문자열을 나타냅니다.예시const originalString = "Hello, World!"; con..
replace 메서드@2023/10/05 안녕하세요 lika-7입니다이번시간에는 replace 메서드에 대해 정리 하겠습니다 replace 메서드는?💡1. 문자열 내에서 특정 패턴 또는 문자열을 다른 패턴 또는 문자열로 대체하는데 사용됩니다.주의⚠️replace() 메서드는 원본 문자열을 변경하지 않고 새로운 문자열을 반환합니다. 대체한 결과를 새로운 변수에 저장하거나 반환된 값을 활욜해야 합니다.코드newStr = str.replace(searchValue, replaceValue)str: 원본 문자열입니다.searchValue: 대체하려는 문자열 또는 정규 표현식 패턴을 나타냅니다.replaceValue: 대체될 새로운 문자열을 나타냅니다.예시const originalString = "Hello, World!"; con..
2023.10.05 -
@2023/10/05 안녕하세요 lika-7입니다이번시간에는 history 객체에 대해 정리 하겠습니다 history 객체는?💡1. 브라우저의 세션 히스토리(방문 기록)을 조작하고 제아하기 위한 API를 제공합니다. 이 객체를 사용해 이전 페이지나 다음 페이지로 이동하도록 브라우저 히스토리를 조작할 수 있씁니다.사용 이유✅history 객체는 주로 SPA (Single Page Application) 및 브라우저 내에서 페이지 전환 및 라우팅을 관리하는 데 사용됩니다. 페이지 전환을 사용자 친화적으로 제어하거나 브라우저 히스토리를 이용하여 뒤로가기 및 앞으로 가기 기능을 구현하는 데 유용합니다.메서드go(offset): 현재 페이지에서 상대적으로 offset만큼 이동합니다. offset이 양수면 다음 페..
history 객체@2023/10/05 안녕하세요 lika-7입니다이번시간에는 history 객체에 대해 정리 하겠습니다 history 객체는?💡1. 브라우저의 세션 히스토리(방문 기록)을 조작하고 제아하기 위한 API를 제공합니다. 이 객체를 사용해 이전 페이지나 다음 페이지로 이동하도록 브라우저 히스토리를 조작할 수 있씁니다.사용 이유✅history 객체는 주로 SPA (Single Page Application) 및 브라우저 내에서 페이지 전환 및 라우팅을 관리하는 데 사용됩니다. 페이지 전환을 사용자 친화적으로 제어하거나 브라우저 히스토리를 이용하여 뒤로가기 및 앞으로 가기 기능을 구현하는 데 유용합니다.메서드go(offset): 현재 페이지에서 상대적으로 offset만큼 이동합니다. offset이 양수면 다음 페..
2023.10.05 -
@2023/10/04 안녕하세요 lika-7입니다이번시간에는 optional chaining에 대해 정리 하겠습니다 optional chaining이란?💡1. 객체의 속성에 안전하게 접근하기 위한 문법입니다. 2. 객체의 속성을 체인으로 접근할 때 발생할 수 있는 오류를 방지하고 코드를 간결하게 유지할 수 있도록 도와줍니다.키워드💡?. 연산자를 사용하여 구현됩니다.반환 내용객체의 중첩된 속성에 접근 할 때 해당 속성이 존재하지 않으면 오류를 발생시키지 않고, ‘undefined’를 반환 합니다코드코드1const user = { id: 1, name: "John", address: { city: "New York" } };const cityName = user.address?.city;?. 연산자는 use..
optional chaining@2023/10/04 안녕하세요 lika-7입니다이번시간에는 optional chaining에 대해 정리 하겠습니다 optional chaining이란?💡1. 객체의 속성에 안전하게 접근하기 위한 문법입니다. 2. 객체의 속성을 체인으로 접근할 때 발생할 수 있는 오류를 방지하고 코드를 간결하게 유지할 수 있도록 도와줍니다.키워드💡?. 연산자를 사용하여 구현됩니다.반환 내용객체의 중첩된 속성에 접근 할 때 해당 속성이 존재하지 않으면 오류를 발생시키지 않고, ‘undefined’를 반환 합니다코드코드1const user = { id: 1, name: "John", address: { city: "New York" } };const cityName = user.address?.city;?. 연산자는 use..
2023.10.04 -
@2023/10/04 안녕하세요 lika-7입니다이번시간에는 Shorthand Property Names/Property Value Shorthand 패턴에 대해 정리 하겠습니다 Shorthand Property Names/Property Value Shorthand 패턴이란?💡객체를 생성 할 때, 객체 리터럴과 변수 이름이 객체의 속성 이름과 일치할 경우, 속성 이름을 생략 할 수 있는 패턴을 Shorthand Property Names/Property Value Shorthand 패턴 이라고 부릅니다.예시코드const name = "John"; const age = 30; const person = { name: name, age: age };위 코드에서 name 변수와 age 변수를 사용해 pers..
Shorthand Property Names/Property Value Shorthand 패턴@2023/10/04 안녕하세요 lika-7입니다이번시간에는 Shorthand Property Names/Property Value Shorthand 패턴에 대해 정리 하겠습니다 Shorthand Property Names/Property Value Shorthand 패턴이란?💡객체를 생성 할 때, 객체 리터럴과 변수 이름이 객체의 속성 이름과 일치할 경우, 속성 이름을 생략 할 수 있는 패턴을 Shorthand Property Names/Property Value Shorthand 패턴 이라고 부릅니다.예시코드const name = "John"; const age = 30; const person = { name: name, age: age };위 코드에서 name 변수와 age 변수를 사용해 pers..
2023.10.04 -
@2023/10/04 안녕하세요 lika-7입니다이번시간에는 document 객체가 무엇인지 정리하겠습니다Document 객체Document 객체는 웹 페이지 그 자체를 의미합니다.💡웹 페이지에 존재하는 HTML 요소에 접근할 때 사용합니다 HTML 요소 생성 메소드const insertTag= document.createElement('태그명')document에 새로운 태그를 만들 때 사용합니다.⚠️만든다고 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다. append 메소드를 통해 node에 추가 합니다.document.querySelector('붙일 테그명').append(insertTag) HTML 요소 내부 콘텐츠 접근 메소드 Hello, World! 자바스크립트를 사용하여 이 요소의 i..
Document 객체@2023/10/04 안녕하세요 lika-7입니다이번시간에는 document 객체가 무엇인지 정리하겠습니다Document 객체Document 객체는 웹 페이지 그 자체를 의미합니다.💡웹 페이지에 존재하는 HTML 요소에 접근할 때 사용합니다 HTML 요소 생성 메소드const insertTag= document.createElement('태그명')document에 새로운 태그를 만들 때 사용합니다.⚠️만든다고 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다. append 메소드를 통해 node에 추가 합니다.document.querySelector('붙일 테그명').append(insertTag) HTML 요소 내부 콘텐츠 접근 메소드 Hello, World! 자바스크립트를 사용하여 이 요소의 i..
2023.10.04 -
@2023/10/03 안녕하세요 lika-7입니다이번시간에는 String.prototype.trim()에 대해 정리 하겠습니다String.prototype.trim() 의 사용 이유💡1. 문자열 양 끝의 공백을 제거하고 반환 합니다.사용방법const greeting = ' Hello world! '; console.log(greeting); // Expected output: " Hello world! "; console.log(greeting.trim()); // Expected output: "Hello world!";
String.prototype.trim()@2023/10/03 안녕하세요 lika-7입니다이번시간에는 String.prototype.trim()에 대해 정리 하겠습니다String.prototype.trim() 의 사용 이유💡1. 문자열 양 끝의 공백을 제거하고 반환 합니다.사용방법const greeting = ' Hello world! '; console.log(greeting); // Expected output: " Hello world! "; console.log(greeting.trim()); // Expected output: "Hello world!";
2023.10.03 -
@2023/10/03 안녕하세요 lika-7입니다이번시간에는 object.defineProperty에 대해 정리 하겠습니다object.defineProperty 의 사용 이유💡1. JavaScript에서 객체의 속성을 정의하거나 수정하는 메서드 2. 속성의 특성을 직접 정의할 수 있다.object.defineProperty 파라메터Object.defineProperty(obj, prop, descriptor)obj: 속성을 정의하거나 수정하려는 객체prop: 정의하거나 수정하려는 속성의 이름descriptor: 속성의 특성을 정의하는 객체value: 속성의 초기값 지정writable: 해당 속성의 값을 변경 할 수 있는지 여부 나타내는 값enumerable: 해당 속성이 열거 가능한지 여부를 나타내는 부..
프로퍼티 정의 object.defineProperty@2023/10/03 안녕하세요 lika-7입니다이번시간에는 object.defineProperty에 대해 정리 하겠습니다object.defineProperty 의 사용 이유💡1. JavaScript에서 객체의 속성을 정의하거나 수정하는 메서드 2. 속성의 특성을 직접 정의할 수 있다.object.defineProperty 파라메터Object.defineProperty(obj, prop, descriptor)obj: 속성을 정의하거나 수정하려는 객체prop: 정의하거나 수정하려는 속성의 이름descriptor: 속성의 특성을 정의하는 객체value: 속성의 초기값 지정writable: 해당 속성의 값을 변경 할 수 있는지 여부 나타내는 값enumerable: 해당 속성이 열거 가능한지 여부를 나타내는 부..
2023.10.03 -
@2023/09/18 안녕하세요 lika-7입니다이번시간에는 this가 무엇인지 정리하겠습니다this를 볼때마다 내 표정this가 들어간 코드를 볼 때마다 이게 무엇인지 모르겠습니다.이에 관련한 내용을 찾아봐도 이해하기 어렵더군요…나름 이해하기 쉽게 정리해보겠습니다JavaScript에서 this는JavaScript에서 this는 현재 실행중인 코드에서 참조하는 객체를 나타냅니다. this는 다양한 상황에서 동적으로 결정되어 다른 값을 가질 수 있습니다💡this 값은 호출한 코드 블럭 또는 함수와 호출 컨텍스트에 의존합니다.전역 컨텍스트(Global Context)에서 this컨텍스트란💡실행 컨택스트란 코드가 실행되는 환경으로 이해 할 수 있습니다//JavaScript console.log("전역 컨텍스트..
this@2023/09/18 안녕하세요 lika-7입니다이번시간에는 this가 무엇인지 정리하겠습니다this를 볼때마다 내 표정this가 들어간 코드를 볼 때마다 이게 무엇인지 모르겠습니다.이에 관련한 내용을 찾아봐도 이해하기 어렵더군요…나름 이해하기 쉽게 정리해보겠습니다JavaScript에서 this는JavaScript에서 this는 현재 실행중인 코드에서 참조하는 객체를 나타냅니다. this는 다양한 상황에서 동적으로 결정되어 다른 값을 가질 수 있습니다💡this 값은 호출한 코드 블럭 또는 함수와 호출 컨텍스트에 의존합니다.전역 컨텍스트(Global Context)에서 this컨텍스트란💡실행 컨택스트란 코드가 실행되는 환경으로 이해 할 수 있습니다//JavaScript console.log("전역 컨텍스트..
2023.09.18