Subclass Dance Party 스프린트를 마쳤다. (개인적으로 지금까지 진행했던 스프린트 중에 가장 재밌었던 스프린트였다고 생각한다.) 클래스를 복습하면서 혼자서 아아랜드 프로그램을 만들어봤던 것이 많은 도움이 되었다. 역시 가지고 놀면서 배우는게 최고..ㅎㅅㅎ
페어님과 처음에 컨셉회의를 할 때 "병맛이지만 귀여운 컨셉"으로 진행하기로 했던 것이 결과물에 엄청난 영향을 줬다.
가장 중요하게 생각했던 것이 2가지 모드(큐트모드와 하드모드)가 랜덤하게 적용되는 부분이었다. 최근에 추가된 댄서의 모드에 따라 전체 모드가 변경되면서 극적인 효과(?)를 연출해보았다. 스프린트를 진행하면서 하고싶은게 계속 늘어나서 원하는 기능을 전부 구현한건 아니지만, 처음에 생각했던 모습은 완성할 수 있어서 지금 몹시 기분이 좋은 상태다 🤩.
lineUp
메서드 구현setPosition
메서드 구현add a dancer
버튼 클릭 시 span이 아닌 img를 생성하도록 변경setImageUrl
메서드 구현generateNum
메서드 구현switchMode
메서드 구현<audio>
태그를 이용해 배경음악 설정 (자동재생, 무한반복, 너무 크지 않게 음량을 0.2로 초기화) ➡ body나 head 어디에 넣어도 된다.Array(n).fill(value [, start, end])
n개의 요소를 가진 배열을 만들고 싶은데, 값은 아직 미정일 때 Array(n)
을 사용할 수 있다. 각 개체의 값은 정해지지 않았으므로, 호출할 경우 undefined가 나온다.
const lengthTen = Array(10);
console.log(lengthTen.length); // 10
나중에 그 값을 채우고 싶으면 fill
메서드를 사용하면 된다.
const lengthTen = Array(10); // [empty × 10]
lengthTen.fill(7); // start, end를 지정하지 않으면 value로 전부 채운다.
console.log(lengthTen); // [7, 7, 7, 7, 7, 7, 7, 7, 7, 7]
fill
메서드는 이미 값이 있는 배열에도 적용할 수 있다.
const jackpot = [7, 7, 7];
jackpot.fill(6, 0, 1);
console.log(jackpot); // [6, 7, 7]
[...Array(n).keys()]
Object.keys()
메서드를 응용한 방법이다. 이 방법을 사용하면 인덱스 값을 요소로 갖는 배열을 만들어낼 수 있다.const indexOfArr = [...Array(3).keys()]; console.log(indexOfArr); // [0, 1, 2]
this
는 window 객체가 된다.