2022-11-29 (화)
🔥 eslint 에러 문제 발생 + 해결법
해결법 1
<div className="contents">
<div>
<h2>Working..🎂</h2>
<div className="app-style">
{users.map((user) => {
if (user.isDone === true) {
return (
<User
handleDelete={deleteUserHandler}
user={user}
key={user.id}
handleChange={onChangeHandler}
></User>
);
}
})}
</div>
---------------------------------------------------
WARNING in [eslint]
src\App.js
Line 81:31: Array.prototype.map() expects a value to be returned at the end of arrow function array-callback-return
webpack compiled with 1 warning위 eslint에러가 자꾸 나옴!
구글링했더니
/*eslint-disable*/위 코드를 맨 위에 넣어줬을 때 eslint 에러가 해결됨 !
eslint ?
ESLint는 ES 와 Lint를 합친 것입니다.
ES는 Ecma Script로서, Ecma라는 기구에서 만든 Script, 즉, 표준 Javascript를 의미합니다.
Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다.
따라서, 'ESLint는 자바스크립트 문법에서 에러를 표시해주는 도구' 입니다!
우리는 에러로서, 정말 문제가 되는 부분만을 지정할 수도 있고, 아니면 전반적인 코딩스타일(ex. tab 설정, ; 여부 등)까지 지정할 수도 있습니다.
많은 사람들과 협업할때 특히 유용합니다. 에러와 코딩 스타일을 잡아주기 때문에 한 사람이 코딩한 것처럼 됩니다! 😀
★팁
/*eslint-disable*/: eslint가 실행되지 않게끔 도와줌.
해결법 2
<div>
<h2>Done..🎁</h2>
<div className="app-style">
{users.map((user) =>
user.isDone === false ? (
<User
handleDelete={deleteUserHandler}
user={user}
key={user.id}
handleChange={onChangeHandler}
></User>
) : null
)}
</div>
</div>배열 메소드 쓸 때는 if문을 안쓰고 삼항연산자로 주로 사용 !!
🍄 오늘 알아낸 간단한 팁
Alt+Shift+a : css 주석(/.../) 단축키
auto rename tag : <태그>를 수정할 때 뒤에 </태그>도 자동으로 수정해주는 VS코드 확장 프로그램
git graph : github에 버튼 하나만 누르면 올려는 VS코드 확장 프로그램
💟 참고자료
eslint의 개념
Front-End :)