/* -------- 설치 -------- */

npm create vite // vite 만들기

likelion-hook // project 이름 입력

javascript // 사용 언어 선택

/* ------ 설치 완료 ------ */

cd likelion-hook // 프로젝트 파일로 이동
code . // project 파일 새로운 창에서 열기
npm i // npm install 약자
npm run dev // 실행

/* ------ 설치 후 수정시 ------ */
npm run dev // 실행

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리

hook은 class 안에서는 동작하지 않고, class 없이 react 사용이 가능하게 해준다.

Hooks의 종류?

1) useState

현재 state 값을 업데이트하는 함수를 반환 원형

const [state, setState] = useState(initialState);

2) useEffect

리액트 컴포넌트가 렌더링 될 때마다, 즉 DOM이 렌더링 된 이후에 작업을 실행할 수 있도록 명시함 -> 컴포넌트 렌더링 - 화면 업데이트 - useEffect 실행 => 생명주기의 메소드 기능을 수행

useEffect(콜백함수, 의존성배열)

첫 번째 인자: 콜백함수 -> 컴포넌트가 마운트되거나 업데이트 될 때마다 실행되는 함수, 콜백 함수 내부에서 원하는 작업 수행 가능 두 번째 인자: 의존성 배열 -> 배열에 포함된 값은 콜백 함수가 실행되는 조건을 지정, 즉 배열에 포함된 값들 중 하나라도 변경되면 콜백 함수 실행

여기서 콜백함수란?

간단하게 말해 다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다. 그리고, 함수를 만들 때, parameter를 함수로 받아서 쓸 수 있는데 그 함수는 callback!

3) useContext

context => 일반적인 리액트에서 데이터는 props를 통해서 부모에서 자식에게 전달함 어플리케이션 안의 여러 컴포넌트들에게 props를 전달해줘야 하는 경우 context 이용

1. var

1. 중복 선언이 가능하다.
2. 함수 내에서 선언된 변수는 함수 내에서만 유효하고, 함수 내에서는 블록 내외부에 관계없이 유효 (함수 외부에서 참조 불가)

함수 외부에서 참조 불가 예시

function function(){
  if(true){
   var a = 1;
   console.log(a); //1
  }
 console.log(a);
}

function(); //1
console.log(a);//ReferenceError: a is not defined

2. let

1. 중복 선언은 불가능하지만 재할당은 가능하다.
2. 함수, if절 외 for, while 등 모든 코드 블록 내부에서 선언된 변수 코드 블록 내부에서만 유효 (블록 외부부터 참조 불가)

3. const

상수를 의미함.

그렇기에, 중복 선언이 불가능하고, 재할당도 불가능하다. 2. 함수, if절 외 for, while 등 모든 코드 블록 내부에서 선언된 변수 코드 블록 내부에서만 유효 (블록 외부부터 참조 불가)

중복 선언, 재할당 불가 예시

const food = 'cookies';
console.log(food); // cookies

const food = 'chicken';
console.log(food); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

food = 'pizza';
console.log(food);
//Uncaught TypeError: Assignment to constant variable

4. 그래서 언제 무엇을 쓰면 좋을까?

재할당이 필요없는 상수과 객체에는 기본적으로 const를 사용하는 것이 좋다. 재할당이 필요한 경우 한정적으로 let을 사용하는 것이 좋다. 단, 이 때 변수의 스코프는 최대한 좁게 만드는 것이 좋다.

리액트 컴포넌트에서 동적인 값을 상태(state)라고 부르는데, 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에 상태 관리가 필요하다.

직접 state를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않게 되고, setState를 호출하여 state를 변경하면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행하게 된다.

예제를 살펴보자면,

일반 변수를 사용한 경우

import React from 'react';

