SR 5일째
create react app
SR이 거의 마무리 되었고 클라이언트 폴더를 create react app으로 생성했다.
이전 프로젝트에서 파일 구조가 정리 되질 않아
에러 핸들링에서 애먹은 기억이 있어 폴더별로 파일을 정리하기로 하였다.
우리팀의 프로젝트는 각각의 컴포넌트들과 컴포넌트를 조합해서 랜딩하는 페이지 컴포넌트가 있다.
이를 폴더별로 정리하기로 하였다.
리액트에서 오디오 재생
나는 프로젝트에서 오디오 재생 기능과 해당 페이지를 맡았다.
오디오 재생에 대해서는 처음이라서 구글링으로 대부분의 시간을 보냈다.
결론적으로 내가 사용한 기술들의 순서들이다.
html audio 태그 -> react-audio-player -> react-h5-audio-player
html audio 태그는 html의 기본 태그이며, img 태그처럼 src 옵션의 값으로 audio를 출력 가능하다.
react-audio-player는 솔직히 audio태그와 차이점을 못찾았다.
react-h5-audio-player가 가장 적절하다고 생각이 들었던게 controler를 직접 css로 커스텀 가능하다는것이다.
불안한점은 react-h5-audio-player는 typescript로 작성되었다는것..
react-h5-audio-player는 여러 속성과 prop이 있다.
이중에서 나는 onEnded와 src를 이용해서 음악 재생이 끝나면 다음 음악으로 전환 하도록 했다.
src값에 음악 url값을 state로 주고 onEnded prop을 이용해 set함수로 state를 변환하도록 했다.
<AudioPlayer
src={src} controls volume={0.5}
showSkipControls
onEnded={() => { setSrc(sweetDream); }}
/>showSkipControls는 이전곡, 다음곡 버튼이 보이도록 하는 속성이며 아직 아무런 기능도 하지 않는다.
onClickPrevious와 onClickNext를 통해 이 기능을 아까와 비슷한 맥락으로 로직을 짜보려한다.
git 충돌
코드리뷰로 하루를 마무리하고 pr하는 과정에서 큰 실수를 하였다.
ignore 파일에 package-lock.json을 작성하지 않아 이 부분까지 업로드 된것이다.
github 웹에서 package-lock.json 삭제하고난뒤부터 pr이 작동하지 않았다.
충돌이 너무 많아 merge자체에 접근이 안됐다.
위 상황에 대해서 구글링해보니 package-lock.json을 삭제하는것은 절대 하지말라고 하더라
방법을 고민하던중 github 웹에서 close된 pr을 되돌리는 기능(Revert)이 있었다.
이를 이용해서 pacakge-lock.json을 삭제하기 이전으로 돌아갔고, 이후로는 pr이 잘 되었다.
