![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbiC1Nx%2FbtqO3z7aFVj%2FNsgDKA5e4idFNKvJVy7XTK%2Fimg.png)
์์กด์ฑ ์๋ฌ ํด๊ฒฐ ์๋ฌ ๋ฐ์ ์ด๋ฐ ์ค๋ฅ๊ฐ ๋ด๋ค. CRA๊ฐ ์ ๊ณตํ๋ react-scripts ํจํค์ง๊ฐ eslint 6.6.0 ๋ฒ์ ์ ์์กดํ๋๋ฐ, 7.2.0 ๋ฒ์ ์ ์ค์นํด์ ๊ทธ๋ ๋ค๊ณ ํ๋ค. ์ ๋ฐ์ ๋์ค๋ ํด๊ฒฐ๋ฐฉ๋ฒ์ด ์๋๋ฐ, ๋ฐ๋ผํด๋ ํด๊ฒฐ๋์ง ์๋๋ค ใ ... ์ ๋ฒ์๋ ๊ฐ์ ๋ฌธ์ ๋ก ์์ฉ์ฌ์ ์ด๋ฒ์ ์ ๋๋ก ๊ฐ์ก๊ณ ํด๊ฒฐํด๋ณด๋ ค๊ณ ํ๋ค. ์ด์ ๋ฐ๊ฒฌ ์ด์ ๋ ๊ตฌ๊ธ๋งํ๋ค๊ฐ ๋ฐ๊ฒฌํ๋๋ฐ(https://github.com/wesbos/eslint-config-wesbos/issues/17) , react-scripts์ eslint ์์กด์ฑ ๋ฒ์ ๊ณผ airbnb linting์์์ eslint ์์กด์ฑ ๋ฒ์ ์ด ์ผ์นํ์ง ์์์ ๋์ค๋ ๋ฌธ์ ์๋ค. ๋ป์ง ๊ทธ๋์ ์ผ๋จ react-scripts version์ `npm view react-s..
VScode์์ eslint๊ฐ ์ ์ฉ์ด ์๋๊ณ ์๊พธ ํด๋น ์๋ฌ๊ฐ ๋จ๊ธธ๋ ๊ฒ์ํด๋ดค๋ค. ๋ฒ์ ์ด ์ ๋ง์์ ๊ทธ๋ฐ ๊ฒ์ด๋ VScode๋ฅผ ๋ค์ ๊น๋ฉด ๋ฒ์ ์ ๋ฐ์ดํธ๋๋ฉด์ eslint๊ฐ ์ ๋๋ค. ๋ค์ด๋ก๋ : code.visualstudio.com/download ์ฐธ๊ณ : https://github.com/typescript-eslint/typescript-eslint/issues/2020
์ฐธ๊ณ : https://hoilzz.github.io/webpack/11-eslint-prettier/ eslint์ parser๊ฐ ๊ณต์์ ์ผ๋ก ES ํ์ค๋ง์ ์ง์ํ๊ธฐ ๋๋ฌธ์, ES6~7 ํ์ฑ ์ ๋ฌธ์ ๊ฐ ์๊ธด๋ค. ๋ฐ๋ผ์, .eslintrc.js ํ์ผ์ export default๋ฅผ module.export๋ก ๋ณ๊ฒฝํ๊ธฐ export๋ ES6 syntax์ด๊ณ , module export๋ commonJS syntax์ด๋ค. babel-eslint ์ค์น ํ .eslintrc.js์ "parser": "babel-eslint",์ถ๊ฐํ๊ธฐ ๋ ๋ฐฉ๋ฒ ์ค ํ๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
๊ฐ์ YAML : YAML Ain't Markup Language ์ฌ๊ท๋ฅผ ํตํด ์ด๋ฆ์ง๊ธฐ ์ฟ ์ฟ ๊ธฐ์กด์๋ ํ๋ก๊ทธ๋จ์ ์ค์ ์ ์ ์ฅํ๊ณ ์ฝ๋๋ฐ์ xml ํ์์ ์จ์๋ค. ํ์ง๋ง ์์ฑ์ด ๋๋ฌด ๊ท์ฐฎ์์ ๋ค๋ฅธ ๋ฐฉ์์ ๊ฐ๊ตฌํ๊ฒ ๋์๋ค. ์ ๋ณด๋ฅผ ์ ์ฅํ ์๋ง ์๋ค๋ฉด ๋ค๋ฅธ ๋ฐฉ์๋ ๊ฐ๋ฅํ๋ค. ๊ทธ๋์ ๋์จ๊ฒ json ํ์ผ ํ์์ด๋ค. json์ ๊ฐ์ฒด ํ์์ผ๋ก xml๋ณด๋ค๋ ๊ฐํธํ ์์ฑ์ด ๊ฐ๋ฅํ๋ค. ํ๋ ๋ ์ฝ๊ฒ ์์ฑํ ์ ์๋ ํ์์ด ๋ฐ๋ก YAML ํ์์ด๋ค. YAML์ ๊ฐ๋ ์ฑ์ด ์ข์์ JSON์ ๋นํด ๊ตฌ์กฐ๊ฐ ๋ณต์กํ์ง๋ง ์ฌ๋์ด ๋ณด๊ธฐ์๋ ์์ฐ์ค๋ฌ์ด ํํ์ด๋ค. ์ด์ ๋ฐ๋ผ YAML์ ์ค์ ํ์ผ์ ๋ชฉ์ ์ผ๋ก ๋ง์ด ์ฐ์ด๊ณ , JSON์ ์ค์ ํ์ผ์ ์ ์ธํ ๋ถ์ผ์์ ๋ชจ๋ ๋๋ฆฌ ์ฐ์ด๊ณ ์๋ค. ์ด๋ฌํ ํ์ผ ํ์๋ค์ ์ํฉ๋ง๋ค ํ์์ ๋ฐ๋ผ์ ์ฌ์ฉํ๋ฉด ๋๋ค..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F31a4Q%2FbtqGexb73tt%2FPYhCJr7if7Kiw5NVbG8kCk%2Fimg.png)
React Hook React ๊ณต์์ฌ์ดํธ ์ฐธ์กฐ : https://ko.reactjs.org/docs/hooks-intro.html Hook ์๊ฐ Hook์ ์ด๋ค ๊ฒ์ด๊ณ ์ ๋์ค๊ฒ ๋์์๊น? Hook์ด๋? ์ฐ์ Hook์ React 16.8 ๋ฒ์ ์ ์๋ก ์ถ๊ฐ๋ ์ต์ ๊ธฐ๋ฅ์ผ๋ก, ํด๋์คํ ์ปดํฌ๋ํธ์ ๋จ์ ์ ๊ทน๋ณตํ๊ณ ์ ๋์จ ํจ์ํ ์ปดํฌ๋ํธ์ ๋ํ ๊ธฐ๋ฅ์ด๋ค. Hook์ ํจ์ํ ์ปดํฌ๋ํธ๋ก๋ ํด๋์คํ ์ปดํฌ๋ํธ์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋๋ก ํด์ค๋ค. ํจ์ํ ์ปดํฌ๋ํธ๋? // ํด๋์คํ ์ปดํฌ๋ํธ import React, { Component } from 'react'; class App extends Component { render(){ return ( //jsx ); } } export default App; // ํจ์ํ..
Comment