infinity : 무한한 성장가능성

회사 입사 후 처음으로 맡게 된 프로젝트가 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..

1) control+command+o -> 사용하지 않는 import 자동정리

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

팩토리 패턴을 적용하지 x 때 -> Component 타입으로 선언된 객체 comp1~3이 존재한다. -> comp1~3은 각각 Button, Switch, Dropdown 중 하나를 선택해 값을 넣어준다. (withoutFactory) 팩토리 패턴을 적용한다면? -> 다른클래스 즉 Factory안에서 주어진 조건 (Usage usage)에 따라 적절한 것을 생성해 반환 값으로 나오는 객체를 값으로 넣어줌 🤔 팩토리 패턴을 적용하면 무슨 장점이 있을까? if) Button을 생성하는 생성자가 변경되고, Button객체를 생성하는 부분의 코드가 여러 곳에 분포되어 있다면 해당 코드를 하나씩 찾아서 새 생성자 형식에 맞게 코드들을 변경해줘야 함 즉 , 객체의 생성을 하는 코드들이 많으면 많을 수록 객체의 생..