프론트엔드/javascript

-
@2023/11/06 안녕하세요 lika-7입니다이번시간에는 배열 선언 방법을 다루겠습니다배열을 생성하는 코드 const arr = new Array(3)는 JavaScript에서 새로운 배열을 생성하는 코드입니다. 이 코드는 길이가 3인 배열을 생성합니다.배열의 길이는 3이며, 초기 요소가 할당되지 않은 상태로 생성됩니다. 이 배열은 undefined 값으로 채워져 있습니다. 여기서 new Array(3)은 배열 생성자를 사용하여 배열을 만든 것을 나타냅니다. 생성자에 전달된 인수는 배열의 초기 길이를 나타내며, 요소는 초기화되지 않은 상태로 생성됩니다. 배열의 길이를 변경하려면 length 속성을 직접 설정할 수 있습니다. 예를 들어, arr[0], arr[1], arr[2]는 모두 undefined..
배열 선언@2023/11/06 안녕하세요 lika-7입니다이번시간에는 배열 선언 방법을 다루겠습니다배열을 생성하는 코드 const arr = new Array(3)는 JavaScript에서 새로운 배열을 생성하는 코드입니다. 이 코드는 길이가 3인 배열을 생성합니다.배열의 길이는 3이며, 초기 요소가 할당되지 않은 상태로 생성됩니다. 이 배열은 undefined 값으로 채워져 있습니다. 여기서 new Array(3)은 배열 생성자를 사용하여 배열을 만든 것을 나타냅니다. 생성자에 전달된 인수는 배열의 초기 길이를 나타내며, 요소는 초기화되지 않은 상태로 생성됩니다. 배열의 길이를 변경하려면 length 속성을 직접 설정할 수 있습니다. 예를 들어, arr[0], arr[1], arr[2]는 모두 undefined..
2023.11.06 -
@2023/11/06 안녕하세요 lika-7입니다이번시간에는 널 병합 연산자 패턴을 정리하겠습니다.널 병합 연산자 패턴이란?.와 || 연산자를 함께 사용하여 널(null) 또는 언디파인드(undefined) 값에 대한 안전한 처리를 수행하는 패턴입니다.예시const list = currentUser?.favoriteIds || [] 이 코드는 currentUser 객체에서 favoriteIds 프로퍼티를 가져오려고 시도하며, 만약 currentUser가 존재하지 않거나 favoriteIds가 존재하지 않는 경우, 빈 배열([])을 할당합니다. currentUser 객체가 존재하고 favoriteIds 프로퍼티가 존재하는 경우, currentUser.favoriteIds를 사용하여 해당 값을 할당합니다.c..
널 병합 연산자 패턴, nullish 병합 연산자 패턴@2023/11/06 안녕하세요 lika-7입니다이번시간에는 널 병합 연산자 패턴을 정리하겠습니다.널 병합 연산자 패턴이란?.와 || 연산자를 함께 사용하여 널(null) 또는 언디파인드(undefined) 값에 대한 안전한 처리를 수행하는 패턴입니다.예시const list = currentUser?.favoriteIds || [] 이 코드는 currentUser 객체에서 favoriteIds 프로퍼티를 가져오려고 시도하며, 만약 currentUser가 존재하지 않거나 favoriteIds가 존재하지 않는 경우, 빈 배열([])을 할당합니다. currentUser 객체가 존재하고 favoriteIds 프로퍼티가 존재하는 경우, currentUser.favoriteIds를 사용하여 해당 값을 할당합니다.c..
2023.11.06 -
@2023/11/06 안녕하세요 lika-7입니다이번시간에는 객제 해체 정리하겠습니다.객체 해체 (Object Destructuring)란객체 해체 (Object Destructuring)란 객체의 속성을 추출하고 변수에 할당하는 방법입니다.다른 말로 객체 해체 할당 또는 객체 분해라고도 합니다. 객체 내의 속성에 접근하고 해당 값을 변수에 할당하려는 경우에 사용됩니다.예시const obj = { name: 'John', age: 30, city: 'New York' }; // 객체 해체 const { name, age, city } = obj; console.log(name); // 'John' console.log(age); // 30 console.log(city); // 'New York'위 예제..
객체 해제@2023/11/06 안녕하세요 lika-7입니다이번시간에는 객제 해체 정리하겠습니다.객체 해체 (Object Destructuring)란객체 해체 (Object Destructuring)란 객체의 속성을 추출하고 변수에 할당하는 방법입니다.다른 말로 객체 해체 할당 또는 객체 분해라고도 합니다. 객체 내의 속성에 접근하고 해당 값을 변수에 할당하려는 경우에 사용됩니다.예시const obj = { name: 'John', age: 30, city: 'New York' }; // 객체 해체 const { name, age, city } = obj; console.log(name); // 'John' console.log(age); // 30 console.log(city); // 'New York'위 예제..
2023.11.06 -
@2023/10/14 안녕하세요 lika-7입니다이번시간에는 대괄호 표기법에 대해서 정리하겠습니다.대괄호 표기법 (Bracket Notation) 이란대괄호 표기법 (Bracket Notation)은 객체의 속성(프로퍼티)에 접근할 때 사용되는 방법 중 하나입니다. 객체 내의 특정 속성에 접근하려면 해당 속성의 이름을 대괄호 [] 안에 넣어서 사용합니다. 이 방법은 객체의 속성 이름이 동적으로 생성되거나 변수로 지정되는 경우 유용합니다.예시const person = { name: "John", age: 30 }; const propertyName = "name"; console.log(person[propertyName]); // "John"위 예제에서 propertyName 변수에 저장된 문자열을 사용..
대괄호 표기법, 인덱스@2023/10/14 안녕하세요 lika-7입니다이번시간에는 대괄호 표기법에 대해서 정리하겠습니다.대괄호 표기법 (Bracket Notation) 이란대괄호 표기법 (Bracket Notation)은 객체의 속성(프로퍼티)에 접근할 때 사용되는 방법 중 하나입니다. 객체 내의 특정 속성에 접근하려면 해당 속성의 이름을 대괄호 [] 안에 넣어서 사용합니다. 이 방법은 객체의 속성 이름이 동적으로 생성되거나 변수로 지정되는 경우 유용합니다.예시const person = { name: "John", age: 30 }; const propertyName = "name"; console.log(person[propertyName]); // "John"위 예제에서 propertyName 변수에 저장된 문자열을 사용..
2023.10.14 -
@2023/10/09 안녕하세요 lika-7입니다이번시간에는 json.stringify(), JSON.parse()에 대해 정리 하겠습니다JSON.stringify()란JSON.stringify()는 JavaScript 객체나 값(문자열, 숫자, 배열, 객체 등)을 JSON 문자열로 변환하는 메서드입니다.사용방법const person = { name: 'Alice', age: 30, hobbies: ['Reading', 'Gaming'] }; const jsonString = JSON.stringify(person); console.log(jsonString);{"name":"Alice","age":30,"hobbies":["Reading","Gaming"]}JSON.parse()란JSON.parse()..
JSON.stringify(), JSON.parse()@2023/10/09 안녕하세요 lika-7입니다이번시간에는 json.stringify(), JSON.parse()에 대해 정리 하겠습니다JSON.stringify()란JSON.stringify()는 JavaScript 객체나 값(문자열, 숫자, 배열, 객체 등)을 JSON 문자열로 변환하는 메서드입니다.사용방법const person = { name: 'Alice', age: 30, hobbies: ['Reading', 'Gaming'] }; const jsonString = JSON.stringify(person); console.log(jsonString);{"name":"Alice","age":30,"hobbies":["Reading","Gaming"]}JSON.parse()란JSON.parse()..
2023.10.09 -
@2023/10/08 안녕하세요 lika-7입니다이번시간에는 클래스와 함수의 객체 지향적 사용법에 대해 정리 하겠습니다글을 쓰는 이유필자는 절차 지향적 코더에서 객체 지향적 코더로 변화하고 있는 중입니다.이에 우리의 코딩 엣지를 살려줄만한 몇가지 코딩법을 기술하겠습니다.1. 클래스와 함수를 객체의 키로 사용하기✅객체 지향 프로그래밍(OOP) 구현: 클래스를 객체의 프로퍼티로 사용하면 객체 지향 프로그래밍의 개념을 자연스럽게 표현할 수 있습니다. 이렇게 하면 코드를 더욱 객체 지향적으로 구성할 수 있습니다.✅다형성(Polymorphism) 구현: 객체의 키로 클래스를 사용하면 상속과 다형성을 활용하여 다양한 동작을 구현할 수 있습니다. 동일한 메소드 이름을 가진 다른 클래스를 객체로 생성하여 다형성을 실현..
클래스와 함수: JavaScript에서 모듈 시스템과 유연한 코드 구성법@2023/10/08 안녕하세요 lika-7입니다이번시간에는 클래스와 함수의 객체 지향적 사용법에 대해 정리 하겠습니다글을 쓰는 이유필자는 절차 지향적 코더에서 객체 지향적 코더로 변화하고 있는 중입니다.이에 우리의 코딩 엣지를 살려줄만한 몇가지 코딩법을 기술하겠습니다.1. 클래스와 함수를 객체의 키로 사용하기✅객체 지향 프로그래밍(OOP) 구현: 클래스를 객체의 프로퍼티로 사용하면 객체 지향 프로그래밍의 개념을 자연스럽게 표현할 수 있습니다. 이렇게 하면 코드를 더욱 객체 지향적으로 구성할 수 있습니다.✅다형성(Polymorphism) 구현: 객체의 키로 클래스를 사용하면 상속과 다형성을 활용하여 다양한 동작을 구현할 수 있습니다. 동일한 메소드 이름을 가진 다른 클래스를 객체로 생성하여 다형성을 실현..
2023.10.08 -
@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