infinity : 무한한 성장가능성

자료 추상화 변수 사이에 함수라는 계층을 넣는다고 구현이 감춰지는 것이 아니다. -> 구현을 감추기 위해서는 추상화가 필요하다 -> 즉, 추상 인터페이스를 제공해 사용자가 구현을 모른 채 자료를 조작할 수 있어야 진정한 의미의 클래스이다. -> 하지만, 인터페이스나 조회/설정 함수만으로 추상화가 이뤄지는 것은 아니고 개발자는 객체가 포함하는 자료를 표현할 좋은 방법을 선택해야 한다. public interface Vehicle { //조회함수 제공한다고 추상화가 되는 것은 아닌.. 예 double getFuelTankCapacityInCallons(); double getGallonsOfGasoline(); } public interface Vehicle { // 좋은 추상화의 예 double getPe..

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

자바에서 인터페이스와 관련된 메서드는 한 몸처럼 구성됨 즉, 인터페이스를 구현하는 클래스는 인터페이스에서 정의하는 모든 메서드를 구현 or 슈퍼클래스(부모클래스)의 구현을 상속받아야 함 만약, 인터페이스에 어떤 메서드를 추가한다면? 인터페이스를 상속하는 모든 클래스가 해당 메서드를 추가로 구현해야하는 문제 발생 즉, 모든 클래스에 변경이 생긴다.. 위의 문제를 해결하기위해 자바 8에서는 인터페이스를 정의하는 두 가지 방법을 제공한다. 첫번째 방법) 인터테이스 내부에 정적 메서드를 사용하는 것 두번째 방법) 인터페이스의 기본 구현을 제공할 수 있도록 디폴트 메서드를 사용하는 것 디폴트 메서드란? 1) 인터페이스 안에 default라는 키워드로 시작한다. 2) 메서드 바디를 포함한다. ->디폴트 메서드 예 ..

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에 해당하는..