스가영

안녕하세요 오늘은 서비스 프로바이더와 파사드에 대해 알아보도록 하겠습니다.

서비스 프로바이더의 역할은 서비스컨테이너에 바인딩을 등록하는 역할을 합니다.
프로바이더는 register 와 boot 메소드를 가지고 있습니다.
register의 역할은 서비스컨테이너에 등록하는 역할을 수행합니다.
예제를 들어보겠습니다.

<?php 

namespace App\Providers; 

use Riak\Connection; 
use Illuminate\Support\ServiceProvider; 

class RiakServiceProvider extends ServiceProvider 
{ 
    /** 
     * Register bindings in the container. 
     * 
     * @return void 
     */ 
    public function register() 
    { 
        $this->app->singleton(Connection::class, function ($app) { 
            return new Connection(config('riak')); 
        }); 
    } 
} 

위의 예제는 라라벨 공식홈페이지의 내용입니다.
RiakServiceProvider클래스를 만들고  serviceProvider를 상속받습니다.
그후 레지스터 메서드를 작성하고 그안에 $this-app을 이용하여 서비스컨테이너에 등록하고 싶은 클래스를 등록합니다.
boot 메소드는 모든 서비스프로바이더의 register가 작업을 수행한 뒤 실행됩니다.

부트스트래핑 과정에 필요한 작업이 있다면 작성하여 사용 하면 됩니다.
마지막으로 config/app.php에 서비스 프로바이더를 등록하여 사용하면 됩니다.

파사드

파사드는 쉽게 말해서 static 메서드의 제공입니다.

보통 클래스들은 static을 붙여 정적 클래스를 제공하지만, 파사드를 사용하면 static을 붙이지 않고서도 정적메서드로써 사용가능합니다.

예제를 보며 알아보겠습니다.

class Test extends Facade
{
    /**
     * Get the registered name of the component.
     *
     * @return string
     */
    protected static function getFacadeAccessor()
    {
        return "test";
    }
}

Facade클래스를 상속받아, getFacadeAccessor메서드 안에 정적클래스로 사용하고싶은 클래스를 작성해 줍니다.

우선 파사드 클래스를 상속받아 getFacadeAccessor메서드 안에 정적클래스로 사용하고싶은 클래스를 작성해 줍니다.
그후 return 값의 값을 이용하여 서비스컨테이너로 부터 test 라는 이름의 바인딩 객체를 찾아 메소드를 호출합니다.

즉, 파사드를 사용하기 위해선 서비스 프로바이더의 등록도 필요하다는 것을 알수 있습니다.

그리고 파사드도 app/config.php에 이름을 등록하여 사용해 줍니다.

여기까지 서비스 프로바이더와 파사드를 알아보았습니다.

다음 포스팅에는 라라벨의 기능들에 대해 알아보도록 하겠습니다.

안녕하세요 이번에는 라라 벨의 서비스 컨테이너에 대해 알아보도록 하겠습니다!

