infinity : 무한한 성장가능성

vue를 사용하면서 헷갈렸던 methods 와 computed 와 watch 를 비교하며 정리해보자. Computed 속성 computed 속성을 사용할 값의 이름을 정의하고 return 에 종속될 데이터를 정의한다. return 에 정의된 데이터가 변경될 때 computed 에 정의된 로직이 실행된다. Methods vs Computed 속성 👉 computed 속성을 사용하는 이유를 알아보자 구현하려는 것) message 와 message 가 역순으로 변경된 reverseMessage를 한 화면에 표시되도록 만들어야 한다. 👉 방법 1) methods 사용 위의 코드를 설명해보자면 맨 위 div는 message의 역순텍스트를 출력해 주는 부분이다. 두 번째 줄의 div는 message 값을 입력하는 ..

회사 입사 후 처음으로 맡게 된 프로젝트가 vue를 통해 화면을 개발해야 하는 프로젝트였기 때문에 다른 동기들보다 vue에 대해 일찍 공부를 시작하게되었다. 따라서, 가끔 동기들이 vue 관련 잘 안 되는 것이나 궁금한 것에 대해 물어보곤 한다.. 최근에 친한 동기가 spa 의 개념에 대해 물어보았다. 문득 spa 가 뭐야? 하면 단일페이지 애플리케이션..! 만 대답할 수 있지 정확히 spa가 무엇이냐는 것에 대해 명확하게 대답하지 못하는 나를 발견했다. 🤦‍♀️ 그래서 spa 가 무엇인지 정리해보고자 한다. SPA (Single Page Application) SPA는 웹 드라우저가 전체 새 페이지를 로드하는 방법 대신 웹 서버의 새 데이터로 웹페이지를 동적으로 재작성하여 사용자와 상호작용 하는 웹 애..

vue 데이터 호출 시점 1) 컴포넌트 라이프 사이클 훅 - created : 인스턴스가 생성되자마자 실행되는 로직들 - data observation, computed properties, methods, watch/event callbacks 에 접근가능.. 2) 라우터 네비게이션 가드 - 네비게이션 가드란? 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법 - 특정 URL 로 접근하기 전의 동작을 정의하는 속성(함수) var router = new VueRouter(); router.beforeEach(function(to,from,next) { // to: 이동할 URL // from: 현재 URL // next: to에서 지정한 URL로 이동하기 위해 꼭 호출해야 하는 함수 ..

동적 라우터에 대한 공식문서는 https://router.vuejs.org/guide/essentials/dynamic-matching.html 요기있다. 동적 라우터의 핵심은 특정 페이지의 정보를 가지고 다음 페이지를 이동할 수 있다는 것 이다. //routes하단의 index.js { path:'/basic/:id', component:BasicView } //BaicView로 넘어갈 컴포넌트 코드에서 router-link를 이용한다. // 와 의 차이 알아보기 특정 라우터로 이동할 때 위처럼 path: '/bacsic/:id' -> :id 이렇게 해준다면.. params에 id값이 넘어가게 된다. click 위 코드와 같이 router-link 로 to 에 해당 click를 눌렀을때 이동하고 싶은 ..

vue router //main.js import Vue from 'vue' import App from '.App.vue' import {router} from './routes/index.js' new Vue({ render: h=>h(App), router }).$mount('#App') //router은 위 코드에서 export 한 router 정보를 담고있는 변수이다. main.js 는 애플리케이션의 설정들(플러그인&라이브러리,구조)들을 파악할 수 있는 설계도 느낌 routes 폴더를 src 밑에 만들고 해당 폴더에 index.js 라는 파일을 생성하자 VueRouter 객체는 router 에 대한 정보를 관리하는 vueRouter 객체 //index.js import Vue from 'vue'..

명령어 - 2.x: vue init '프로젝트 템플릿 이름' '파일 위치' -3.x: vue create '프로젝트 이름' 웹팩 설정 파일 - 2.x :노출 O -3.x: 노출 X 프로젝트 구성 -2.x: 깃헙의 템플릿 다운로드 -3.x: 플러그인 기반으로 기능 추가 ES6 이해도 -2.x: 필요 X -3.x: 필요 O

refs란? vue에서 특정 요소나 컴포넌트를 참조할 수 있도록 해주는 것 refs를 사용하지 않고 특정 요소를 찾는 방법으로는 querySelector을 이용하는 것이다 -> console.log에서 출력되는 것은 h1 요소 안에 들어간 Hello world 라는 텍스트이다. refs를 사용한 예) -> 주의할 점은 해당 요소 (ref 로 참조하는 것들) 은 컴포넌트가 html 구조와 연결된 직후에만 사용할 수 있기 때문에 created라는 라이프 사이클에서는 사용불가능 하다. 🤔 querySelector 와 ref 가 비슷한거 같은데 그럼 뭘 쓰는게 좋은거지? 무슨 차이가 있을까? -> 성능이 포인트가 될 수 있다고 한다. -> ref를 사용하면 컴포넌트 인스턴스를 얻을 수 있는데. querySele..

각 컴포넌트 사이에서 데이터를 전달하는 방법에는 상황에 따라 여러가지가 있다. Store 라는 개념또한 컴포넌트사이에서 데이터를 전달하기 위해 사용되는 방식중 하나인데 Store는 어떨때 필요할까??? 그 전에 각 상황에 따른 컴포넌트 간의 데이터 전달 방법에 대해 알아보자 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 Props를 통해 전달한다. 상/하위 컴포넌트 관계에서는 Provide/Inject 로 데이터를 전달할 수 있다. 형제 컴포넌트들 끼리의 데이터는 어떻게 전달할까? 위와같은 상황에서 Search에서 MovieList로 데이터를 넘겨줘야할 때 두 컴포넌트의 관계는 형제관계이다. 🤔 이때 데이터를 어떻게 넘겨줘야할까? -> 방법은 Home이라는 부모 컴포넌트로 데이터를 전달해 Movie..

Vue 하면 항상 나오는 단어인 SPA라는 말이 있다. 아니 이게 단일 페이지~ 어쩌구를 말하는 건 알겠는데 이게 뭐고 어떤 장점 & 단점이 있는지 정확히 알아보려고 한다. SPA에 대해 궁금하다면 밑의 내용을 읽어보자~😎 🤔 SPA를 알아보기 전 전통적인 웹 애플리케이션은 어떻게 동작을 하는지 먼저 알아보자 👉 Traditional Web Application (전통적인 웹 애플리케이션) 사용자가 데이터를 요청할 때마다 페이지를 로드해야 한다는 단점을 갖고 있다. 위의 그림을 말로 풀어보자면.. 사용자가 google.com이라는 사이트에 처음 접속하면 해당 url에 해당하는 페이지를 서버에 요청하고 서버는 요청에 해당하는 html 파일을 내려준다. 이후 사용자가 google.com/about에 해당하는..