const Counter = () => {
  let count = 0;

  const increment = () => {
    count += 1; // 변수를 직접 변경
    console.log('Current count:', count);
  };

  return (
    <div>
      <h1>Counter</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

useState()를 사용한 경우

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // useState로 상태와 상태 변경 함수를 정의

  const increment = () => {
    setCount(count + 1); // 상태 변경 함수를 사용하여 상태를 업데이트
    console.log('Current count:', count);
  };

  return (
    <div>
      <h1>Counter</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

변수를 그대로 사용하면 변수 count를 그대로 사용하여 클릭할 때마다 값을 1씩 증가시키고 콘솔에 출력하게 된다. 하지만 이렇게 하면 상태의 불변성을 유지하지 못하는데, 컴포넌트의 상태를 변경할 때 React는 상태의 불변성을 유지하면서 새로운 상태로 업데이트 해야 한다.

그러나, useState를 사용하여 count라는 상태와 그 상태를 변경할 수 있는 setCount라는 상태 변경 함수를 정의하게 되면, React는 새로운 상태로 컴포넌트를 다시 렌더링하며, 상태의 불변성을 유지할 수 있다.

사실 이유를 찾아보며 궁금한 것이 있었다.

도대체 왜 불변성을 유지해야 할까?

state 가 변하면 생기면 html도 자동으로 재렌더링을 한다는 점을 알면 좋을 것 같다.

1. 효율적인 업데이트 감지 React는 Virtual DOM을 사용하여 UI 업데이트를 처리한다. 이를 위해 React는 이전 상태와 현재 상태를 비교하여 변경된 부분만을 실제 DOM에 업데이트하는데, 상태의 불변성을 유지하면 상태가 변경된 부분을 정확하게 감지할 수 있으므로 React는 필요한 최소한의 DOM 변경만 수행할 수 있다. 불필요한 리렌더링을 방지하는 역할!

2. 예측 가능한 상태 변화 상태의 불변성을 유지하면 상태가 언제, 어디서, 어떻게 변경되는지를 명확하게 추적할 수 있다. 상태가 불변하면 상태의 변경을 추적하기 쉽고, 디버깅 및 테스트를 단순화할 수 있다. 결론적으로, 상태의 불변성을 유지하면 예측 가능한 상태 변화를 유지할 수 있어 애플리케이션의 유지 보수성과 신뢰성을 향상시킬 수 있다.

Document Object Model = 문서 객체 모델로 HTML 요소에 접근하고자 할 때 사용하며 HTML 요소를 JS 객체처럼 조작할 수 있게 해준다. HTML 요소의 속성, 스타일(CSS) 등을 조작할 수 있게 해주기도 한다. => 근데 사실 뭔 소린지 잘 모르겠으면 버튼, p 태그, h1 태그 등 뭐든 하나하나가 다 DOM이다 이 소리..

DOM을 다루기 위해서는  무엇을 가장 먼저 해야할까?

내가 원하는 HTML 요소를 선택해야 내가 원하는 조작을 할 수 있을 것이다.


그래서 HTML 요소를 선택하는 방법에는
> - getElementByTagName() : 태그 이름으로
- getElementById() : 태그 id값으로
- getElementsByClassName() : 태그 클래스 이름으로
- querySelector() : 태그의 종류, id값, 클래스 이름으로 하나만
- querySelectorAll() : 태그의 종류, id값 클래스 이름으로 여러 개

가 있다. 

=> 위의 괄호에는 **형식 지정자**를 넣으면 된다.
=> 참고로, querySelector에서는 괄호 안 들어갈 값이 CSS의 selector와 같다.
=> 잘 선택됐는지나 선택한 정보를 보고 싶다면,** console.log**를 통해서 확인할 수 있다.


그런데, 브라우저 자체나 문서 전체를 선택하고 싶을 때가 있지 않을까?

<br>
<br>

## 브라우저 자체나 문서 전체를 선택할 땐?

Window 객체(브라우저 창)이나 Document 객체(브라우저 창의 HTML 문서 객체)를 선택하면 된다.

모든 객체는 사실 window 객체에 소속되어 있고, Document 객체는 브라우저 창의 HTML 문서 객체이기 때문에 웹 브라우저에서는 HTMLDocument 객체를 선택하면 크게 다른 것은 없다.



그럼 이제 선택은 완료되었고, 선택한 객체를 핸들링 하는 방법은 무엇이 있고 어떻게 하면 될까?

<br>

## Element 핸들링으로 할 수 있는 것

> 1. 기존의 존재하는 Element 핸들링
    1) 속성 변경하기
    2) 텍스트 변경하기
    3) 스타일 변경하기_
2. 새로운 Element 만들기


이번에는 각각의 핸들링을 하는 방법에 대해 알아보고자 한다.

<br>
<br>
<br>

# 1. 기존에 존재하는 Element 핸들링


## 1) 속성 변경 (많이 쓰진 않음)
-> HTML 요소의 속성값을 추가, 확인, 제거
### (1) 속성값 추가 : 타깃요소.setAttribute(attribute, value)
### (2) 속성값 확인 : 타깃요소.getAttribute(attribute)
### (3) 속성값 제거 : 타깃요소.removeAttribute(attribute)