전 처음에 이 서비스 컨테이너에 정의가 제대로 잡히지 않아서 좀 고생했었습니다. :(

우선!

라라벨 홈페이지에 나오면 서비스 컨테이너의 정의부터 보시면,

라라 벨의 서비스 컨테이너는 클래스의 의존성을 관리하고 의존성을 주입하는 강력한 도구입니다. 의존성 주입이라는 멋진 말의 의미는 다음과 같습니다: 클래스 간의 의존성은 클래스 생성될 때 또는 경우에 따라 "setter" 메서드에 의해서 "주입" 된다는 의미입니다.

라는 말이 나와있습니다.

여기서 의존성주입 이란 단어를 이해하시면 라라 벨 서비스 컨테이너에 대해 보다 쉽게 접근하실 수 있습니다.

의존성 주입이란, 기존에 존재하는 디자인 패턴 중의 하나로 DI (Dependency Injection)이란 말로 많이 알려져 있습니다.

(구성요소 간의 의존 관계가 소스코드 내부가 아닌 외부의 설정 파일 등을 통해 정의되게 하게 만드는 것)

??

소스코드 내부가 아닌 외부의 설정 파일이라.. 무슨 말이지??라고 생각하실 수 있습니다.

여기서 의존성 주입이라는 단어를 제외하고 코드를 한번 작성해 보겠습니다.

class TestLaravel{
 public function __construct() {
  $sql = new Mysql();
 }
}

class Mysql {
}

class Test {
 public function test(){
  $testLaravel = new TestLaravel();
 }
}

위의 코드에서 문제점이 보이시나요?

겉보기엔 아무 문제없는 코드인데 뭐가 문제지?라는 생각을 하실 수 있습니다.

하지만 TestLaravel 클래스는 Mysql클래스를 의존하고 있는 것입니다.

이게 왜?라는 질문이 있을 수 있습니다.

만약 여기서 Test클래스는 Mysql 말고 MongoDB도 필요한 작업들이 생긴다고 가정해보겠습니다.

그렇게 되면 TestLaravel은 mongoDB를 가져오는 인스턴스를 또 만들어야 하는 작업들이 귀찮은 작업들이 생기게 되는 겁니다. 이게 1~2개면 뭐 상관없지만, 100개 200개 300개가 되는 순간 지옥의 시작입니다.. :(

여기서 저희들은 의존성 주입이란 것을 이용해 보도록 하겠습니다.

class TestLaravel{
 protected $sql = null;

 public function __construct(DBInterface $sql) {
  $this->sql = $sql
 }
}

class Mysql implements DBInterface{
}
class MongoDB implements DBInterface{
}

interface DBInterface {
}


class Test {
 public function test(){
  $mongoDB = new MongoDB();
  $mysql = new Mysql();
  $mongoDBTestLaravel = new TestLaravel($mongoDB);
  $mysqlTestLaravel = new TestLaravel($mysql);
 }
}

달라진 점은 interface를 이용한다는 점!

이렇게 함으로써 TestLaravel을 사용할 때 mongoDB가 됐든, mysql이 됬든 상관없이 먼저 인스턴스를 만들고 값을 넣어줌으로써, TestLarvel클래스는 수정 없이 바로바로 사용할 수 있게 된다는 점입니다!

이제 여기까지 의존성 주입을 알아봤는데요.

이게 왜 서비스 컨테이너랑 무슨 상관인데?라는 의문이 들 수 있습니다.

서비스 컨테이너는 프로바이더의 $this->app 속성을 통해서 컨테이너 인스턴스에 접근할 수 있다는 점입니다.

(프로바이더는 다음장에 배우도록 하겠습니다.)

$this-app이 서비스 컨테이너 자체이자 위의 예제에서 썼던 인터페이스 역할을 하고 있는 것입니다.

예제를 보겠습니다.

$this->app->bind('HelpSpot\API', function ($app) {
    return new HelpSpot\API($app->make('HttpClient'));
});

위의 예제는 라라 벨 공식 홈페이지의 예제입니다.

$this-app을 이용하여 컨테이너 인스턴스에 접근한 뒤 bind메서드를 사용하여 HelpHelpSpot\API의 인스턴스를 의존성 주입하는 모습입니다.

여기서 딱 한 번만 더 강조하자면 $this-app이 서비스 컨테이너 인스턴스에 접근할 수 있다는 점! 

이렇게 라라 벨의 서비스 컨테이너에 대해 알아보았습니다. :)

다음장에는 서비스 프로바이더, 파사드에 대해 알아보도록 하겠습니다. 

안녕하세요 이번에는 라라벨을 알아보도록 하겠습니다.

라라벨은 PHP 프레임워크로써 테일러 오트웰이 개발하였습니다. MVC(model - view - controller)패턴에 따라 웹 애플리케이션을 개발하기 위해 고안되었습니다. 현재 2019-05-03 기준으로 라라벨은 버전 5.8 까지 나와있는 상태로 계속해서 새로운 버전으로 업데이트 되고있습니다.

라라벨 공식 홈페이지 : https://laravel.com/

라라벨 공식 홈페이지 한국: https://laravel.kr/

설치하기

설치법은 매우 간단하고, 2가지 방법이 있습니다.

컴포저로 라라벨 인스톨러를 다운받고 디렉토리를 인스톨하는 방법과, 컴포저로 직접 라라벨 디렉토리를 인스톨 받는것

어느 방법을 이용하더라도 컴포저는 필수이기 때문에, 컴포저가 없으신 분들은 컴포저를 우선 다운 받아 주시기 바랍니다. :)

