천천히 알아가는 세상

안녕하세요. 이번에는 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..

안녕하세요. 이번에는 React의 Component에 대하여 알아보겠습니다. 그전에 VSCode에서 작업할 때 있으면 편리한 확장 프로그램을 설치하도록 하겠습니다. 1. VSCode 확장 프로그램 ES7 + React/Redux/React-Native snippets v4.4.3 React 관련 snippets 제공 2. Component Virtual DOM의 핵심이다. 기존의 웹 서비스들은 웹페이지에서 정말 작은 부분이 업데이트 되어도 페이지의 전체를 리로딩 해야한다. React는 컴포넌트 단위로 페이지 새로 고침이 가능하여 리소스 절약이 가능하고, 사용자에게 부드럽고 빠른 경험을 제공한다. 독립적으로 구성하여 재사용이 편리 합니다. 데이터는 속성(props) 으로 받고, 상태(state)에 따라 V..

안녕하세요. 이번에는 React에서 build를 하는 방법에 대하여 알아보겠습니다. 우선 해당 프로젝트는 create-react-app으로 만든 프로젝트입니다. 1. Webpack 여러 기능을 넣고 하면 작업을 하면 우선적으로 용량 문제가 발생한다. 필요한 기능을 필요한 순간에 모듈 형태로 불러와서 사용을 하고, 배포할 때에는 필요 없는 기능은 다 빼고 빌드를 하는 방식을 사용한다. 의존성이 있는 모듈을 모아서 하나의 파일로 만들어 주는 역할한다. webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transformin..

안녕하세요. 이번에는 React에서 onClick 이벤트를 사용하는 방법에 대하여 알아보겠습니다. 1. onClick 이벤트 핸들러 자바스크립트에서는 onclick를 사용했다면, React에서는 onClick을 사용하면 됩니다. (대소문자 주의) 2. 연습하기 /src/App.js import logo from './logo.svg'; import './App.css'; function App() { return ( {/* 함수를 바로 사용하면 이벤트가 바로 실행될 수 있으므로 익명 함수를 이용해서 사용하는 방법을 추천 */} { alert('클릭!') }}>클릭 ); } export default App; 실행결과 - "클릭" 글자를 눌러야 이벤트가 실행되는 모습 2-1. 익명함수의 차이 onClick..