미미 공부/취미방

[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 2/5 본문

Programming

[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 2/5

mionager 2022. 7. 5. 22:26

3주차.Chapter 02

 

DOM API

(Document Object Model, Application Programming Interface)

HTML의 요소들

 

 

<script src="./main.js">가 <body> 위에서 <div class="box">Box!!</div>를 찾는데,

<body>의 내용을 읽기 전에 찾고 있기 때문에, null이라고 나온다.

수업에서 진도 나가지 않았는데, 시험 문제를 내는 것 처럼 script는 box에 대한 정보가 0도 없는 상태

//방법 1. <body> 맨 아랫줄로 옮긴다.
<body>
	<div class="box">Box!!</div>
	
    <script src="./main.js"></script>
</body>

//방법 2. 'defer'라는 단어를 추가해 준다.
//script는 '정보'에 해당하는 내용이니 <head>안에 모아 두는게 좋다.
<head>
	<script defer src="./main.js"></script>
</head>

 

document.querySelector('요소');

요소.addEventListener('이벤트', function() {});

요소.classList.메소드('이름');

해당 요소(box)에

addEventListener로

1. 지정한 이벤트(click)가 발생하는지 지켜보고/듣고있다가 이벤트가 발생하면

2.  익명 함수(function () {})로 적어 놓은 코드가 동작한다.

(document.querySelector('.box')는 제일 첫 '.box'만 선택한다.)

 

** 이런 addEventListener, classList 등을 DOM API라고 부른다.

 

 

document.querySelectorAll('요소');

요소.forEach(function () {});

유사 배열 데이터로 만들어진 모든 box에 함수를 차례대로 적용시킨다.

boxEls 중 0번째에 class `order-&{0+1}` = order-1를 넣고

console.log로 (0, boxEls) 찍고 boxEls 1번째로 넘어가서 똑같이 반복

 

이해가 되지 않는 부분!

console.log로 boxEl를 찍고

classList.add로 `order-${index+1}`을 하고

console.log로 boxEl를 다시 찍었는데

classList.add 이전과 이후 class명이 동일하지?

요소.textContent

 

 

메소드 체이닝

(Method Chaining)

split => a에 있는 문자를 빈문자열('')을 기준으로 잘라서 [] 배열로 반환 => [H, e, l, l, o]

reverse => 배열 뒤집기 => [o, e, l, l, H]

join => 배열을 빈문자열('')을 기준으로 병합 => olleH

** 아무때나 아무에서나 체이닝이 가능한건 아님

 

 

수업에서 아직 중요하게 다뤄지지 않았지만

split은 지정한 인수가 사라진다. L이 두 개가 있어서 빈칸이 생긴 것 같은데, 정확히 이해가 되지 않는다..

reverse를 어디에 넣든 array가 뒤집어져 있다...

join에 들어가는 인수는 forEach 처럼 array의 모든 값에 지정한 인수를 붙여준다.

 

 

역시 JS는 어렵다...^^

저작자표시

'Programming' 카테고리의 다른 글

[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3.5 ~ 4/5  (0) 2022.07.09
[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/5  (0) 2022.07.08
[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/5  (0) 2022.07.04
[패스트캠퍼스:2주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/4  (0) 2022.07.03
[패스트캠퍼스:2주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/4  (0) 2022.07.02
'Programming' Related Articles more
Comments