2번쨰 프로젝트 후기

프로젝트하면서 정말 너무어려웠던 부분은 동영상에서 볼 수 있다시피 사용자의 막대기가 맨위,맨아래에 부딪혔을 때, 벗꽃 비슷한 애니메이션이 나타나는데 이걸 구현하는게 제일 힘들었습니다.

* 가장 어려웠던 부분.

-> 일반적인 애니메이션 루프의 로직은 전체지우기->전체그리기 이다. 좀 더 구체적으로 말하자면 전체지우기->일부분그리기->일부분그리기->일부분그리기->일부분그리기->결국전체를 그리게 된다. 이러한 과정을 계속해서 반복하게 된다. 근데 여기에 문제점이 한가지 있다.

예를들어, 사용자의 입력에 따라 애니메이션 루프를 계속 호출한다고 가정해보자.

처음에 호출할땐 문제 없다. 하지만 2번째 호출을 하게 되면 화면에는 아무것도 나타나지 않을 것이다.

왜냐하면 비동기로 호출되는 window.requestAnimation()에서는 동작 순서를 보장할 수 없을 뿐더러, 다른 방법으로 동작 순서를 보장한다 하더라도 깔끔한 애니메이션이 연출 될 수 없다. 왜냐하면 애니메이션 호출이 N번된다고 가정할때, 1번애니메이션에서 그리고지우고 2번애니메이션에서 그리고지우고 3번애니메이션에서 그리고지우고 하면 결국 화면에는 하나의 애니메이션밖에 보여 줄 수 없을 것이다.

이러한 방법은 애초에 사용자의입력에따라 애니메이션의 여러번호출됨으로써 여러개의 애니메이션이 조화하는 상상으로부터 멀어진다.

사용자의 입력에따라 애니메이션이 N개 증가하는데, 이때 이 애니메이션의 처리를 window.requestAniamtionFrame()으로 처리했었다. 하지만, 이게 1개에서 2,3,4,N개가 되버리면 버벅거리면서 성능상에 문제를 일으키게 됬다.

그래서 조치방법으로 시도한것들이있따.

[1] 랜더링 숫자 줄이기 : 즉, 나는 처음에 수많은 랜더링때문에 그런줄알고 랜더링 숫자를 줄여봤는데 여전히 렉걸렸었고, 나중에는 크롬 프로파일링으로 성능체크를 해봤을때 window.requestAnimationFrame()에서 가장많은 오버헤드가 일어났었고 거기서도 랜더링때문에 렉이걸리는점은 없었따. 

[2] WebWorker를 이용한 분산처리 : window.requestAnimationFrame() 함수를 여러개의 프로세스로 분할해서 처리하면 나아지겟다 싶어서 웹워커를 쓰려고 했는데 웹워커는 메인프로세스에 접근 할 수 없다는것…. 즉, window,document객체 등등에 접근할수없다는것임. 사실 웹워커는 이미지변환같은 큰작업(단순사칙연산)에서나 쓰이는줄은 알고있었다만 너무급해서 쓸데없는 시간을 쓰게됨.

[3] N개의 window.requestAnimationFrame()을 1개의 window.requestAnimationFrame()으로 대채하기 : 결국 한참을 고민하다가…. 검색해도 뭔가 연관된것도안나오고…. 도대채 그럼 외쿡인들은 사용자의입력에따른 애니메이션의개수를 어떻게처리했단말인가?….. 제발힌트라도얻고싶었지만 구글링에서는 딱히 얻을 정보가 나오진 않았다. 

결론은 사용자의 입력에따라 애니메이션의 개수가 증가 할 때 마다, 전에 호출중이던 애니메이션함수를 중단하고 중단하기직전까지작업했던 정보를세이브 한다음에 새로운 함수를 만들어내어 거기서 이전에작업했던것 + 현재추가된 애니메이션을 처리한다. 각 애니메이션의 삽입,삭제는 연결리스트를썻다. 

* 프로젝트하면서 얻은 부가적인 것 들

# package.json 파일안에 주석이 있으면 에러난다. 그리고 webpack-dev-server가 해당 프로젝트 local에 설치되있고 webpack이 global로 설치되있으면 오류난다. webpack이 global로 설치 되있더라도 해당 프로젝트의 local에 새로 깔아줘야 에러가 안난다.

#맥에서 npm install할때 package.json이 그 해당 디렉터리에 없으면 사용자루트파일에 저장된다. 그래서 특정 로컬디렉터리에 모듈을 설치하고싶으면 강제로 package.json을 만들어 준 뒤에 다시 install 한다.

# 비용문제. 

왼쪽에있는 bar(막대기)가 움직일때마다 전체를 다시 지웠다가 전체를 다시 그리게된다. 근데 이떄 중앙선을 그릴때 비용이 꽤 크다는걸 알게됬다.

처음에는 잘몰랐는데 bar가 빠르게움직일떄마다 프로그램이 버버벅대고있던 것…

그래서 저 중앙선을 다시 그려주는게아니라 초기에 bar를 만들기전에 기존화면을 스크린샷찍어놓고 그 참조값을 저장해놓고있다가, bar가 움직일때마다 다시 그 참조값만 불러서 붙여넣는 방식으로 갔더니 깔끔하게 사라졌다.