Sidebar

Sidebar 구현

Sidebar를 구현하는데는 어렵지 않았다.
Visualizer에 코드를 그대로 인용해오면 되었다.
하지만, 하나 거슬리는것이 있다.
Sidebar와 Visualizer의 구조가 html 구조를 제외하고는 거의 똑같다는것이다.
playlist 컴포넌트와 react-h5-audio-player가 사용되는것이 동일하고,
핸들러함수, 사용되는 state값이 모두 동일했다.

그래서 react-h5-audio-player와 핸들러함수 state를 포함한 컴포넌트를 만들려 했으나, state의 의존성 때문에 구현이 힘들었다.
playlist 컴포넌트와 react-h5-audio-player는 같은 state와 state 핸들러 함수에 의존한다.

그래서 두 컴포넌트를 포함한 조상 컴포넌트에서 state를 props로 내려야한다.
이 때문에 둘을 쪼개는것은 어려운일이었다.

redux를 사용하면 되지 않을까 생각했지만, 핸들러 함수는 각각 존재해야 할것이며,
그렇게 하면 코드가 오히려 더 늘어나게 되고 구조가 오히려 복잡해지기에
이 부분은 제외하고 생각해 봤다.

반나절간 여러 시도를 했지만 결국 실패...

어쨌든 visualizer에서 사용한 음악 재생 로직을 sidebar에 그대로 적용하고,
이를 분리하는 작업은 시간이 될때 좀더 고민해보기로 했다.

scss

scss를 이용해 sidebar의 기본적인 레이아웃을 정리했다.
그동안 css에 대해서 많이 연습을 못해서 간단한 레이아웃 정리가 하루종일 걸렸다.
그것도 도움을 받아서...
자괴감이 많이 들었다. css도 좀 신경쓸걸..

---

오늘은 여기까지..

투자한 시간에 비해 작업량이 너무 안나온 하루였다.
컴포넌트 쪼개기, css 작업, 이 두 부분에서 막혀 삽질하는데 하루를 다 보냈다.
컴포넌트 쪼개는 작업은 아무래도 시간이 여유 있을때 진행하는게 좋을거같아 기존 코드로 진행하였고, css는 하루 이틀정도 공부하는 시간을 가져야 원활하게 진행 가능할듯 하다.
어쨌든 가장 기본적인 부분에서 막혔으니
그동안 죽을만큼 열심히 해온건 아니라는게 증명된듯 하다.
많이 반성하고 나를 돌아본 하루다.