[2025 1학기 React.js 스터디] 정채은 #2주차

불타는 코딩 공부

9. 반복문 

for 문 

 

중첩 사용

 

1. i
2. j 

break : 멈추게 한다.

for ... of 문

 

const myArray = ['한놈', '두시기', '석삼', '너구리', '오징어'];

for (const item of myArray) { // 상수명은 자유
	console.log(item);
}

 

for (const (상수명) of (배열이름) )

 

for ... in 문

 

for (const key in person1) {
	console.log(person1[key]);
}

 

여기서 1번째 줄 key(상수 지정) 와 2번째 줄 key(문자열로 인)는 다름!!!!!!!! 

 

while 문 

조건을 먼저 확인 → 실행 

 

do ... while 문 

먼저 실행 → 조건 확인

 

10. 함수

function [함수이름] () {

}

매개변수와 인수

- 특정 인풋을 받아 작업을 수행하는 함수들에 사용 

값을 반환하는 함수

 

return : 함수 해당 값 반환하도록 함

 

함수도 값임.

- function 함수라는 것도 특정 기능을 대변하는 하나의 데이터 임 !!!!!!!!!!!!!!!!

 

화살표 함수

이건... 말입니닷. 문법? 을 이용한? 거입니닷

밑에 예시를 보시죱 

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

 

    이걸 화살표 함수로 바꾸면 

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  () => alert("동의하셨습니다."),
  () => alert("취소 버튼을 누르셨습니다.")
);

 

              

이것입니닷.

 

11. HTML 요소들 선택하기

Javascript로 요소(태그)를 선택하는 방법

웹브라우저 생성 웹페이지 → 자바스크립트 : document라는 이름의 DOM객체 가지고 옴 

 

12. 요소 조작하기

 

새로운 요소 추가하기(Create)

 

createElement()
: 새로운 요소 생성

node.before() / node.after()
: 호출한 노드 앞, 뒤에 새로운 노드 추가
textContent = 

: 요소에 text 내용 추가

classList.add()

: 요소에 클래스 추가

Node.append()
: 생성한 요소를 원하는 요소에 추가 
setAttribute(속성, 값)
: 요소 속성 추가,변경

Node.cloneNode()

: 호출한 노드의 메소드 복사 

 

요소 선택하기 (Read)

 

querySelector(css 선택자)
: css 산택자에 매치되는 하나 이상의 요소들중 첫번째 항목을 반환
querySelectorAll(css 선택자)
: css 선택바에 매치되는 모든 요소의 노드리스트 반환 
getElementByld(ld)
: ld 선택자에 매치되는 하나이상의 요소들중 첫번째 항목 반환
getElementByClass(Class)
: Class 선택자에 매치되는 하나 이상의 요소들중 첫번째 항목 반

 

요소 속성 변경하기 (Update)

 

replaceChild()
: 부모 노드의 한 자식을 다른노드로 교체

 

요소 삭제하기(Delete)

 

remove()
: 요소의 참조 존재 -> 요소 삭제
removeChild()
: 부모 노드에서 자식 노드 삭제

remove	removeChild
메모리에서 노드 삭제	DOM 트리에서 노드 삭제 후 해당 노드의 참조를 반환

 

13. 이벤트

 

이벤트 : 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 

이벤트 종류

 

 

이벤트 연결

- 사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것  =>  '이벤트 핸들러'

- '이벤트 핸들러'는 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리

 

 

이벤트 객체

 

이벤트 핸들러 함수 내부에서 event, evt, e 와 같은 이름의 매개변수 → 이벤트 객체

 

14. 최종 프로젝트 

이건... 마저 수정해서올리겟습니다 으하하 !!!!!!!!!!!!!