머털&보약의 기록

하위(자식)컴포넌트에서 상위(부모) 컴포넌트로 데이터 전달 시 사용하는 속성 //하위컴포넌트인 app-header에 click 이벤트(v-on:click을 @click으로 표현 가능)를 설정 let appHeader = { template: 'click me', //methods 속성에 리벤트 핸들러를 생성 후 this.$emit('이벤트명')으로 이벤트 발생 시킴 //해당 이벤트는 부모 컴포넌트에서 감지해서 처리 가능 methods: { passEvent: function() { this.$emit('pass'); } }, } new Vue({ el: '#app', components: { 'app-header': appHeader, }, }) 결과 버튼 클릭 시 pass라는 이벤트가 발생하는 것 확인..

Vue.js에서 상위(부모)컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할 때 사용하는 속성 const appHeader = { template: 'Header', props: ['propsdata'] } new Vue({ el: '#app', components: { 'app-header': appHeader, }, //전달하려는 데이터 data: { message: '부모 컴포넌트의 메시지', name: '아이언맨', } }) 결과 data 키값 변경 시 변경된 데이터가 자식 컴포넌트에도 표시됨 Root 컴포넌트의 데이터값 변경 시 props로 내려받은 자식 컴포넌트의 데이터에도 적용됨(reactivity) 하위 컴포넌트 추가 후 새로운 props 전달 //appContent라는 하위 컴포넌트 내..

목차 컴포넌트 등록 전역 컴포넌트 등록(플러그인이나 라이브러리 형태로 사용 시) Vue.component('app-header', { template: ' {{ message }} 결과 Root 컴포넌트를 기준으로 계층구조를 이룸 image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org 부모 컴포넌트에서 자식 컴포넌트로는 props 속성으로 데이터 전달 자식 컴포넌트에서 부모 컴포넌트로는 event로 데이터 전달 통신 규칙이 있으면 데이터 흐름 추적이 용이함 reference: https://www.inflearn.com/course/age-of..

인스턴스 뷰 인스턴스는 뷰 개발 시 필수로 생성해야 하는 코드 {{ message }} console.log(vm)에 찍힌 vue 인스턴스의 속성과 API들 new Vue({…})로 인스턴스를 만들고 인스턴스에 미리 정의된 속성과 기능들을 사용 크롬 확장프로그램(Vue.js devtools) 설치 시 브라우저에서 Vue 개발을 더 효율적으로 할 수 있음 인스턴스를 div에 붙이면 인스턴스를 적용한 엘리먼트는 Root 컴포넌트가 됨 생성자 함수 일반함수와 구분하기 위해 함수명 앞이 대문자로 되어 있고 new 연산자를 통해 인스턴스를 생성 생성자 함수에 속성, 기능들을 미리 정의해 놓고 인스턴스를 만들어서 미리 정의된 속성과 기능 사용 reference: https://www.inflearn.com/cour..

Vue.js에서 컴포넌트 등록 시 부모-자식관계가 형성되는데 각 컴포넌트는 데이터를 독립적으로 가지고 있음 부모 자식끼리 데이터를 전달 방법: 부모는 자식에게 내려만 주고, 자식은 부모에게 올려만 준다. 이 때 부모가 사용하는 속성이 props이고 자식이 사용하는 속성이 event emit이다. 이를 활용한 간단한 예제 동영상 내용 정리 부모에서 props를 활용해 부모의 data 중 message를 자식에게 내려주고 자식에서 이벤트 발생 시 부모의 메소드를 실행해서 부모 컴포넌트의 데이터 중 num을 1증가 시킨다. image source: https://v2.ko.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크..

동등연산자와 일치연산자의 차이 간단히 테스트 😎 JavaScript에서 동등연산자(==, !=)를 사용할 경우 자동으로 형변환을 해서 비교하기 때문에 값만 맞으면 맞다고 하고 일치연산자(===, !==)를 사용할 경우 값과 타입까지 비교를 한다. 동영상을 보면 변수 one에는 정수 1이 들어 있고 변수 two에는 문자열 '1'이 들어 있는데 ==를 사용할 경우 true가 나오고 ===인 경우는 false가 return되는게 확인 되었다. 정확한 비교를 위해선 일치연산자를 쓰도록 하자.(비교 연산자 때문에 삽질할 미래의 너에게 하는 말)

Vue.js에서 ajax로 서버에서 데이터 받아와서 테이블에 뿌리는 간단한 예제 cli 환경 기반이라 npm install로 vue.js cli를 설치해야 함(미리 설치한 상태라 동영상에는 설치과정 누락됨) npm install -g @vue/cli cli 설치 후 vue create 프로젝트명으로 cli 기반 vue 프로젝트 생성 vue create vue-test1(생성할 프로젝트명) 아래 명령어로 node.js 런타임을 실행해서 페이지를 띄움 npm run serve 페이지를 띄운 순간부터 vue.js는 데이터가 변경되는 순간 실시간으로 반영한다. mounted(DOM 그린 다음 실행되는 함수) 부분에 console.log() 찍어보면 렌더링을 다시 하는게 보인다. (이놈도 React처럼 가상 DO..

지양하다 더 높은 단계로 오르기 위해 어떤한 것을 하지 아니하다를 뜻하며 이를 더 쉽게 표현하면 '피하다', '하지않다'로 표현할 수 있음 ex) 코딩 시 하드코딩은 될 수 있으면 지양해야 한다. 지향하다 어떤 목표로 뜻이 쏠리어 향하다. ex) 국제사회는 인류평화의 안전을 지향한다. 비슷한 단어지만 뜻은 정반대이므로 정확히 구분해서 사용해야 한다. 출처: https://www.korean.go.kr

설치 환경: MongoDB 6.0.8 몽고DB 설치 후 환경변수까지 잡아 줬는데 mongo 명령어를 찾지 못했다. 구글링 해보니 mongo.exe가 없어져서 mongosh를 다운받아서 사용하라고 한다. 위 사이트에서 sh를 다운로드 후 mongosh.exe와 dll파일을 몽고DB 설치 경로/bin에 복붙 한 다음 cmd에서 "mongosh"를 입력하면 잘된다.(환경변수 세팅 되어 있어야 함) 참조: https://stackoverflow.com/questions/73081708/mongo-exe-not-installed-in-version-6-0-0 mongo.exe not installed in Version 6.0.0 I installed MongoDB community Server from this..