GO CAN DO IT

Bean의 Scope는 기본적으로 싱글톤이다. 프로그램 구동시 Bean의 인스턴스는 오직 하나라는 뜻이다. Bean이 가질수 있는 Scope 는 싱글톤 외에 매번 인스턴스를 새로 생성하는 ProtoType 도 있다. 만약, 프로토 타입 빈이 싱글톤 빈을 참조하면 어떻게 될까? 매번 프로토타입의 빈은 새로운 인스턴스로 생성되고, 그 인스턴스들이 바라보는 싱글톤 빈은 동일한 인스턴스일 것이다. 이럴 때는 아무런 문제가 되지 않는다. 그렇다면, 싱글톤 빈이 프로토 타입 빈을 참조하면 어떻게 될까? 싱글톤이 생성 된 이후에 프로토타입 빈이 변경이 되어도 해당 내용이 업데이트가 되지 않는다. 이를 업데이트하려면 Scoped-proxy값을 설정해주거나, 참조시 참조 객체를 Object-Provider 리스트로 감싸..

여기 BookRepository 객체와, BookRepository 객체를 사용하는 BookService 객체가 있다고 가정해보자. 그리고 이 BookService 객체에서 BookRepository 객체를 주입받아야 하는 상황에서 BookService는 Bean으로 등록을 해주고, BookRepository 는 Bean으로 등록을 하지 않았다고 해보자. // #1. BookService @Service public class BookService { BookRepository bookrepository; @Autowired public void BookService(BookRepository bookRepository){ this.bookRepository = bookRepository; } } // ..

#스프링 IoC 토비의 스프링에서 먼저 공부한 스프링 IoC에 대해 다시 한번 리마인드를 해보자. First, IoC stands for Inversion Of Control 즉 제어의 역전이라는 뜻이다. 스프링 프레임워크 안에서의 객체들은 자신들이 사용할 객체들을 스스로 생성하지도 않고, 자기 자신들도 어디서 사용되는지 알 수가 없다. 오브젝트들의 생성과 책임에 대한 제어가 오브젝트 스스로에게 있지 않고, 이 권한을 위임한 다른 특별한 오브젝트에게 있다! 오브젝트의 입장에서는 그 특별한 오브젝트로부터 생성과 책임에 대해 제어를 받으니 control의 방향이 inversed 된 것이다. 그리고 이러한 IoC방식에서 말하는 특별한 Object를 Application Context, 제어권이 없는 오브젝트들..

화면단과 서버간의 통신을 위하여 axios 통신을 구현해 보았다. 먼저 아래의 명령어를 통해 axios 라이브러리를 설치해준다. $vue add axios Main.js에 다음과 같이 axios 설정을 해준다. import Vue from 'vue' import './plugins/axios' //####이부분 import App from './App.vue' //####이부분 import router from './router' import vuetify from './plugins/vuetify' //import axios from 'axios' Vue.prototype.$http = axios //####이부분 new Vue({ el: '#app', router, vuetify, axios, //#..

뷰에서는 라우터를 통해 뷰 파일과 url 을 연결해주는 기능을 제공한다. 뷰 예제에서는 보통 App.vue에 직접 라우터 경로를 임포트 하고, 해당 라우터 객체를 뷰인스턴스의 변수로 사용했다. 아래의 코드처뤔. 하지만, 대형 프로젝트에서는 이렇게 하지 않고 index.js라는 파일을 통해 라우터를 한꺼번에 관리한다. $mkdir router $cd router $vi index.js 를 통해 router라는 디렉토리를 하나 만들고, index.js라는 파일을 생성해주었다. 프로젝트 구조는 다음과 같아졌다. - src - components - router - index.js - App.vue main.js에서 우선 설정을 해준다. // 1. main.js import Vue from 'vue' impor..

이제 실제로 내가 뷰 프로젝트를 개발해보도록 하겠다. 백쪽은 JPA로 구현할거라서 우선, 통신은 구현하지않고 화면이랑 공통 레이아웃을 기준으로 우선 프론트쪽을 구현해보겠다. 가장 먼저 할 것은 바로 vuetify 설치! vuetify를 사용하기 위해 먼저 터미널에서 작업하려는 폴더로 이동 후, vuetify 를 깔아준다. $cd vue-form $vue add vuetify 뷰티파이 공식 사이트는 api 설명이 친절하게 잘되어있어서 여기꺼 보고 거의 따라하는 식으로 구현했다. https://vuetifyjs.com Navigation drawer component The navigation drawer component contains internal navigation links for an appli..

이번에는 $ vue create vue-form $ cd vue-form $ npm run serve 명령어를 통해 vue-form 패키지를 만들고 작업을 해주었다. 새로 작성한 App.vue 소스는 다음과 같다. // App.vue id: pw: login 여기서 추가적으로 event.preventDefault() 는 기본적으로 과거 자바스크립트에서 사용되었던 문법이고, Vue에서는 form 태그의 submit 속성값으로 prevent를 넣어줄 수 있다. // event.preventDefault()를 주석처리 submitForm : function () { //event.preventDefault(); console.log('username' + this.username); console.log('p..

App.vue 파일을 활용해서 한번 화면에 데이터를 뿌려보도록 하자. 기존에 html 소스 안에서 뷰 인스턴스를 생성했던 방법과는 아주 조금 다르다. 코드를 통해 알아보자 {{str}} #1. 싱글 파일 컴포넌트에서 html 을 선언할 때는, 가장 상위에 div 태그를 하나 선언하고 , 그 안에 header던, body던 생성을 해줘야 한다. #2. 기존에 html 파일에서 뷰 인스턴스 객체를 선언하고 주입해주었던 방식 #3. 싱글파일 컴포넌트에서는 이런식으로 변수를 선언해주면 안되고 #4. 방식으로 선언을 해주어야 한다. 그 이유는, 여러 객체들의 재사용성을 높이기 위함으로 변수를 함수형으로 선언하고 , 해당 값을 리턴해주는 형태로 사용한다. #싱글파일 컴포넌트 체계에서 컴포넌트 등록하기 컴포넌트를 등..

Vue CLI 를 사용하기 위해서 https://cli.vuejs.org/guide/installation.html 에 접속해서 명령어를 확인하고, 비주얼 스튜디오 코드에서 터미널을 열어 해당 명령어들을 실행해준다. npm install -g @vue/cli # OR yarn global add @vue/cli 뷰 버전이 4가 넘어가면 defaule( ver2) 로 설정해주어야 한다. 🎉 Successfully created project vue-cli. 👉 Get started with the following commands: $ cd vue-cli $ npm run serve gayoung@yungayeong-ui-MacBookAir learn-vue-js-master % cd vue-cli gay..

watch는 뷰 인스턴스의 어떤 데이터가 변경되면 이를 감지해주는 기능이다. 뷰 인스턴스 내 watch를 선언하고 어떤 변수를 watch 할 것인지, 어떤 행위를 할 것인지 정해주면 된다. 코드로 알아보자. {{num}} increase 이 코드는 아래와 같이 실행된다. 버튼이 눌릴 때마다 num값이 증가하고, num값의 변화를 watch가 감지하고 있다가 콘솔로그를 출력한다. computed 와 watch 둘 다 특정 데이터가 변경되면 실행되는 속성이라는 점은 같지만, 뷰 공식문서에서는 watch보다 computed를 사용할 것 을 권장하고 있다. 캐싱이나 튜닝이 더 잘되어 있기 때문이다. Vue does provide a more generic way to observe and react to dat..