기준은 라라벨 5.8

컴포저로 직접 라라벨 디렉토리를 인스톨 하도록 하겠습니다.

composer create-project --prefer-dist laravel/laravel laravelTest

로컬환경이라면 

php artisan serve

위의 아티즌 명령어를 이용하여 개발서버를 시작할수 있습니다.

http://localhost:8000

여기까지 라라벨은 설치 되었고 기본페이지까지 볼수 있습니다.

디렉토리 구조

이제 디렉토리 구조에 대해 알아보도록 하겠습니다.

├─app
│  ├─Console
│  ├─Exceptions
│  ├─Http
│  │  ├─Controllers
│  │  │  └─Auth
│  │  └─Middleware
│  └─Providers
├─bootstrap
│  └─cache
├─config
├─database
│  ├─factories
│  ├─migrations
│  └─seeds
├─public
│  ├─css
│  └─js
├─resources
│  ├─js
│  │  └─components
│  ├─lang
│  │  └─en
│  ├─sass
│  └─views
├─routes
├─storage
│  ├─app
│  │  └─public
│  ├─framework
│  │  ├─cache
│  │  │  └─data
│  │  ├─sessions
│  │  ├─testing
│  │  └─views
│  └─logs
├─tests
│  ├─Feature
│  └─Unit
└─vendor

app

라라벨 애플리케이션의 핵심코드가 들어있습니다.

현재 중요하게 볼 곳은 Http디렉토리이며 Controllers에 클래스를 넣어 이용하면 됩니다.

bootstrap

app.php 파일을 갖고 있는 디렉토리입니다.

app.php는 라라벨 애플리케이션의 부트스트래핑을 담당하고 있습니다.

config

라라벨 애플리케이션의 설정 파일들이 있습니다.

database

데이터베이스마이그레이션, 시드 파일들을 작성하는 디렉토리입니다.

public

css,js를 작성하는 디렉토리입니다.

resource

뷰 파일을 작성하는 디렉토리입니다.

routes

루트 디렉토리입니다.

라라벨에서 루트를 지정하고 작성하는 디렉토리입니다.

vender

컴포저에 의존성을 가지고 있는 디렉토리입니다.

눈치채셨을수도 있지만, MVC구조인데 왜 Model디렉토리는 없는가..? 라고 느끼시는 부분이 있을수 있습니다. 라라벨은 Model디렉토리는 따로 지정하지 않고, 스스로  작성하고 싶은 곳에Model디렉토리를 추가하는 방법을 채택하고있습니다. 저같은 경우는 실제로 app하위폴더로 model디렉토리를 생성하여 사용하고 있습니다 :)

오늘 공부는 여기까지 !

다음 공부부턴 어떤 라라벨에서 어떤기능이 있는지 알아보도록 하겠습니다 !! 

이번에는 vue.js의 컴포넌트에 대해 알아보겠습니다.

컴포넌트

html,css,js를 부품으로써 관리 할수 있습니다.

컴포넌트에 이름을 부여하고 언제든지 재사용 가능한 뷰 인스턴스입니다.

• 컴포넌트는 간단히 글로벌과 로컬로 나뉘어 사용할수 있습니다.
• 컴포넌트에서는 data를 함수로써 사용합니다.
• 컴포넌트에만 사용할수 있는 특징 prop이 있습니다.

글로벌과 로컬

글로벌컴포넌트

모든 뷰 인스턴스가 사용할수 있는 컴포넌트입니다.

주의점으로 반드시 사용할 뷰 인스턴스를 만들기 전에 작성해주세요 :)

// js
Vue.component("test-component", {
 // option
 template:"<p>test component!!</p>"
})

new Vue({
 el:"#test"
})

// html
<div id="test">
 <test-component></test-component>
</div>

결과 : https://jsfiddle.net/ry92x6mL/

여기서 option의 경우 일반 뷰 인스턴스에서 사용할수 있는 옵션은 거의 다 사용가능합니다 :)

로컬컴포넌트

변수로써 한번 정의 해놓고 필요한 인스턴스에만 가져다 사용 할수 있습니다.

// js
var localComponent = {
 template:"<p>localComponent!!!</p>"
}

