천천히 알아가는 세상

안녕하세요. 이번에는 React의 useState 기능에 대하여 알아보겠습니다. 1. React - State 특수한 기능을 하는 변수라고 생각하면 된다. 컴포넌트에 대한 상태를 의미한다. State가 변경되면 해당 컴포넌트를 다시 렌더링 하기 때문에, 컴포넌트의 유동성 관리가 쉽다. 2. 일반 JS로 사용하였을 때 App.js import './App.css'; function App() { const teacher = '새싹'; function inEnglish() { const spanEl = document.querySelector('.App > span'); spanEl.innerHTML = 'sesac'; } return ( inEnglish()}>영어로! {teacher} ); } expor..

안녕하세요. 이번에는 React에서 ESLint 사용할 때 comma-dangle Error 해결하는 방법에 대하여 알아보겠습니다. 1. React comma-dangle 에러 .eslintrc.js 파일에 comma-dangle 추가 0 = 끄기 1 = 경고 2 = 에러 .eslintrc.js module.exports = { extends: ['airbnb-base'], rules: { 'linebreak-style': 0, 'no-console': 'off', 'comma-dangle': 1, }, }; package.json "devDependencies": { "eslint": "^8.31.0", "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin"..

안녕하세요. 이번에는 React에서 Prettier + ESLint 설정 시 Error가 생기는 것을 해결한 세팅 방법에 대하여 알아보겠습니다. 실습환경 React : create-react-app 2ndreact Prettier + EsLint + TypeScript 세팅하기 (최신) 1. 폴더 구조 프로젝트 폴더 모음에서 제일 최상단 폴더에 설정을 합니다. react4, react5 폴더는 create-react-app 명령어로 만든 react 폴더입니다. (무시하셔도 됩니다) .vscode 폴더, settings.json, eslintrc.js, prettierrc 파일이 있으면 삭제 후 진행하시기 바랍니다. 단, 하위 폴더에 vscode 폴더 및 관련 파일이 중복으로 있으면 안 됩니다. (충돌 방..

안녕하세요. 이번에는 React의 Create-react-app으로 프로젝트를 생성한 후 ESLint를 사용할 때 Error가 발생하는 현상을 해결해 보겠습니다. create-react-app으로 생성한 폴더 Components에서 return ( token parase 관련 Error 때문에 빨간 줄이 안 없어지는 현상 확인 pacakge.json "devDependencies": { "eslint": "^8.31.0", "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin": "^1.0.1", "import": "^0.0.6", "prettier": "^2.8.1", "typescript": "^4.9.4" } 1. .eslintrc.js 파일에서 pars..

안녕하세요. 이번에는 VS Code에서 ESLint 설정하는 방법에 대하여 알아보겠습니다. 실습환경 React - create-react-app 1. Linting Formatting에 가깝지만 더 많은 규약과 규율을 검사해 주는 작업이다. 웹 개발에서는 Airbnb에서 사용하는 Linting 규율을 많이 사용한다. 2. ESLint ESLint는 코드를 정적으로 분석하여 문제를 빠르게 찾습니다. ESLint는 JavaScript 코드의 문제를 찾고 수정하는 데 도움이 되는 오픈 소스 프로젝트입니다. JavaScript를 브라우저에서 작성하든 서버에서 작성하든, 프레임워크가 있든 없든 ESLint는 코드가 최상의 수명을 유지하도록 도울 수 있습니다. 3. ESLint 설치 설치 시 react 설치한 my..