@2023/12/11 안녕하세요 lika-7입니다이번시간에는 react 상태 관리 라이브러리인 리덕스에 대하여 설명하겠습니다propsproperties의 줄임말구성 요소가 서로 통신하는 방법상위 구성 요소에서 아래쪽으로 흐름해당 값을 변경하려면 자식 관점에서 props를 변경 할수 있으며, 부모는 내부 상태를 변경해야 함state부모 컴포넌트에서 자녀컴포넌트로 데이터를 보내는게 아닌 컴포넌트 안에서 데이터를 전달할 때 state로 전달함state가 변하면 re-render가 된다redux 사용이유store가 없으면 상태를 여러 컴포넌트를 거쳐서 전달해야 할 경우가 생김리덕스는 이를 스토어를 통해서 관리함스토어를 통해서 상태를 전달해주면 데이터를 여러번에 거쳐서 줄 필요가 없음redux 데이터 플로우red..

@2023/12/11 안녕하세요 lika-7입니다이번시간에는 react에서 { } (중괄호) 와 ( ) (소괄호) 소괄호의 차이에 대해서 설명하겠습니다.{ } 중괄호JavaScript 표현식을 사용할 때 사용합ㄴ디ㅏ{ } 안에 JavaScript 코드를 작성하며, 해당 코드는 평가 되고 결과가 JSX에 삽입됩니다.변수, 함수, 호출, 산울 연산 등의 JavaScript 코드를 { } 안에 작성할 수 있습니다const myVar = 'Hello'; const myElement = {myVar};( ) 소괄호JSX에서 여러 줄을 그룹화 하거나, JSX를 반환할 때 사용합니다{ } 와 마찬가지로 JSX 내에서 JavaScript 표현식을 그룹화 할 때도 사용합니다const myElement = ( Hello ..

@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입니다이번시간에는 널 병합 연산자 패턴을 정리하겠습니다.널 병합 연산자 패턴이란?.와 || 연산자를 함께 사용하여 널(null) 또는 언디파인드(undefined) 값에 대한 안전한 처리를 수행하는 패턴입니다.예시const list = currentUser?.favoriteIds || [] 이 코드는 currentUser 객체에서 favoriteIds 프로퍼티를 가져오려고 시도하며, 만약 currentUser가 존재하지 않거나 favoriteIds가 존재하지 않는 경우, 빈 배열([])을 할당합니다. currentUser 객체가 존재하고 favoriteIds 프로퍼티가 존재하는 경우, currentUser.favoriteIds를 사용하여 해당 값을 할당합니다.c..

@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/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/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/08 안녕하세요 lika-7입니다이번시간에는 클래스와 함수의 객체 지향적 사용법에 대해 정리 하겠습니다글을 쓰는 이유필자는 절차 지향적 코더에서 객체 지향적 코더로 변화하고 있는 중입니다.이에 우리의 코딩 엣지를 살려줄만한 몇가지 코딩법을 기술하겠습니다.1. 클래스와 함수를 객체의 키로 사용하기✅객체 지향 프로그래밍(OOP) 구현: 클래스를 객체의 프로퍼티로 사용하면 객체 지향 프로그래밍의 개념을 자연스럽게 표현할 수 있습니다. 이렇게 하면 코드를 더욱 객체 지향적으로 구성할 수 있습니다.✅다형성(Polymorphism) 구현: 객체의 키로 클래스를 사용하면 상속과 다형성을 활용하여 다양한 동작을 구현할 수 있습니다. 동일한 메소드 이름을 가진 다른 클래스를 객체로 생성하여 다형성을 실현..