개발자 도구 Console 창의 prop , 통신상태 관련 질문
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[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 > </ div > < div id = " body " > < div id = " banner " > < img src = " images/banners/banner1.png " alt = " banner " /> </ div > < h1 > 판매되는 상품들 </ 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 > < div className = " product-contents " > < span className = " prodcut-name " >{ product . name }</ span > < span className = " product-price " >{ product . price } 원 </ span > < div className = " product-seller " > < img className = " product-avatar " src = " images/icons/avatar.png " alt = " product-avatar " /> < span >{ product . seller }</ span > </ div > </ div > </ div > ) ; } ) } </ div > </ div > < div id = " footer " ></ div > </ div > ) ; } 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 ) ; } ) ; }, []) ;
- mock-server
- react
- Develop-Tool
- javascript
- prop
- 머신러닝 배워볼래요?
- HTML/CSS
- tensorflow
- express
- react-native
- nodejs