천천히 알아가는 세상

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

안녕하세요. 저번에 이어서 React에 대하여 알아보겠습니다. 저번 글에서는 CDN으로 사용하는 방식에 대하여 진행하였지만, 이번에는 Create-react-app을 이용해서 하는 방법으로 진행하겠습니다. 1. 기본 세팅 설정 방법 최소 사양 Node 14.0.0 이상 npm 5.6 이상 기본 포트 3000번을 사용한다. 생성 명령어 my-app 대신에 사용하실 폴더 이름으로 변경해도 됩니다. VS Code 명령창에 입력하면 됩니다. npx create-react-app my-app cd my-app npm start 처음 실행 시 나오는 창 2. NPX Node Package eXute Node 실행을 위한 명령어이며, npm과는 달리 최신 버전의 패키지를 임시로 설치해서 실행하는 용도로 사용된다. N..

안녕하세요. 이번에는 React에 대하여 알아보겠습니다. 1. React JS 반응형 자바스크립트 SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는 게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메서드들을 지원하면서 사실상 웹 프런트엔드 개발의 표준으로 자리 잡았다. 2. Virtual DOM 서버와의 데이터 통신과..