천천히 알아가는 세상

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

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