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

# 반복문

1. for 문

for 문은 가장 일반적인 반복문으로, 반복 횟수가 정해져 있을 때 유용

for (초기화; 조건; 증감) {
  // 실행할 코드
}

2. while 문

while 문은 조건이 true인 동안 계속 실행됩니다. 주로 반복 횟수가 정해지지 않은 경우에 사용

while (조건) {
  // 실행할 코드
} 

3. do...while 문

do...while 문은 while 문과 비슷하지만, 조건을 확인하기 전에 코드 블록을 한 번은 무조건 실행

do {
  // 실행할 코드
} while (조건);

4. for...in 문 (객체 순회)

for...in 문은 객체의 속성을 반복할 때 사용

for (let 변수 in 객체) {
  // 실행할 코드
}

5. for...of 문 (배열 순회)

for...of 문은 배열, 문자열, Map, Set 등 반복 가능한(iterable) 객체를 순회할 때 사용

for (let 요소 of 반복가능한_객체) {
  // 실행할 코드
}

6. break & continue

break: 반복문 종료
break 문을 만나면 반복문이 즉시 종료

continue: 현재 반복 건너뛰기
continue 문은 현재 반복을 건너뛰고, 다음 반복을 진행

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}

# 함수

1. 함수 선언 

함수 선언식은 function 키워드를 사용하여 함수를 정의하는 방식

function 함수이름(매개변수1, 매개변수2) {
  // 실행할 코드
  return 반환값; // (선택 사항)
}

2. 함수 표현식 (Function Expression)

함수 표현식은 함수를 변수에 할당하는 방식

const 함수이름 = function(매개변수) {
  // 실행할 코드
}

3. 화살표 함수 (Arrow Function)

더 간결한 문법을 제공

const 함수이름 = (매개변수) => {
  // 실행할 코드
  return 반환값;
};

# html 요소 선택

1.getElementsByTagName() – 태그명으로 요소 선택

특정 태그명을 가진 모든 요소를 가져오는 메서드

document.getElementsByTagName("태그명");

2. getElementsByClassName() – 클래스명으로 요소 선택

특정 클래스를 가진 모든 요소를 가져오는 메서드

document.getElementsByClassName("클래스명");

3. getElementById() – ID로 요소 선택

특정 ID를 가진 요소를 선택할 때 사용

document.getElementById("아이디");

4. querySelector() – 하나의 요소 선택

CSS 선택자를 사용하여 요소를 가져온다.

document.querySelector("CSS 선택자");

5. querySelectorAll() – 모든 요소 선택

CSS 선택자와 일치하는 모든 요소를 가져오는 메서드

document.querySelectorAll("CSS 선택자");

# 요소 조작

1. textContent 

textContent는 요소 내부의 텍스트 값을 가져오거나 변경할 때 사용 

안녕하세요!

 

</p id="myparagraph">

  let p = document.getElementById("myParagraph");
  console.log(p.textContent); // "안녕하세요!"
  
  // 텍스트 변경
  p.textContent = "Hello, World!";


2. classList

classList는 요소의 class 속성을 조작할 때 사용되는 속성

박스</div id="box" class="red">