스가영

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

라라벨은 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디렉토리를 생성하여 사용하고 있습니다 :)

오늘 공부는 여기까지 !

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

안녕하세요! 

첫 일본라면 리뷰네요~

제가 일본에 살고 있고 컵라면을 좀 좋아하고 많이 먹기도 하고 해서 이번 기회에 뭘 먹었는지에 대해 남겨보려고 해요 :)

첫 일본 컵라면은 

세븐일레븐에만 팔고 있는 모코탄멘!!

카미 이타바시라는 곳에 본점을 두고 도쿄 여러 곳에 체인점을 두고 있는 꽤 인기 있는 라면집이에요

일본에는 인기 있는 라면집을 컵라면으로도 자주자주 판매가 되니까 이번에 한번 사 먹어봤습니다.

가격은 세금 포함 204엔 정도입니다~

그렇게 비싼 가격은 아니에요 :)

뚜껑 위에 있는 소스는 조미유인데 넣으면 더 맵고 맛있어져요 :)

칼로리는 540 정도로 한국에 파는 일반 컵라면이랑 비슷한 정도입니다!

면&야채: 430

수프: 110

내용물은 이렇게 돼있고, 위에 흰색은 두부예요 :) 

가게에 가서 먹을 때도 이렇게 두부를 올려줘요~

뜨거운 물을 넣고 5분 동안 있으면 이렇게 완성된답니다~

이상태로 뚜껑 위에 있는 조미유를 넣어서 먹으면 돼요!

그리고 이 치즈가 편의점에서 세트로 추천하길래 사서 같이 먹었는데 매운걸 잘 못 먹어서 그런가 꽤 괜찮았어요!

가격은 200엔정도?로 비싼가격은 아니었어요!

마지막으로

먹어본 감상으로는 맵고 맛있고, 뭔가 짬뽕 같은 느낌이랄까... 좋았네요 ㅎㅎ

(조미유 넣고 안 넣고 맵기 차이가 큰 것 같네요!)

야채도 많이 들어있어서 씹는 맛도 괜찮았고, 근데 역시 불닭보다는 안 매웠어요 :) 

일본에서 매운 라면이 먹고 싶다! 하면 모코탄멘 먹으면 좋을거 같네요 ㅎㅎ

이상 모코탄멘 리뷰였습니다 :)

이번에는 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는 캐쉬가 되지 않는다는 점입니다. 

첫번째 공부는 여기까지!