시멘틱 태그

---

검색엔진 크롤러? h1태그는 1개있기를 바람.

=> 시멘틱태그 잘 사용하자

=> 검색엔진한테 잘보여야하니까

CSS

---

box-sizing: border-box;

마진,패딩,보더에 상관없이 박스 크기를 지정된 값으로 맞춘다.

요즘은 보더박스로 작업을 한다 .

디자이너 분들이, 버튼 너비 200px로 맞춰주세요. (보더 상관없이)

* {
box-sizing: border-box;
}

display속성이란?

요소를 블록으로 다룰지 또는 인라인박스로 다룰지, 그리고 자식요소를 어떻게 배치할지?

position 속성

relative

absolute

버튼을 오른쪽으로 보내려면,

margin-left: auto;

아니면

플렉스였따면 align-self?

웹사이트 실습

---

JS

---

• 화살표함수는 왜쓸까? (function과 화살표함수 차이)
  • this바인딩
  • 함수가 호출한 컨텍스트
  • 호출한 시점에 this.
  • 화살표함수는 처음에 만들때(선언할때) this가 결정된다. 어떤환경에서 호출하더라도 그 객체가 this가 된다.
    
• “리터럴하게 만든다.”고 한다. 객체는 중괄호를 사용.

const person = {name:"Young", age: 20};
const person2 = { ...person, greet: "Hi"};

⇒ …쓰는이유? =? 리액트에서는 상태값을 불변성을 유지하므로?

⇒ 스프레드 연산자 활용해서 새로운 복사본을 만들수있음.

• 콜백함수 다른함수에 인자로 전달되는함수
  
• 구조분해

객체에서 구조 분해 사용하기

객체의 속성을 변수로 쉽게 매핑할 수 있어요.

변수 이름은 객체의 키와 일치해야 해요.

const person = { name: 'Alice', age: 25 };
const { name: nickname, age } = person;
// 이렇게 하면 `name`에는 'Alice', `age`에는 25가 할당돼요.

JSON

---

JSON의 타입

• 문자열이다.(텍스트)
  (일정한 형식을 갖춘) 문자열이다.
• ⇒ 객체라는 것을 특별한 포맷으로 바꾸어 텍스트로 전달하는 것이다.
• JSON은 키는 반드시 쌍따옴표(” ”) 쓰자.
• JSON.parse()
  • JSON 문자열을 JavaScript 객체로 변환할 때 JSON.parse()를 사용해요.

const jsonString = '{"name": "Alice", "age": 25}';
const user = JSON.parse(jsonString);

• JSON.stringify()
  • JavaScript 객체를 JSON 문자열로 변환할 때 JSON.stringify()를 사용해요.

1. JSON 사용 이유
   • 웹 개발에서 서버와 클라이언트 간 데이터 교환을 위해 주로 사용해요.
   • JSON 형식은 텍스트로 이루어져 있어서 어떤 프로그래밍 언어에서도 쉽게 사용할 수 있어요.
   • 또한, 데이터를 저장하거나, 구성 설정 등에도 널리 사용되고 있어요.
   • 이러한 이유로 JSON은 현대 웹 개발에서 데이터를 다루는 데 정말 중요한 역할을 해요.

★Promise

---

요청한 작업이 성공적으로 끝났을때 해줄거

성공적이지 않았을때 해줄거

(resolve, reject)

then을쓴다는 것은

⇒ Promise객체

⇒ Axios를 쓰는것도, fetch를 쓰는것도

then을 쓰느냐

await을 쓰느냐의 차이 (★await도 Promise객체에 대해서 할 수 있는 것이기 때문)

⇒ then을쓰면

async function fetchData() {
  try {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

계산기실습

---