개발자 도구 Console 창의 prop , 통신상태 관련 질문

Question

[HMR] Waiting for update signal from WDS... webpackHotDevClient.js:138 src\main\index.js Line 25:11: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 30:11: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 38:19: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 44:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text printWarnings @ webpackHotDevClient.js:138 1. 하기 사진과 같이 정상적으로 웹페이지가 나오는데, 개발자 도구 Console 탭에 상기와 같은 prop 알람이 나왔습니다. 찾아보니 img 태그를 사용할 때에는 alt 로 각각 설명을 붙여줘야 없어진다고 해서 붙여주었는데 안붙여도 상관이 없는지 궁금합니다. import React from " react "; import " ./index.css "; import axios from " axios "; function MainPage () { const [ products , setProducts ] = React . useState ([]) ; React . useEffect ( function () { axios . get ( " https://1e7fd6e6-d017-438e-8e7a-a64513bada80.mock.pstmn.io/products " ) . then ( function ( result ) { const products = result . data . products ; setProducts ( products ) ; } ) . catch ( function ( error ) { console . error ( " 에러 발생: " , error ) ; } ) ; }, []) ; return ( < div > < div id = " header " > < div id = " header-area " > < img src = " images/icons/logo.png " alt = " logo " /> < div id = " body " > < div id = " banner " > < img src = " images/banners/banner1.png " alt = " banner " /> < h1 > 판매되는 상품들 < div id = " product-list " > { products . map ( function ( product , index ) { return ( < div className = " product-card " key ={ index } > < div > < img className = " product-img " src ={ product . imageUrl } alt = " product " /> < div className = " product-contents " > < span className = " prodcut-name " >{ product . name } < span className = " product-price " >{ product . price } 원 < div className = " product-seller " > < img className = " product-avatar " src = " images/icons/avatar.png " alt = " product-avatar " /> < span >{ product . seller } ) ; } ) } < div id = " footer " > ) ; } export default MainPage ; 2. 통신상태에 대한 값이 작성한 코드에 따르면 통신 실패에 대한 에러발생 문구만 발생하게 되는데, 통신 성공에 대해서는 작성을 안하는건가요? axios . get ( " https://1e7fd6e6-d017-438e-8e7a-a64513bada80.mock.pstmn.io/products " ) . then ( function ( result ) { const products = result . data . products ; setProducts ( products ) ; } ) . catch ( function ( error ) { console . error ( " 에러 발생: " , error ) ; } ) ; }, []) ;

그랩 · Answer

1. 해당 부분은 warning이라 실제 코드 동작에는 문제가 없습니다! 다만 react에서 img 태그를 넣을 때 alt prop을 넣는 것을 권장하고는 있습니다. 제 강의에는 안나와있지만, 넣어주시는 것도 좋을 것 같아요! 2. 보통 에러가 났을 때 로그를 표시하곤 합니다. 다만 개발환경(실제 서비스가 아닌 노트북에서 테스트할 때)에서도 로그를 보는 게 디버깅을 하기에도 용이하니 넣어주셔도 무방합니다(실제 서비스에서는 보통 해당 로그들이 나오지 않도록 설정합니다)