210806

1. Facts (사실, 객관)
   : 코드숨 개인프로젝트 드디어 내가 원하는 버튼 기능을 구현했다.
    
2. Feelings (느낌, 주관)
   : 아직도 개인 프로젝트를 못끝냈고,, 벌써 8월이다. 오늘 드디어 질질 끌었었던 버튼 기능을 구현했다. 8월말부터 새로운 수업을 듣게 될텐데 얼른 프로젝트를 마무리하고 개인 공부를 좀 해둬야겠다.
   
   
3. Findings (배운 점)
   : Sounds 컴포넌트에 빼곡하게 적혀있던(대부분이 중복 코드) 코드들을 정리(?)했다. SoundButton 컴포넌트를 만들어서 Sounds컴포넌트를 분리 시켰다. 이 과정에서 부모 컴포넌트와 자식 컴포넌트 사이에 props를 주고 받는것을 배웠다.
   예를들어서 부모 컴포넌트인 Sounds 컴포넌트에서 이렇게 정보를(음악,사진) 전달해주면
   

   <SoundButton audioSrc="sound/rain.mp3" backgroundImg="image/rainy.jpg" />

   
   자식 컴포넌트인 SoundButton 컴포넌트에서 넘겨받은것들(음악,사진)에 대한 처리를 해준다. 
   

   export default function SoundButton({ audioSrc, backgroundImg }) {
     const [toggle] = useAudio(audioSrc);
   
     const buttonStyle = {
       height: 135,
       width: 500,
       margin: 20,
       justifyContent: 'center',
       backgroundPosition: 'center',
       backgroundSize: 'cover',
       backgroundImage: `url(${backgroundImg})`,
     };
   
     return (
       <Button
         role="button"
         aria-label="play"
         style={buttonStyle}
         onClick={toggle}
       />
     );
   }

   
   그리고 음악 재생 기능을 해결하기 위해서 useAudio와 useEffect를 사용하였다. 이 부분은 구글링을 통해서 코드를 참고했다.
   
   또 총 4개의 버튼을 일렬로 가운데 정렬하는 방법도 배웠다.
   

   <div style={{
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
           }}
           />

   
   그리고 이러한 디자인 부분을 미리 변경해보고 확인해보기 위해서 개발자 도구를 이용하면 편리하다는 것도 알게 되었다.