분류 전체보기 753

[Vue.js] vue 데이터 양방향 바인딩 / 폼 입력 바인딩

[데이터 바인딩이란?] 앱 UI와 해당 UI가 표시하는 데이터를 연결하는 프로세스 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것 바인딩 설정이 올바르고 데이터가 적절한 알림을 제공하는 경우 데이터 값이 변경될 때 데이터에 바인딩된 요소에 변경 사항이 자동으로 반영된다. [양방향 데이터 바인딩] 컨트롤러와 뷰 양쪽의 데이터 일치가 모두 가능한 것이 양방향 데이터 바인딩이다. 데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면의 입력에 따라 데이터를 갱신하는 것이다. (HTML -> JS, JS -> HTML 양쪽 모두 가능) 양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변..

WEB/VUE.js 2021.10.12

[Vue.js] button 이벤트 핸들링/ 이벤트 수식어

https://kr.vuejs.org/v2/guide/events.html 이벤트 핸들링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org [이벤트 핸들링] {{ year }} 더하기 빼기 버튼에 onclick을 v-on:click으로 쓰고 plus와 minus라는 이름으로 정의한 method와 연결시킨다. 공식문서에서 보면 인라인으로도 쓸 수 있지만 methods에서 꺼내 쓰는 방법만 하겠다. [이벤트 수식어] 이벤트에는 요러한 수식어가 있는데 아래와 같이 사용한다. ... ... 예시 submit 여기서는 form태그에 submit의 수식어로 prevent를 써주었는데 이것은 submit을 하고 페이지가 새로고침되는 것을 방지해준다 .

WEB/VUE.js 2021.10.12

[Vue.js] 뷰 프로젝트 시작하기 script 태그 넣기/ data, method 지정하기

뷰 공식 문서 시작하기 | Vue.js 시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 v3.ko.vuejs.org [시작하기] 기본적인 html파일을 만들고 script 코드를 추가해주면 간단하게 vue를 사용할 수 있게 된다. 이 코드를 head태그 안에 넣어준다. {{ name }} id를 app으로 주고 뷰 인스턴스를 만들어서 id가 app으로 연결시킨다. data안에는 객체형태로 값이 들어가있을 수 있다. name이라는 변수로 lee라는 값이 들어가있는데 그러면 id가 app인 div안에 {{ name..

WEB/VUE.js 2021.10.12

[Vue.js] vue.js 가 무엇인가?

[Vue란?] 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공 [Vue의 장점] 배우기 쉽다 리액트와 앵귤러에 비해 성능이 우수하고 빠르다 리액트의 장점과 앵귤러의 장점을 가지고 있다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있음 [Vue의 특징] MVVM 패턴 화면을 모델 - 뷰 - 뷰 모델로 구조화 하여 개발하는 방식 뷰(View) : 사용자에게 보이는 화면 돔(DOM) : HTML문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 ..

WEB/VUE.js 2021.10.12

[TIL] 20211011 Vue.js 공부

2021.10.12 - [WEB/VUE.js] - [Vue.js] vue.js 가 무엇인가? [Vue.js] vue.js 가 무엇인가? 보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요. sso-feeling.tistory.com 2021.10.12 - [WEB/VUE.js] - [Vue.js] 뷰 프로젝트 시작하기 script 태그 넣기/ data, method 지정하기 [Vue.js] 뷰 프로젝트 시작하기 script 태그 넣기/ data, method 지정하기 뷰 공식 문서 시작하기 | Vue.js 시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음,..

TIL 2021.10.11

[TIL] 20211010 에러노트

2021.10.06 - [에러노트] - [에러노트] react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다 [에러노트] react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아 발생한 상황 나는 yarn을 쓰는데 npm으로 라이브러리를 설치했을 때 이런 현상이 발생 해결 create-react-app으로 만든 package.json이 있는디렉토리에서 yarn add react-scripts nap install -save react-scrip.. sso-feeling.tistory.com 2021.10.06 - [에러노트] - [에러노트] npm ERR! Cannot read property 'match' o..

TIL 2021.10.11

[에러노트] react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다

발생한 상황 나는 yarn을 쓰는데 npm으로 라이브러리를 설치했을 때 이런 현상이 발생 해결 create-react-app으로 만든 package.json이 있는디렉토리에서 yarn add react-scripts nap install -save react-scripts 명령을 실행하면 된다. yarn upgrade 실행해봐도 됨 yarn 과 npm의 차이는 아직 잘 몰라서 공부해봐야함!

에러노트 2021.10.06