노마드코더 AI 기초 탄탄 클럽 #12 Random Gradient

노마드코더에서 수강 가능한 풀스택 웹 기초를 6주만에 훑는 챌린지. 해당 강의: 바닐라JS로 크롬앱 만들기 #12은 배열에서 두 가지 색을 랜덤 선택해 background에 그라데이션 처리하기

---

챌린지 조건

1. blueprint에 colors 배열이 선언되어 있습니다.
2. 사용자가 버튼을 클릭하면 colors 배열에서 두 가지 색상이 랜덤으로 선택되어야 합니다.
3. body 태그의 style을 랜덤으로 선택된 두 가지 색상을 사용해 linear-gradient로 변경하세요.

---

랜덤 인덱스 추출 (Math 객체 활용)

배열에서 무작위로 아이템을 꺼내기 위해서는 Math.random()과 Math.floor()를 조합한다.

• Math.random(): 0 이상 1 미만의 부동 소수점을 생성.
• Math.floor(): 소수점을 버림.
• 공식: Math.floor(Math.random() * 배열의길이)
  • 예: Math.floor(Math.random() * 10)은 0부터 9까지의 정수를 반환.

---

C++의 rand()와 JS의 random() 차이

• C++의 rand()는 정수(integer)를 반환하므로 나머지 연산자(%)를 이용해 랜덤 숫자를 뽑는다.

rand() % colors.length

• JS의 random()은 소수(Float)를 반환하므로 곱셈과 버림을 이용해 랜덤 숫자를 뽑는다.

Math.floor(Math.random() * arr.length)

---

함수 전달 방식 (Reference vs. Execution)

이벤트 리스너를 등록할 때는 함수의 이름만 전달해야 클릭이 발생했을 때 브라우저가 비로소 함수를 실행한다.

• 잘못된 예: btn.addEventListener('click', randomGradient()) // 클릭하기도 전에 함수가 즉시 실행됨
• 올바른 예: btn.addEventListener('click', randomGradient) // 클릭이 발생했을 때 함수를 실행함

---

ES6 화살표 함수 (Arrow Function)

함수를 더 간결하게 표현하는 최신 문법.

• 기본 구조: (매개변수) => { 실행문 }
• 축약형 마법:
  1. 매개변수가 하나라면 괄호 () 생략 가능: arr => { ... }
  2. 코드 블록이 한 줄이고 값을 바로 반환하면 {}와 return 생략 가능:
     • const add = (a, b) => a + b;

const getRandomIndex = (arr) => Math.floor(Math.random() * arr.length);

---

코드 리팩토링: 가독성과 재사용성

• Before: Math.floor(Math.random() * colors.length)를 매번 직접 작성.
• After: getRandomIndex라는 별도의 함수를 만들어 어떤 배열이든 랜덤 인덱스를 뽑을 수 있게 모듈화.

---

Series: 노마드코더 - AI 기초 탄탄 클럽