이번엔 AudioRef 에 대한 리펙터링을 진행할 것이다. 컴포넌트의 간단한 구조는> WritePad > Letter > ImageUpload > > > Recode > 이미지 첨부 Button가장 상위의 컴포넌트에 선언되는 form 의 default value 에 audio Ref 값을 추가해준다. 그리고 나서 복잡하게 컴포넌트의 props 로 전달하고 있던 부분을 모두 제거한다.그 안에 있는 Letter 컴포넌트에서도 제거 react-hook-form 은 혁신 인 것 같다.. 이게 진리고 이게 답이다.. 코드가 점점 더 깔끔해지고 있고, 컴포넌트 사이에 props 없이 값..
컴포넌트의 간단한 구조는 > WritePad > Letter > ImageUpload > > > Recode > 이미지 첨부 Button 즉, 이미지를 보여줘야하는 곳과 이미지를 첨부해야 하는 곳의 위치가 다르기 때문에, 늘 그렇듯 Ref 를 사용했다. Ref 를 필요한 각 컴포넌트의 Props 로 보내주듯이 구현을 했다.즉, react-hook-form 을 사용하고 있으면서 장점을 전혀 활용하고 있지 못했던 것이다. 이렇게구현하면, 코드에 inputRef 가 남발한다. 이렇게 가장 상위의 컴포넌트에서 props 사용해서 가장 하위의 컴포넌트까지 전달해주는 형식을 띄고 있는 것..
시맨틱 마크업 (semantic Markup) semantic 는 의미의, 의미론적인, 이라는 뜻을 지니고 있습니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다. 시멘틱 마크업을 사용하는 이유 웹 접근성에 효율적 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있기 때문입니다. 코드 가독성에 따른 유지 보수의 용이 단순한 div, span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋습니다. 검색엔진 최적화(SEO) 에 유리 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하기 때문입니다. 검색 엔진에 최적화시킨다는 것은 곧 웹 표준에 맞춘다는 말과 같습니다. 시멘틱 마크업..
