IT/development205

• 

  [Vue.js] 뷰 디렉티브(v-로 시작하는 속성들을 의미) 목차 v-bind(:콜론 바인딩으로 줄임 가능) {{ num }} 결과 v-if(조건문) 관리자 사용자 그 외 new Vue({ el: '#app', data: { auth: '관리자', } }) 결과 개발자 vue도구에서 data 변경 시 데이터도 변경됨 v-show(show, hide) 관리자 사용자 그 외 관리자 js코드는 위와 동일 결과 v-model(:콜론 바인딩으로 줄임 가능)(데이터 동기화) {{ userName }} new Vue({ el: '#app', data: { userName: '', } }) //아래처럼 javascript나 jQuery를 사용해서 dom에 접근해서 변경할 필요가 없음 //let userName = $("#userName").val(); //let userName.. IT/development 2023. 7. 27.

• 

  [Vue.js] ajax api 호출(feat. axios) get users {{ users }} 결과 IT/development 2023. 7. 27.

• 

  [Vue.js] event emit(자식 → 부모) 하위(자식)컴포넌트에서 상위(부모) 컴포넌트로 데이터 전달 시 사용하는 속성 //하위컴포넌트인 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라는 이벤트가 발생하는 것 확인.. IT/development 2023. 7. 26.

• 

  [Vue.js] Props(부모 -> 자식) 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라는 하위 컴포넌트 내.. IT/development 2023. 7. 26.

• 

  [Vue.js] 컴포넌트(재사용 유용) 목차 컴포넌트 등록 전역 컴포넌트 등록(플러그인이나 라이브러리 형태로 사용 시) 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.. IT/development 2023. 7. 26.

• 

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

• 

  [Vue.js] 컴포넌트끼리의 데이터 전달(feat. props, event emit) 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 - 프로그레시브 자바스크립트 프레임워크.. IT/development 2023. 7. 26.

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

• 

  [Vue.js] ajax로 데이터 조회 예제(feat. axios) 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.. IT/development 2023. 7. 23.

• [ChatGPT] ChatGPT 고맙다. IT/development 2023. 7. 22.