1. 요소 선택하기

document.querySelector()

2. 변수 만드는 방법

// const : 절대 변하지 않는 값을 때
// let : 값이 변하는 변수일 때

const 변수명 = document.querySelector()

3. for 반복문

for (let item of items) {
  반복실행할 구문
};

for (let "반복하는 요소가 담길 변수") of "반복시킬 그룹" {
  반복실행할 구문
};

for (let i=0; i<items.length; i++) {
  반복실행할 구문
};

for (let "반복하는 순서가 담길 변수"; 반복할 횟수의 최대값; 증감연산자) {
  반복실행할 구문
};

// 변수items : li그룹
// let i = 0 : 반복을 위한 초기순서값
// i < items.length : items 변수에 담긴 그룹 요소의 갯수를 자동으로 계산하여 해당 갯수보다 작을 경우 반복
// i++ : 1씩 증가

4. 반복되는 요소에 이벤트 설정하기

// for문을 이용해 list 안에 들어있는 li들을 한개씩 불러와 이벤트를 설정할 수 있다.

const list = document.querySelectorAll('.list li');
console.log(list);

for (let el of list) {
  el.addEventListener('click', (e) => {
    e.preventDefault();
    console.log(e.currentTarget.innertext);
  })
}

// e.currentTarget.innerText = 'Click'
// e.cuttentTarget : 클릭한 요소
// 선택자.innertext : 선택한 요소의 텍스트 탐색
// 선택자.innerText : '변경할 텍스트'; : 선택한 요소의 텍스트 변경

5. 부모요소 선택하기_ 직계부모탐색

요소.parentElement

6. 가장 가까운 상위부모 요소 선택하기

요소.closest()

7. 형제요소 선택하기

요소.previousElementSibling
요소.nextElementSibling

8. 자식요소 선택하기

요소.children

9. 클릭이벤트 지정하기

요소명.addEventListener("이벤트", (전달될 값) => {
  실행될 구문
});

// 자주 쓰이는 이벤트들 : 'click', 'mouseEnter', 'mouseLeave'

10. 문자 안에 변수 삽입하기

`문자...${변수명} 문자...`

// 백틱(``)으로 텍스트 감싸고 변수부분은 ${변수}로 감싸준다.

11. 조건문

if (조건문) {
  조건문이 참이라면 실행할 구문
} else {
  조건문이 거짓이라면 실행할 구문
}

12. 클래스 제어하기

요소.classList.add('클래스명');
요소.classList.remove('클래스명');
요소.classList.toggle('클래스명');

13. 함수_ 자주 실행하는 코드를 function 키워드와 임의의 이름을 붙여서 정의한 코드의 묶음

// 함수정의
const 함수명 = (매개변수1, 매개변수2) => {
  console.log(전달받은값1, 잔달받은값2)
}

// 함수호출
함수명 (인수값1, 인수값2);

'매개변수'는 함수 외부에서 내부로 값을 전달하는 '통로'이다.
해당 매개변수를 통해 실제 전달되는 값을 '인수'라고 한다.
함수호출시 입력된 인수값이 매개변수를 통해 함수 내부로 전달됨.

14. 부모요소.innerHTML = "생성할 태그";

- 부모요소에 문자열로 작성한 태그를 동적으로 생성
- 기존 부모요소 안쪽의 내용을 지우면서 새로 생성

15. 변수 : 특정 데이터 값을 임시로 저장하는 공간

16. 변수를 쓰는 이유

1. 여러 요소에서 활용되는 특정 값을 변수로 공유 (편의상의 이점)
2. 한번 저장한 데이터를 반복해서 재활용하기 위함 (성능상의 이점)

17. 변수를 만드는 방법

const 변수명 = 대입할 값;

18. 조건문 : 특정 조건마다의 분기를 생성해서 코드흐름에 변화를 준다.

if (조건식1) {
  조건식1이 참이면 이곳의 구문이 실행되고 종료
  조건식1이 거짓이면 이곳의 구문이 무시되고 다음 조건식 동작
} else if (조건식2) {
  조건식2가 참이면 이곳의 구문이 실행되고 종료
  조건식2가 거짓이면 이곳의 구문이 무시되고 다음 조건식 동작
} else {
  위의 조건들이 모두 거짓일 때 무조건 이곳의 구문을 실행하고 종료
}

19. 함수(function)

1. 자주 쓰는 실행코드들을 블록단위로 묶어서 패키징 해놓은 형태
2. 자주 쓰는 코드를 묶어 패키징해서 편하게 재사용하기 위함
3. 함수정의 : 미리 function 키워드로 자주 쓰는 키워드를 묶어주는 행위
4. 함수호출 : 정의되어 있는 함수를 호출해야 기능이 실현됨
5. 선언적함수 : 함수에 미리 이름을 붙여 정의해놓은 형태
		- 자바스크립트 엔진이 파일을 읽을때 선언적함수를 우선적으로 읽어주기 때문에 선언적함수의 호출위치가 자유롭다.
6. 익명함수 : 함수에 이름이 없이 정의된 형태
		- 이벤트 객체나 변수에 대입하는 등의 다른 외부코드와 연결이 되어야만 사용가능