new Vue({
 el:"#test",
 components:{
  "local-component":localComponent
 }
})

// html
<div id="test">
 <local-component></local-component>
</div>

결과 : https://jsfiddle.net/ry92x6mL/1/

위의 결과를 보면 알수 있듯이, 컴포넌트를 정의하고 사용할 때는 "components"를 이용하여 사용합니다.

data 사용법

data

컴포넌트에서 data를 사용할 경우엔 반드시 함수로써 사용합니다.

나쁜예 :(

Vue.component('test-component', {
  data: {
    message: 'testComponent!!!'
  }
})

콘솔창을 보면 에러가 나옵니다. :(

The "data" option should be a function that returns a per-instance value in component definitions.

좋은예 :)

Vue.component('test-component', {
  data:function() {
    return {
     count:0
    }
  }
})

위의 방식처럼 함수를 이용하여 data를 사용하면 됩니다 :)

props 사용법

Props

모든 컴포넌트 인스턴스는 하위 컴포넌트 템플릿에서 상위 데이터를 직접 참조 할수 없습니다.

하지만 props옵션을 사용하여 하위 컴포넌트로 데이터를 전달 할수 있습니다.

// js
Vue.component('test-component', {
  props: ['data'],
  template: '<span>{{ data }}</span>'
})

new Vue({
 el:"#test",
});

// html
<div id="test">
 <test-component data="props data!!!"></test-component>
</div>

결과 : https://jsfiddle.net/ry92x6mL/3/

여기서 중요한 점은 명시적으로 먼저 사용할 props를 선언 해야합니다.

이번 공부는 여기까지!!

디렉티브

디렉티브

vue.js에서 자주 사용되는 문법

v-model

v-on

v-bind

v-for

v-if

이렇게 5종류가 있습니다.

이제 하나씩 알아보도록 하겠습니다.

사용법

v-model

form의 input,textarea,select에서 사용하는 입력형식의 바인딩입니다.

사용법

// js
new Vue({
 el:"#test",
 data:{
  "stringData":""
 }
})

//html
<div id="test">
 <input type="text" v-model="stringData">
 <p>data:{{ stringData }}</p>
</div>

결과 : https://jsfiddle.net/e8opa65j/

결과값을 보면 알수있듯이, input박스 안에 입력을 하면 p태그에 자동으로 문자가 들어가는 것을 알수 있습니다.

주의점으로는

1) input태그에 value로 값을 넣어도 무시하는다는 점입니다.

2) checked와selected도 마찬가지로 무시해버립니다.

3) data에서 변수명을 초기화 하지않으면 에러가 납니다.

v-on

이벤트관련 디렉티브입니다.

사용법

// js
new Vue({
 el:"#test",
 data:{
 count:0
 },
 methods:{
  upCount:function() {
   this.count++;
  }
 }
})

// html
<div id="test">
<button v-on:click="upCount">버튼</button>
<p>현재카운트:{{ count }}</p>
</div>

결과 : https://jsfiddle.net/e8opa65j/1/

위의 결과에선 click이벤트를 이용했지만 다양한 이벤트가 많이 있습니다.

그리고 v-on은 @로 대신하여 사용가능합니다.

예제) v-on:click => @click

v-bind

?(여러가지)를 바인딩합니다.

?의 대표적인 예로 class,id,style등이 있습니다.

사용법

// js
new Vue({
 el:"test",
 data:{
  firstClass:"first-class"
 }
})

// html
<div id="test">
 <div v-bind:class="firstClass">클래스확인!!</div>
</div>

결과 : https://jsfiddle.net/e8opa65j/2/

위의 결과값에서 클래스를 보면 firstClass가 되어 있는것을 알수있습니다.

이외에도 다양한 값을 바인딩 할수 있으니 좀더 알아보면 좋습니다!

그리고 이번에도 약어로 사용이 가능합니다!

예제) v-bind:class => :class

v-for

v-for은 우리가 프로그래밍을 배웠다면 누구나 알수 있듯이 for문은 아니고 :)

foreach문이라고 보면 적절할것 같습니다.

사용법

// js
new Vue({
 el:"#test",
 data:{
  items:[{name:"a"}, {name:"b"}, {data:"c"}]
 }
})

// html
<div id="test">
 <div v-for="(item, index) in items">
  {{ index }}:{{ item.name }}, {{ item.data }}
 </div>
