210303_TIL

seungyeon·2021년 3월 3일

TIL

목록 보기

29/64

IM: DAY 10

Subclass Dance Party 스프린트를 마쳤다. (개인적으로 지금까지 진행했던 스프린트 중에 가장 재밌었던 스프린트였다고 생각한다.) 클래스를 복습하면서 혼자서 아아랜드 프로그램을 만들어봤던 것이 많은 도움이 되었다. ~~역시 가지고 놀면서 배우는게 최고..ㅎㅅㅎ~~
페어님과 처음에 컨셉회의를 할 때 "병맛이지만 귀여운 컨셉"으로 진행하기로 했던 것이 결과물에 엄청난 영향을 줬다.
가장 중요하게 생각했던 것이 2가지 모드(큐트모드와 하드모드)가 랜덤하게 적용되는 부분이었다. 최근에 추가된 댄서의 모드에 따라 전체 모드가 변경되면서 극적인 효과(?)를 연출해보았다. 스프린트를 진행하면서 하고싶은게 계속 늘어나서 원하는 기능을 전부 구현한건 아니지만, 처음에 생각했던 모습은 완성할 수 있어서 지금 몹시 기분이 좋은 상태다 🤩.

오늘 한 일

Subclass Dance Party Sprint - Done (pair)
- 댄서들을 일렬로 정렬하는 lineUp 메서드 구현
- 새로 생성되는 댄서의 위치를 랜덤하게 설정하는 setPosition 메서드 구현
  - 새로 생성되는 댄서가 화면 안에 위치하도록 좌표 수정
- 총 3종류의 댄서 클래스 구현
  - BlinkyDancerClass
  - SpinDancerClass
  - MovingDancerClass
- add a dancer 버튼 클릭 시 span이 아닌 img를 생성하도록 변경
- 이미지 url을 랜덤하게 설정하는 setImageUrl 메서드 구현
- 이미지 url 리스트의 랜덤 인덱스를 가져오는 generateNum 메서드 구현
- 움직이는 댄서가 화면 밖으로 나가지 않도록 설정
- 움직이는 댄서가 이동방향을 바꾸면 이미지가 반전되도록 설정 (flip)
- 새로 생성된 엘리먼트에 따라 전체 모드변경(cute/hard) 기능 구현
  - 모드에 따라 각 댄서의 생김새를 바꿔주는 switchMode 메서드 구현
  - 모드에 따라 스테이지 배경을 변경해주는 기능 구현 (CSS class로 제어)
- cute 모드 배경에서 css animation을 이용한 배경색 5단 변경 (keyframes 사용)
- 생성된 엘리먼트가 일정 개수 이상이면 초기화하는 기능 구현
- HTML <audio> 태그를 이용해 배경음악 설정 (자동재생, 무한반복, 너무 크지 않게 음량을 0.2로 초기화) ➡ body나 head 어디에 넣어도 된다.
알고리즘 문제 풀기

기억할 것

via Dance Party

HTML에 배경음악 삽입하는 방법
CSS animation으로 색 변경하는 방법
JavaScript를 사용해서 움직이는 이미지 구현하는 방법
온갖 gif 이미지를 찾을 수 있는 사이트 ➡ GIPHY
- 검색 후 sticker 필터를 적용하면 배경이 투명한 gif 이미지를 찾을 수 있음.

via Algorithm

`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]