반응형 js5 [Vue] watch 속성 / 예제 watch watch 속성은 데이터 변화를 감지하고 정해진 로직을 수행합니다. 아래는 v-model를 이용한 watch 예제입니다. 예제 결과 input 박스의 데이터를 변경할때마다 v-model이 message 데이터를 동기화해주고, watch 속성이 message 데이터의 변화를 감지하여 로직을 수행하고 있습니다. 2024. 3. 11. [Vue] computed 속성 / 특징, 예제 예제 {{reversedMessage}} 결과 vuejs에서는 복잡한 연산은 뷰 인스턴스 안에서, html에서는 데이터의 표현만 하는 것을 권고하고 있습니다. computed 속성은 데이터의 연산을 정의할때 사용할 수 있습니다. 만약 위 코드와 다르게 computed 속성을 사용하지 않는다면 아래와 처럼 표현해야하고 가독성에 좋지 않습니다. {{message.split('').reverse().join('')}} computed 특징 1. 반응성 data의 값에 따라 자동으로 다시 연산합니다. 2. 캐싱 만약 화면 여러곳에서 연산한 값을 보여줘야한다면 매번 연산하는 것이 아닌, 미리 연산한 값을 가지고 있다가 화면에 결과를 표시합니다. 2024. 3. 7. [Vue] 주로 쓰이는 디렉티브 정리 아래 디렉티브들은 주로 쓰이는 핵심 디렉티브입니다. v-in 지정한 뷰 데이터의 값에 따라 해당 부분을 보이게 할 수 있습니다. 이제 나를 볼 수 있어요! seen이 참이라면 p 태그를 출력한다. v-for 지정한 뷰 데이터의 개수만큼 html 태그를 반복 출력합니다. {{ item.text }} v-show v-if와 거의 같습니다. 다른 점은 v-if는 뷰데이터가 거짓이라면 태그를 완전히 삭제하지만, v-show는 css에서 display:none으로 바꿉니다. v-bind html 태그의 기본 속성과 뷰 데이터 속성을 연결합니다. Vue.js v-on 화면 요소의 이벤트를 감지, 처리할 때 사용됩니다. 클릭하세요 v-model 폼에 입력한 값을 Vue 인스턴트 데이터와 즉시 동기화합니다. 즉, 폼 .. 2024. 3. 4. 'React' must be in scope when using JSX react/react-in-jsx-scope 해결법 'React' must be in scope when using JSX react/react-in-jsx-scope 오류 위와 같은 'React' must be in scope when using JSX react/react-in-jsx-scope 오류는 'JSX'를 사용할 때 React가 import되어있지않아 발생하는 오류이다. 해결법 import React from 'react'; React를 import하면 오류가 사라진다. 2023. 5. 7. node.js 다운로드 하기 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 자신의 운영체제와 버전을 확인하고 버튼을 누르면 됩니다. (ex. 윈도우 64비트인 경우 빨간 동그라미 선택) 다운로드 된 파일을 실행시켜 다운로드 받아줍니다. 모두 Next 누르면 됩니다. 설치가 완료가 되었다면 cmd창을 열어 node -v 를 입력하여 설치가 완료되었는지 확인합니다. 2022. 3. 19. 이전 1 다음 728x90 반응형
