공부방

유투브 영상들을 검색하고 검색한 썸네일을 출력하기 YoutubeView.vue 유튜브 전용페이지 ============================================================== index.js import Vue from "vue"; import Vuex from "vuex"; import axios from "axios"; Vue.use(Vuex); export default new Vuex.Store({ state: { videos: [], video: null, }, getters: {}, mutations: { SEARCH_YOUTUBE(state, videos) { state.videos = videos; }, }, actions: { //비동기 통신은 요기서 진..

프로젝트 생성 vue create vue-todo-app->cd로 들어가기->vue add vuex 브라우저 화면에 띄우기 App.vue 우리의 할일 ============================================================= TodoWrite.vue 할일 작성 ============================================================= TodoList.vue 할일 목록 글 등록 Write(dispatch를 사용하여)->Vuex(Actions)(commit으로)->mutation->state TodoWrite.vue 할일 작성 등록 ===========================================================..

Vue.js 애플리케이션에 대한 상태관리패턴+라이브러리 애플리케이션 모든 컴포넌트들의 중앙 저장소 역할(데이터 관리) 부모 자식 단계가 많이 복잡해진다면 데이터의 전달하는 부분이 매우 복잡해짐. 애플리케이션이 여러 구성 요소로 구성되고 더 커지는 경우 데이터를 공유하는 문제 발생 비 부모-자식간 통신 두 컴포넌트가 통신할 필요는 있지만 서로 부모/자식이 아닐수도 있다. 비어 있는 Vue Instance 객체를 Event Bus로 사용 상태 관리 패턴 상태는 앱을 작동하는 원본 소스(데이터) 뷰는 상태의 선언적 매핑입니다(상태를 보여주는 화면) 액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법(메소드) Vuex 핵심 컨셉 Vuex 저장소 개념 State : 단일 상태 트리 사용(데이터를 저장..

Priority A : Essential(필수) 컴포넌트 이름에 합성어 사용 root 컴포넌트인 App과 , 등 Vue에서 제공되는 빌트인 컴포넌트를 제외하고 컴포넌트의 이름은 항상 합성어를 사용해야 한다. 모든 HTML 요소의 이름은 한 단어이기 때문에 합성어를 사용하는 것은 기존 그리고 향후 HTML 요소와의 충돌을 방지 컴포넌트 데이터 컴포넌트의 data는 반드시 함수여야 한다. 컴포넌트(new Vue를 제외한 모든 곳)의 data 프로퍼티의 값은 반드시 객체(object)를 반환하는 함수여야함. Props 정의 Prop은 가능한 상세하게 정의되어야 한다. 적어도 타입은 명시되도록 가능한 상세하게 정의 v-for에 key 지정 서브트리의 내부 컴포넌트 상태를 유지하기 위해서 v-for는 항상 key..

AJAX JavaScript는 Single thread가 하나이다. 비동기식 JavaScript와 XML 서버와 통신을 하기 위해서 XMLHttpRequest객체(옛날 방식)를 활용 JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있음 페이지 전체를 '새로고침'하지 않고서도 수행되는 "비동기성"(일 부분만 업데이트 가능) 콜백 함수를 매개변수로 전달하여 나중에 실행하도록 하는 것 콜백이 중첩되면, 콜백 헬이 되어 해석하고 유지보수하기 힘든 코드가 될 우려(스파게트 코드) Promise Object 비동기 작업을 마치 동기 작업처럼 값을 반환해서 사용 형태 미래의 완료 또는 실패와 그 결과 값을 나타냄 미래의 어떤 상황에 대한 약속 new Promise(fun..

Vue Router 중계기 라우팅 : 웹 페이지 간의 이동 방법 Vue.js 라우트(route)에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려줌 SPA상에서 라우팅을 쉽게 개발할 수 있는 기능을 제공 URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여줌 Vue Router 설치 CDN방식 NPM 방식 npm install vue-router Vue CLI vue add router 프로젝트를 진행하던 중에 추가를 하게 되면 App.vue를 덮어쓰므로 백업을 해두고 추가할 것 App.vue 안녕 터미널에 vue add router를 작성하여 CLI형식으로 router 등록하면 이렇게 뜬다. SSAFY@DESKTOP-DOGVPUB MINGW64 ~/Desktop/test/vue-router-..

Command Line Interface(명령줄 인터페이스) Vue.js 개발을 위한 표준 도구 Vue.js에서 공식으로 제공하는 CLI 개발의 필수는 아니지만 개발의 편리성을 위해 필수처럼 사용 Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩을 제공 Vue와 관련된 오픈 소스들의 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있음 NPM(Node Package Manager) Command에서 third party 모듈을 설치하고 관리하는 툴 cmd에다가 설치하기 NPM 명령어 npm init : 새로운 프로젝트나 패키지를 만들 때 사용(package.json이 생성됨) npm install 패키지 : 생성되는 위치에서만 사용 가능한 패키지로 설치 npm install -g 패키지 : 글로벌 패키..

JavaScript Module Module 프로그램을 기능별로 여러 개의 파일로 나누는 형태 브라우저의 지원 여부 확인 Module 시스템 CommonJS(NodeJS)-웹 브라우저 밖에서도 동작될 수 있는 모듈 규칙 설립 AMD(Asynchronous Module Definition)-비동기적으로 모듈을 로딩 ESM(ECMAScript Module, ECMA215, es6)-자바스크립트 자체 모듈 Module 정의 및 사용 가져오기 : import 내보내기 : export module1.js const title = "계산기 모듈"; function add(i, j) { return i + j; } function sub(i, j) { return i - j; } export { title, add,..

Instance Life Cycle Hooks 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 걸친다. 데이터 관찰 설정이 필요한 경우 템플릿을 컴파일하는 경우 인스턴스를 DOM에 마운트(연결)하는 경우 데이터가 변경되어 DOM을 업데이트 하는 경우 그 과정에서 사용자 정의 로직을 실행할 수 있는 Life Cycle Hooks도 호출 크게 4개의 파트(생성, 부착, 갱신, 소멸)로 나뉜다. 모든 Life Cycle Hooks는 자동으로 this 컨텍스트를 인스턴스에 바인딩하므로 데이터, 계산된 속성 및 메소드에 접근 가능(화살표 함수 사용 X) beforeCreate / created {{count}} 증가 beforeMount / mounted {{count}} 증가 beforeUpdated / ..

Template Syntax Vue.js는 랜더링된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML기반 템플릿 구문 사용 보간법(Interpolation) 디렉티브(Directive) 보간법-Text(문자열) 데이터 바인딩의 가장 기본 형태 "Mustache"구문(이중 중괄호)을 사용한 텍스트 보간. 메시지: {{msg}} Mustache 태그는 데이터 객체의 msg 속성 값으로 대체(해당 값이 변경되면 갱신) v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행 다시는 변경하지 않습니다: {{msg}} {{msg}} {{msg}} vue객체의 msg부분의 하하를 후후로 바꾸면 밑의 v-once는 바뀌지 않는다. 보간법-Raw HTML(원시..