[React] Day_18 데일리 정리

 

이번 주말 요약 : 피바람 전조증상으로 인한 요추 사망.

 

'부우우우우운명 주말에 적겠다고 했던 림졍 어디감🤷🏻‍♂️??' 

... 그 림졍 돌아왔습니다.. 주말 쭉 쉬고요... ㅇ<-<

그 얼렁뚱땅 놀러다니며 쉰거 말구요, 정말 정확하게 '쉬다' 왔습니다. 

(ㅂ... 버...범인은... 피바람... 으읍...!)

여튼 그래서 오늘은 간단하게 1주차 정리 마무리 짓는거로 가보자구요 -! (?)

그럼 갑오징어~🦑!!

 

 

JavaScript (자바스크립트) 강의 정리 - 이이어진 ver.

 

JavaScript 문법 정리 (4) - 배열, 객체 기초

 

객체와 객체 메소드

• 객체 : 키-값 (Key-Value) 의 조합, 하나의 변수에 여러 값 넣기 가능
  +) 키-값 한 세트를 프로퍼티(property)라고 하는데, 프로퍼티의 집합 = 객체로 think
• 한가지 변수를 표현하는데에 여러가지 속성이 필요하다? ←  이것이 객체임.
• 생성 시 중괄호({}) 사용

 

객체 생성

- 기본적인 객체 생성

let person = {
  name: "림졍",
  age: 23,
  gender: "여자"
};

 

- 생성자 함수를 사용한 객체 생성

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("림졍", 23, "여자");
let person2 = new Person("림졍 주니어", 10, "여자");

 

 

객체 속성 접근

• 객체의 속성에 접근할 때는 점(.)을 사용하여 속성 이름을 입력

let person = {
  name: "림졍",
  age: 23,
  gender: "여자"
};

console.log(person.name);   // "림졍"
console.log(person.age);    // 23
console.log(person.gender); // "여자"

 

 

객체 메소드

let person = {
    name: "림졍",
    age: 23,
    gender: "여자",
};

// Object.key() : key 가져옴
let keys = Object.keys(person);
console.log("keys =>", keys); // 앞 친구들이 키 (name, age 등)

// Object.value() : value 가져옴
let values = Object.values(person);
console.log("values =>", values); // 뒷 칭구들이 값 ("림졍", 23 등)

// Object.entries() : key-value, 하나의 세트로 만들어 배열만드는 메서드 (2차원 배열)
let entries = Object.entries(person);
console.log(entries); // [ [ 'name', '림졍' ], [ 'age', 23 ], [ 'gender', '여자' ] ]

// Object.assign() : 객체 복사가 주 기능
let newPerson = {};
Object.assign(newPerson, person);
console.log(newPerson);

// If.. 복제했는데 값을 바꾸고 싶다면?
let newPerson = {};
Object.assign(newPerson, person, {age : 31}); // 이렇게 하면 나이 변경 ok, 다른 값도 변경 가능
console.log(newPerson);

 

 

객체 비교

// 크기가 상당히 크면 어떡하죠? 별도의 공간에 저장하면 된다.

// person1 별도 공간에 대한 주소.
let person1 = {
    name: "림졍",
    age: 23,
    gender: "여자",
};
// person2 별도 공간에 대한 주소.
let person2 = {
    name: "림졍",
    age: 23,
    gender: "여자",
};

let str1 = "aaa";
console.log("answer =>", person1 === person2); 
// false -> 값은 맞아, 하지만 주소가 다르잖아? 거짓. (칫, 깐깐한 자식.)

// 객체 비교할 때, 일반적으로 === 사용 X
//그래서 새로운 메서드인 JSON.stringify() 로 객체를 문자열로 변환 후, 문자열로 비교해야함.
console.log(JSON.stringify(person1) === JSON.stringify(person2));

 

 

객체 병합

let person1 = {
    name: "림졍",
    age: 23,
};

let person2 = {
    gender: "여자",
};

// ... : 전개 연산자 객체를 분해 가능, 따라서 병합이 가능해짐
let perfectman = { ...person1, ...person2 };
console.log(perfectman); // { name: "림졍", age: 23, gender: '여자' }

 

 

배열 추가정리

 

배열 생성

- 기본적인 배열생성

• 대괄호 ([])사용, 요소는 쉼표(,)로 구분

let fruits = ["사과", "딸기", "바나나"];

 

 

- 배열의 크기 지정

• new Array() 사용하여 배열 크기 지정 가능

let number = new Array(5); // 5개의 빈칸이 있는 배열 생성
console.log(number.length); // 5

 

- 배열 요소 접근

• 대괄호([]) 안에 index 값 넣어주기. index 안에 변수 투입도 가능!

let fruits = ["사과", "딸기", "바나나"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "딸기"
console.log(fruits[2]);   // "바나나"

 

 

마무리 - 드디어 내일부터 2주차! (강의 진도는 벌써 4주차..🥲)

 

ㅁ...무식한 바보 맞습니다.. 하하

 

강의도 듣고... 과제도 하고 뭐.. 어버버 하다가 끝나버렸는데

2주차 리마인드는 내일.. 부터 차근차근 적어서 업로드 해보도록 하겄습니다...

드디어 2주차다! (이제 진짜 죽겠지..?)

 

 

그래서 오늘의 (자체적) KPT 회고는요?

• Keep :  그래도 꾸준히 하려는 내 마인드(?) 매우 칭찬해!
• Problem : ㅎ...허리나갈거 같아요
• Try : 정리 차근차근 다시 해나가보자 림졍림졍아..! 화이팅..