접속 링크 : https://kimjeongwonn.github.io/Drop-the-Javascript-React/
Github 링크 : https://github.com/kimjeongwonn/Drop-the-Javascript-React
Drop The Javascript는 패스트캠퍼스 과정을 진행하면서 진행한 팀 프로젝트중에 하나였다. 3명이서 팀을 짜서 진행했는데, 어쩌다 보니 내가 HTML과 CSS를 주로 맡게 되어서 기능 구현보다는 마크업에 더 신경을 쓰게 되었고 취업을 준비하면서 면접에서 해당 프로젝트에서 코드를 작성하지 않은 게 굉장히 크리티컬하게 작용되어서 많이 아쉬웠던 프로젝트였다.
그래서 이번에 리액트를 사용해서 혼자서 완전히 다시 만들어 봤다. 자세한 제작일지는 깃허브 링크 안에 wiki에 정리 해 두었다.
프로젝트를 진행하면서 이전에는 결국 AudioElement를 사용했던 사운드 재생 기능을 AudioContextAPI를 통해 제대로 구현 해 볼 수 있었고, 덕분에 사파리와 모바일에서 심각한 딜레이 때문에 작동이 안되던 문제도 해결할 수 있었다.
상태는 모두 리액트의 Context를 사용해서 관리했는데 기능별로 Context를 분리했으나 전역 상태가 굉장히 많고 모든 컴포넌트에서 거의 대부분의 Context를 불러와서 사용해야 했다. 그래서 중간에 Redux를 통해 상태관리의 필요성을 느꼈지만 일단 Context를 통해 진행한 뒤에 Redux로 리팩토링을 하는 것을 계획했다.
이 외에도 AudioContextAPI객체를 ref로 관리하는 것이 맞는지에 대한 고민도 이어지고 악보 상태가 불변성이 유지되지 않고 계속해서 참조값으로 상태가 갱신되는 문제도 있는데 모두 Redux를 통한 상태관리로 해결할 수 있을 것 같다. Redux Toolkit의 immer에서 복잡한 객체의 불변성 유지를 도와주는 것으로 알고있다.
일단은 v1이다. 기능 구현은 모두 했고 이번 달 내에 Redux로 리팩토링해서 v2를 제작해볼 계획이다.
