vue create로 첫 프로젝트를 만들자마자 여러 에러가 떠서 한시간 동안 설정 하느라 고생하였다. 아래 설정을 .eslintrc.js에 넣으면 많은 에러가 해결이 된다......ㅡㅡ (프로젝트 시작부터 이러고.... 아 진짜 너무 화났다.) module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "@vue/standard", "@vue/typescript/recommended", "standard", ], parserOptions: { ecmaVersion: 2020, }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" :..

vue create 프로젝트명 뷰 프로젝트를 생성하고 나서, npm run serve를 했더니 바로 아래와 같은 에러가 떳다. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. 해결 방법) vue.config.js 파일에서 const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, devServer: { overlay: false, }, }); devServer: { overlay: false} 를 추가 ..

태그에 Ref 속성으로 문자열(위 예제에서는 inputName)로 값을 넣어 주면, 이후 script 태그에서 해당 태그에 접근을 할 수가 있다. this.$refs.inputName // 이처럼 input 태그에 접근을 할 수가 있다.

1. 이벤트 이름은 카멜 표기법으로 작성한다. 예를 들어, HTML에서의 onclick은 리액트에서는 onClick으로 작성해야 한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. HTML에서 이벤트를 설정할 때는 큰 따옴표("") 안에 시랳ㅇ할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. { alert("이런 식으로 onClick에 화살표 함수를 작성하고 객체 형식 씌여서 대입한다."); }} > 확인 3. DOM요소에만 이벤트를 설정할 수 있다. div, button, input, form, span등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없다. 예를 들어, MyCo..

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props를 바꾸려면 부모 컴포너너트에서 바꾸어 주어야 한다. 예를 들어, App컴포넌트에서 MyComponent를 사용할때 props를 바꾸어 주어야 값이 변경 된다. 반면 MyComponent에서는 전달 받은 name값을 직접 바꿀수 없다. 리액트에서는 2가지 종류의 state가 있다. 1)클래스형 컴포넌트가 지닌 state 2)함수형 컴포넌트가에서의 useState 라는 함수를 통해 사용하는 state 1) 클래스형 컴포넌트의 state src디렉토리(폴더)에 counter.js 파일을 생성해 보자. import { Component } from "react"; class Counter extends Component { con..

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용 하는 요소이다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할 수 있다. 1. JSX내부에서 props 렌더링 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링 하도록 설정해 보자. 2. props 기본값 설정: defaultProps (...) return ; (...) MyComponent에서 설정한 name값을 지우고 다음과 같이 default 값을 설정 해 보자 위 코드를 실행하면 아래와 같이 결과가 나온다. 3. 태그 사이의 내용을 보여 주는 children 리액트 컴포넌트를 사용할 때, 컴포넌트 태그 사이의 내용을 보여 주는 props가 있는데요..