</div>

결과 : https://jsfiddle.net/e8opa65j/3/

위의 결과를 보고 눈치 채셨을 겁니다!

첫번째 두번째 변수는 name:a, name:b였지만,

세번째 변수는 변수는 data:c 입니다!

vueJs에서 v-for는 값이 없는 경우 error를 내지않고 무시해버린다는 점이 특이한 점이었던것 같습니다 :)

v-if

if문도 프로그래밍에서 자주 사용되는 if문 입니다 :)

사용법

// js
new Vue({
 el:"#test",
 data:{
  count:4
 }
})

// html
<div id="test">
 <input type="text" v-model="count">
 <div v-if="count>4">4보다 큰수 입니다^^</div>
 <div v-else-if="count==4">4입니다 :)</div>
 <div v-else>4 보다 작습니다:(</div>
</div>

결과 : https://jsfiddle.net/e8opa65j/4/

결과값을 보면 알수 있듯이, input에 값을 넣음으로써 유동적으로 값이 변하는 것을 알수 있습니다!

vue의 if문을 사용하면 귀찮은 처리도 손쉽게 할수 있는게 큰 장점인것 같습니다.^^

이번 공부는 여기까지!!

vue.js란

Javascript의프레임워크 입니다.

AngulerJs, ReactJs보다 유명하지는 않지만 최근 인기가 매우 주목받고 있는 자바스크립트 프레임워크 중 하나입니다.

VueJs는 발음과 비슷하게 View에 최적화시킨 프레임워크이며

MVVM패턴을 따르고 있습니다.

특징

VueJs의 가장 큰 특징은 컴포넌트를 이용한 개발 입니다.

하나의 템플릿을 컴포넌트 형식을 이용해 만든 후 여러 곳에서 사용 가능합니다.

컴포넌트는 다음장에 알아보도록 하겠습니다.

사용법

Vue인스턴스

뷰의 모든 시작은 뷰 인스턴스를 만드는것 부터 시작됩니다.

 new vue({
  // option
 })

자주 사용하는 옵션

뷰 관련 옵션 : el, template, components

데이터 관련 옵션 : data, computed, methods

하나씩 살펴보면

el

HTML의 엘레멘트 아이디나 클레스를 지정합니다.

id나 class를 지정한 태그만 vue인스턴스의 대상이 됩니다.

주의점으로는 class를 지정한 경우에도 인스턴스는 하나의 클래스만 대상이되며 나머지 클래스 엘레멘트는 대상이 되지 않습니다.

// js
new Vue({
 el:"#test"
})

// html
<div id="test"></div>

template

template는 사용법이 2가지 있는데,

직접 template:"<h1>Hello world</h1>"를 이용해 사용하거나,

컴포넌트를 이용하여 사용하는 방법이 있습니다.

// js
new Vue({
 el:"#test"
 template:"<p>hello world</p>"
 })
 
 // html
 <div id="test">
 </div> 

결과값으론: div태그 안에 hello world가 입력됩니다.

data

data는 뷰인스턴스 안의 변수를 관리합니다.

// js
new Vue({
 el:"test",
 data:{
  "stringData":"hello world",
 },
})

// html
<div id="test">{{ stringData }}</div>

사용법은 {{ }} 중괄호 안에 변수를 넣어 사용합니다.

compute, methods

단순히 data안에 변수를 넣어 사용해도 되지만, 좀더 유동적으로 사용하고 싶을때 

compute와 methods를 이용하면 좋습니다.

// js
new Vue({
 el:"#test",
 data:{
  stringData:"good day"
 },
 computed:{
  computedData:function(){
   return this.data.split("").reverse().join("")
  }
 },
 methods:{
  methodData:function(){
   return this.data.split("").reverse().join("")
  }
 }
})

// html
<div id="test">
{{ data }}
{{ computedData }}
{{ methodData() }}
</div>

사용방법으론 data의 변수를 사용하는 방법과 비슷합니다.

그리고, 보면 아시겠지만 methods와computed는 거의 비슷하지만,

다른점을 본다면 methods는 캐쉬가 되지만, computed는 캐쉬가 되지 않는다는 점입니다. 

첫번째 공부는 여기까지!