회고 리스트

1. 리액트에서 실행순서는?

index.html -> main.jsx -> app.jsx

2. 리액트에서 아래 명령어는?

npm -i
(npm install)

프로젝트의 package.json 파일에 정의된 의존성 패키지들을 설치하는 명령어이다.

3. 아래의 es6 문법을 설명하시오.

• 객체 및 배열 구조 분해 (Destructuring Assignment)
  • 객체 구조 분해 (Object Destructuring)
  • 배열 구조 분해 (Array Destructuring)

const person = {
  name: 'John',
  age: 30,
  location: 'New York'
};

// 객체 구조 분해
const { name, age } = person;
console.log(name); // 'John'
console.log(age);  // 30

const numbers = [1, 2, 3];

// 배열 구조 분해
const [first, second] = numbers;
console.log(first);  // 1
console.log(second); // 2

---

• 스프레드 연산자 (Spread Operator)
  • 배열 스프레드 (Array Spread)
  • 객체 스프레드 (Object Spread)
  • 객체 합치기 (Object Merging)

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
  
// 배열 합치기 (스프레드 연산자 사용)
const combined = [...numbers1, ...numbers2];
console.log(combined); // [1, 2, 3, 4, 5, 6]


const person = { name: 'John', age: 30 };
// 객체 복사
const personCopy = { ...person };
console.log(personCopy); // { name: 'John', age: 30 }


const obj1 = { name: 'John' };
const obj2 = { age: 30 };
// 객체 합치기
const merged = { ...obj1, ...obj2 };
console.log(merged); // { name: 'John', age: 30 }

---

1) 참조 복사 (Shallow Copy)

let obj = {
            val1 : 10,
            val2 : 20,
        }
let copyObj = obj;      // 참조 복사
copyObj.val1 = 100;

console.log(obj);       // {val1 : 100, val2 : 20}
console.log(copyObj);   // {val1 : 100, val2 : 20}

2) 객체 복사 (Shallow Copy with Spread Operator)

obj = {
            val1 : 10,
            val2 : 20,
        }

let copyObj2 = {...obj};      // 객체 복사
copyObj2.val1 = 100;
console.log(obj);       // {val1 : 10, val2 : 20}
console.log(copyObj2);   // {val1 : 100, val2 : 20}

---

3줄요약)
1.jsx 는 javascript + xml 의 약자이다.
2.pakage.json 은 npm이 라이브러리를 관리하기 파일이다.
3.react를 사용하기 위한 빌드툴은 CRM,Vite 가 주로 쓰인다.