본문 바로가기

분류 전체보기135

소통 대화가 잘 안됐다 소통이 힘들다 말이 안 통한다 모든 인문학을 다 동원해서 할 이야기가 많은 주제이다 많은 사람들이 호소하는 외로움과 좌절의 문제는 말이 통하는 사람이 한 두사람만 있어도 해결이 된다 외로움은 혼자 있어서 외로운게 아니다 말이 안 통하는 사람과 있어서 외로운 것이다 누구나 말이 통하는 사람을 찾아 헤맨다 많은 남성들이 향략산업이나 성산업을 찾는 이유는 외로움 때문이다 자기 말을 무조건 들어줄 사람 토를 달지 않고 들어줄 사람을 찾는 것이다 여성들이나 청소년들은 자기의 말을 들어주는 사람이 없고 자기를을 가르치려는 사람만 있을 때 우울하고 외롭고 폭식 등의 현상으로 나타난다 스스로가 조금 부족하거나 가난하더라도 말이 잘 통하는 친구들이 있으면 살만하다 그만큼 소통이 중요하다 하지만 소통은 .. 2023. 3. 20.
뷰 템플릿 문법 뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 HTML로 변환해주는 속성 뷰 템플릿 문법 Vue는 DOM에 Vue의 데이터와 로직이 연결될 수 있도록 HTML 기반의 문법을 제공 1. 데이터 바인딩 {{ }} 콧수염 괄호를 이용해서 data 등의 속성들을 화면에 나타냄 - bind: 데이터 연결 - computed: 데이터 표현을 더 직관적이고 간결하게 도와주는 속성 {{ message }} {{ doubleNum }} 2. 디렉티브 HTML태그에서 'v-'로 시작하는 속성. 'v-' 속성들을 읽어들여 이벤트를 처리 - v-bind:id: id를 연결. DOM의 정보까지 리액티브하게 변경할 수 있다 - v-bind:class: class를 연결 - v.. 2023. 1. 14.
Axios Axios 액시오스 뷰에서 권고하는 HTTP 통신 라이브러리 Promise 기반의 HTTP 통신 라이브러리 ※ Promise 란? - 자바스크립트에서 비동기 처리에 사용되는 객체 ※ 비동기 처리란? - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특성 액시오스 설치 CDN https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser a.. 2023. 1. 11.
Vue Router Vue Router 뷰 라우터 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 라우터란 네트워크에서 데이터를 송수신하는 장치를 의미 웹에서 라우터는 웹 페이지 간의 이동하는 방법 및 경로를 설정 뷰 라우터 설치 - CDN vue링크 하단에 vue-router링크를 추가한다 인스턴스 VueRouter를 생성한다 Vue의 router 속성에 사용할 라우터를 넣는다 var router = new VueRouter({ // VueRouter라는 인스턴스를 router라는 변수에 담음 }); new Vue({ el: '#app', router: router // Vue의 속성 중에는 router가 있고, 여기에 위에서 정의한 변수 router를 넣음 }); 라우터에 페이지 정보 넣기 인스턴스 VueRou.. 2023. 1. 11.
Emit Emit 에밋 emit은 발산, 내뿜다라는 뜻이 있다. 하위 컴포넌트가 상위 컴포넌트와 통신 하기위해서는 하위에서 이벤트를 발생시켜 상위로 올린다. 이벤트를 올릴 때 사용하는 것이 $emit()이다. emit은 뷰에서 제공하는 api(기능)이다. v-on:하위 컴포넌트 이벤트="실행할 상위 컴포넌트 메소드" var appHeader = { template: 'Click me', // 버튼을 클릭했을 때 실행될 함수(메소드) passEvent methods: { passEvent: function() { this.$emit('pass'); // 상위로 보낼 이벤트 pass } } } new Vue({ el: '#app', components: { 'app-header': appHeader }, method.. 2023. 1. 5.
Props Props 프롭스 Properties의 약자로 부모컴포넌트로부터 자식컴포넌트가 데이터를 받기 위해 사용하는 속성이다. 자식컴포넌트에 props:[프롭스이름]을 정의하고, 가져올 상위 컴포넌트 '데이터이름을' 매칭한다. v-bind:프롭스속성이름="상위컴포넌트데이터이름" 로 데이터를 불러오고 {{ 프롭스이름 }}으로 데이터 사용 var appHeader = { template: '{{ propsdata }}', // 프롭스 이름으로 데이터 사용 props: ['propsdata'] // 하위 컴포넌트 프롭스 이름 정의 } new Vue({ el: '#app', components: { 'app-header': appHeader }, data: { message: 'hi' // 상위 컴포넌트 데이터 } }).. 2022. 11. 13.
반응형

티스토리툴바