7. 대입형함수 : 변수에 익명함수를 대입한 형태
		- 변수에 익명함수가 대입된 이후에만 함수호출 가능
8. 함수의 매개변수(parameter) : 함수 외부에서 함수 내부로 특정 값을 전달하기 위한 통로의 이름
9. 함수의 인수(argument) : 함수 호출시 매개변수로 전달되는 값
10. 함수의 반환값(return) : 함수 내부에서 만들어진 값을 함수의 외부로 반환

20. 객체지향

* 선택자와 이벤트를 통쨰로 함수와 같이 기능단위로 패키징함
* 기본개념 : 자주 사용되는 특정 기능을 멤버변수, 메서드 형식으로 패키징을 해서 해당 기능이 필요할 떄마다 손쉽게 복사해서 재사용하기 위한 시스템적인 틀

21. 생성자함수 (constructor)

* 특정 기능의 복사본(인스턴스, 객체)을 생성하기 위한 특별한 함수

22. 인스턴스 (instance, 객체, 복사본)

* 생성자함수constructor를 통해서 실제 복사가 되는 결과물

23. 프로토타입 (prototype)

* 생성자함수constructor 생성시 자동으로 만들어지는 공통의 저장공간
* 같은 생성자함수constructor로부터 생성된 모든 인스턴스instance들을 해당 생성자의 프로토타입 공간을 공유

24. 생성자함수 안쪽에서의 this

* 해당 생성자로 복사가 될 복사본 객체를 지칭(instance)

25. this값이 위치해 있는 공간에 따라서 해당 값이 지칭하는 바가 달라짐

1. 이벤트문 안쪽에서는 이벤트가 발생한 대상을 지칭
2. each문 안쪽에서는 반복 돌고 있는 대상을 지칭
3. ajax문 안쪽에서는 비동기서버통신으로 반환된 data값 지칭
4. setTimeout 안쪽에는 윈도우 객체를 지칭

* 엄밀하게 정의하자면, 생성자함수 안쪽의 this는 생성자 자신을 지칭
* 생성자함수가 new를 이용해서 인스턴스가 복사되는 순간, 인스턴스를 지칭
* .bind()를 이용하여 함수 안쪽에 있는 this 값을 원하는 값으로 고정할 수 있다. (이벤트문 밖에서 .bind(this)를 적용할 경우 안쪽의 this값을 인스턴스로 고정)

26. 일반 이벤트 + 함수형 코드를 객체지향으로 변경하는 단계별 순서

1. 전역변수와 이벤트문을 함수로 묶어줌 (함수의 이름은 대문자로 시작)
2. 전역변수에 있는 var를 지우고 this.를 붙여준다, 이벤트문도 동일
3. this가 4가지 경우(이벤트문, ajax문, each문, setTimeout)에 속할 때는 겉의 함수 뒤에 .bind(this)를 붙여준다.
4. 함수 선언문은 무조건
	생성자함수이름.prototype.함수이름=function(){} 
   의 형태로 변경.
5. 생성자함수 안쪽에 있는 상수값을 인수로 전달받게 처리
6. 생성자함수를 new로 호출하면서 원하는 값을 인수로 전달

27. ES5 → ES6

1. class 생성자명 {} 으로 전체코드를 묶어준다.
2. 그 안쪽에 명시적으로 constructor 함수를 생성한다.
3. 해당 클래스 블럭 안쪽에 prototype에 담겨야되는 메소드를 넣어준다.
4. 메소드는 생성자.prototype을 생략하고 집어넣음.
5. 메소드 안쪽의 익명함수를 화살표함수로 변경

---

[React]

28. useState

* state 로 자주 변경되는 값을 관리할 수 있다.
	(state 값이 변경되면 해당 state값의 영향을 받는 모든 JSX가상DOM이 자동으로 재랜더링 된다.)
* 컴포넌트 함수 안쪽에서만 실행이 가능하다.

import { useState } from 'react';
const [ test, setTest ] = useState();

* useState()함수 호출시 인수로 관리할 데이터값을 넣어서 실행하면 리턴값으로 반환한다.
	첫번째값 : state로 관리되는 값
    두번째값 : 해당 state를 변경할 수 있는 함수
    state값은 무조건 state변경함수를 통해서만 변경가능하다(재랜더링 가능)

29. useRef

* 가상DOM을 선택해서 불러올 수 있다.

import { useRef } from 'react';
const name = useRef();

30. Route

* 라우터 모듈
import { BrowserRouter, Route, Routes } from 'react-router-dom';

* return 내부에 라우터 컴포넌트로 패키징 묶어준다.
<BrowserRouter>
  <Routes>
  	<Route path='/' element={<Test />}>
  </Router>
</BrowserRouter>

31. Axios

axios.get(url)
 .then(데이터 불러오기 성공시 작동되는 구문)
 .catch(데이터 불러오기 실패시 작동되는 구문)

32. 바꿔줌

JSON.stringify() : 배열을 문자열로 
JSON.parse() : 문자열을 배열로
parseInt() : 숫자를 문자열로
forEach() : 배열 뒤에 사용할 수 있는 함수, 배열 안에 들어 있는 각각의 값을 불러와 함수를 실행한다.