사용 예시 : 이미지 태그에 들어간 사진을 바꾸고 싶다!
const el = document.getElementById("title-img") -> 객체 선택
el.setAttribute('src', b.jpg');

<br>
<br>
<br>

## 2) 텍스트 변경
-> 텍스트를 추가하거나 변경
### (1) textContent : 선택한 요소에서 순수한 텍스트 데이터의 값
### (2) innerText : textContent와 비슷 (CSS에 종속적이라서 hidden 시에 읽지 못함)
### (3) innerHTML : 선택한 요소의 HTML 태그를 그대로 제공 (보안에 취약)

사용 예시 : 멋쟁이 사자처럼 11기를 멋쟁이 사자처럼 10기로 바꾸고 싶다!
document.querySelector('바꾸고자 하는 태그 id값').textContent = "멋쟁이 사자처럼 10기";
id값이 아니라 class 명이라면!
document.querySelector('바꾸고자 하는 태그 class명').textContent = "멋쟁이 사자처럼 10기";

<br>
<br>
<br>

## 3) 스타일 변경
### (1) style 속성 변경 : document.getElementById('box1').setAttribute('style','background-color:yellow');
=> 다음과 같이 setAttribute()를 활용하여 변경할 수 있음! (그러나 잘 쓰지 않는 것 같음....)



### (2) style 객체 변경 :
style 속성 대신 요소의 style 객체의 속성값들을 변경하는 형식
document.getElementById('box1').style.backgroundColor = 'yellow';



### (3) 클래스 지정 :
별도의 디자인 클래스를 지정해 놓고 해당 요소의 class 속성을 지정하는 형식

사용 예시
[HTML] : <div id="box1">안녕</div>
[CSS] : .green { color : green; }
의 코드에서 .green의 스타일을 box1에 적용하는 방법

document.getElementById('box1').classList.add = 'green';
을 적용해주면 안녕이 초록색이 되는 것을 볼 수 있음!

#### 그렇다면 클래스 지정은 어떻게 할 수 있을까?

> - 이름 : 요소.className
- 이름들 : 요소.classList
- 추가 : 요소.classList.add(클래스 이름)
- 삭제 : 요소.classList.remove(클래스 이름)
- 변경 : 요소.classList.replace(클래스 이름)
- 토글 : 요소.classList.toggle(클래스 이름)

<br>
<br>
<br>

## 2. 새로운 Element 만들기
새로운 Element를 만드는 방법은 많이 쓰는 방법은 아니지만 알아두면 쓸 곳은 있을 것 같다.

### 1) 새로운 Element 생성
document.createElement(생성요소)
### 2) 추가
부모요소.appendChild(자식요소)

예시 // element 생성 const p1 = document.createElement('p')

// 생성한 element에 컨텐츠 넣기 p1.textContent = "안녕"

// element에 추가할 부모 요소 const parent = document.getElementById("parent");

// element를 부모 요소의 자식 요소로 추가 // 이미 다른 element가 존재할 경우 마지막 자식 요소를 추가 parent.appendChild(p1)

```

지금까지 배운 것은 페이지 로딩 시에 일어나기 때문에 내가 원하는 조건에서 실행되기 어렵다. 그래서 특정 Event가 발생할 때 변경될 수 있도록 하는 방법은 무엇일지 뒤에 설명할 것이다.

addEventListener()

이벤트를 핸들링하는 도구

이벤트: 프로그래밍 하는 시스템에서 일어나는 사건 혹은 발생

응답은 addEventListener로 수행하는 것

객체.addEventListener(이벤트 타입, 이벤트 발생 시에 수행 함수)

-> 객체 : 화면에 있는 객체(querySelector로 지정하는 것, 지정 객체 말고도 window, document도 가능) -> 이벤트 타입 : 지정된 객체에서 어떤 이벤트 발생에 관심을 둘 것인지 설정 (click, scroll, change 등 다양한 이벤트 종류 있음) -> 이벤트 발생 시에 수행 함수 : 이벤트가 발생했을 때 작동시킬 함수 형태

이벤트 타입의 종류

• click : 마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생
• mouseover : 마우스를 HTML 요소 위에 올리면 발생
• mouseout : 마우스가 HTML 요소 밖으로 벗어날 때 발생
• mousedown : 클릭을 하기 위해 마우스 버튼을 누르고 아직 떼기 전인 그 순간, HTML 요소를 드래그 할 때 사용
• mouseseup : 마우스 버튼을 떼는 그 순간, 드래그한 HTML 요소를 어딘가에 놓을 때 사용
• mousemove : 마우스가 움직일 때마다 발생 (마우스 커서의 현재 위치를 계속 기록하는 것에 사용)
• focus : HTML 요소에 포커스가 갔을 때 발생
• blur : HTML 요소가 포커스에서 벗어났을 때 발생
• keypress : 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생
• keydown / keyup : 키를 누를 때 발생 / 키를 눌렀다가 떼는 순간에 발생
• load : 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을 때 발생
• resize : 브라우저 창의 크기를 조절할 때 발생
• scroll : 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤 할 때 발생
• unload : 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 브라우저 창을 닫을 때 이벤트가 발생
• change : 폼 필드의 상태가 변경되었을 때 발생 (input 태그에 내용이 바뀌면 발생)

드디어 JS DOM 정리가 끝났다 ...! 열심히 계산기 과제 해야지... ㅎㅎㅎ

1. 들여쓰기 정렬이 필요한 부분 드래그 2. Ctrl(맥은 command) + K, Ctrl(맥은 command) + F를 차례대로 눌러준다.

들여쓰기 끝!

HTML에 사용한 class명 {
    list-style-type: none; //또는
    list-style: none;
}

두 가지 방법 사용 가능하다!

매우 간단하지만 쉽게 까먹을 수 있는

• 리스트 점 없애는 방법!
  ]]> https://velog.io/@ho___ni/JS%EB%A1%9C-%EB%A7%8C-%EB%82%98%EC%9D%B4-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0 https://velog.io/@ho___ni/JS%EB%A1%9C-%EB%A7%8C-%EB%82%98%EC%9D%B4-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0 Mon, 22 May 2023 05:43:10 GMT 챕터 15의 내용은 JS로 만 나이 계산기를 만드는 내용이었다.

  챕터 15 만 나이 계산기 js 코드

  let el = document.getElementById('birthday');
  let elResult = document.getElementById('result');
  let elSubmit = document.getElementById('submit');
  
  // 괄호 안 쓰면 오늘
  const today = new Date();
  
  function calculateAge() {
      let birthDate = new Date(el.value);
  
      let age;
  
      if (today.getMonth() > birthDate.getMonth() || 
          (to
  ```day.getMonth() == birthDate.getMonth) &&
          (today.getDate() >= birthDate.getDate()
          )
      ) {
          age = today.getFullYear() - birthDate.getFullYear();
      } else {
          age = today.getFullYear() - birthDate.getFullYear()-1;
      }
  
      elResult.innerText = `귀하의 만 나이는 ${age}세 입니다.`
  
  
      return age;
  }
  
  elSubmit.addEventListener('click', calculateAge);
  
  

  챕터 16 내용 요약

  변수, 자료형, 연산자, 문자열, 배열, 조건문, 반복문, 에러 처리, 함수, Dom을 지금까지 배웠음. 지금까지 배운 것을 바닐라 자바스크립트라고 함. 외부 라이브러리 이런 것도 사용해 보고 jquery 이런 것도 활용해 보면 좋을 듯. 뷰나 리액트를 배워보는 것도 좋음!**

  ]]> https://velog.io/@ho___ni/JS-Dom-%EC%9D%B4%EB%B2%A4%ED%8A%B8 https://velog.io/@ho___ni/JS-Dom-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Mon, 22 May 2023 05:11:48 GMT onclick="alert('click');

  -> 이벤트의 예시!

  이벤트의 종류 (on+이벤트 타입)

  폼 이벤트

  사용자가 제출하는 이벤트, 초기화하는 이벤트

  마우스 이벤트

  클릭, 더블클릭, 마우스 이동

  키보드 이벤트

  keydown, keypress, keyup(떨어질 때)

  이벤트 핸들러 등록

  var el = document.getElementById('brand-title');
  
  var myfunc = function () {
      alert('addEventListener');
  };
  
  el.addEventListener("click", myfunc);

  ]]> https://velog.io/@ho___ni/JS-Dom-Dom https://velog.io/@ho___ni/JS-Dom-Dom Mon, 22 May 2023 04:56:09 GMT document.getElementById

  var el = document.getElementById("brand-title");

  -> 아이디를 통해 요소를 가져오겠다.

  console.log(el.innerHTML);

  -> HTML 태그만 제거

  console.log(el.innerText);

  -> Text 자체만 출력

  el.innerText = "안녕하세요 :);

  document.getElementByClassName

  var el2 = document.getElementByClassName('sub-title');

  class 값을 갖는 것 가져올 것 (여러 개도 가능)

  console.log(el2);

  ]]>