Play Ground

webpack 사용중!

라디오버튼을 이용해서 datepick이라는 클래스의 div를 show/hide 할 예정

템플릿 :

<template>
<div class="radio">
	<label>
		<input type="radio" class="minimal" value="now" name="sendType" id="sendType" v-model="toggleSendType"> 즉시
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" class="minimal" value="reserve" name="sendType" id="sendType" v-model="toggleSendType"> 예약
	</label>
	<div class="input-group datepick" v-if="sendType">
		<div class="input-group-addon">
			<i class="fa fa-calendar"></i>
		</div>
		<input type="text" class="form-control pull-right" id="reserveDate">
	</div>
</div>
</template>

스크립트 :

<script>
	export default {
		name: 'user-usersearch',
		data: function(){
			return {
				sendType: false,
				toggleSendType: 'now'
			}
		},
		watch: {
			toggleSendType: function(data){
				if(data == "now")
					this.sendType = false
				else
					this.sendType = true
			}
		}
	}

</script>

코드를 간단하게 설명하자면

v-model을 이용하여 toggleSendType을 연결시켜준다.

요 변수 안에 들어가는 내용은 radio버튼의 value값으로

이 값이 일치하면 체크되고, 불일치하면 체크가 풀리게 되는 거 같음

-> toggleSendType의 디폴트값이 now. 따라서  now의 value를 가진 라디오버튼이 체크될것임. 그리고 만약 reserve value를 가진 라디오버튼이 체크되면 toggleSendType의 값이 reserve가 되겠다.

그리고, watch를 이용하여 감시자를 만든다. toggleSendType변수의 값이 바뀌는지 안바뀌는지 감시하겠다는 말인듯.

그래서 data에 now/reserve라는 radio의 value값이 들어올것이며, 이를 토대로 이벤트를 걸어주면 된다.

vue.js의 라이프사이클 이해한 후 보기

요약하자면

1. axios로 api를 호출하여 데이터를 가져온 후

2. 해당 데이터를 eventbus를 이용하여 다른 컴포넌트로 값을 넘겨준다.

3. 2번의 그 다른 컴포넌트에서는 eventbus를 created()에서 받아 데이터를 연결해준 후, 원래 걸려있던 이벤트 해제

4. updated()에서 다시 이벤트를 건다.

--------------------------------

webpack, axios, eventbus, datatable를 이용해서

회원을 검색하면 회원검색api를 호출하여 회원정보데이터를 가져온 후

그 결과값을 다른 컴포넌트에 값을 넘기고, datatable을 이용하여 테이블리스트를 만들어줘야하는 상황

검색하는 부분(usersearch.vue)

<template>
	...
	<input type="text" class="form-control" id="userSearchInput" placeholder="회원을 입력해주세요" @keyup="search = $event.target.value">
	<span class="input-group-btn">
		<button type="button" class="btn btn-info btn-flat" @click="getPosts">검색</button>
	</span>
	...
</template>
<script>
export default {
	name: 'user-usersearch',
	data: function(){
		return {
			search: ''
		}
	},
	methods: {
		getPosts: function () {
			this.$http.get('api주소/user_search/' + this.search).then((result) => {
				console.log(result)
				this.$EventBus.$emit('posts', result.data)
			})
		}
	}
	...
}
</script>

데이터 받아서 뿌려주는 부분(info.vue)

<template>
...
<tr v-for="post in posts" v-bind:key="post.id">
	<td>{{post.id}}</td>
	<td>{{post.name}}</td>
	<th>{{post.address}}</th>
	<td>{{post.phone}}</td>
	<td>{{post.mail}}</td>
	<td>{{post.profile}}</td>
</tr>
...
</template>
<script>
	var vm = this
	export default {
		name: 'user-info',
		data: function(){
			return {
				posts: []
			}
		},
		created() {
			var vm = this
			this.$EventBus.$on('posts', function (data) {
				vm.posts = data

				$('#userDelete').removeClass('disabled')
				$('#postList').DataTable().destroy()
			})
		},
		updated() {
			this.$nextTick(function () {
				$('#postList').DataTable()
			})
			
		},
		mounted() {
			$('#postList').DataTable()
		}
	}

</script>

created()는 data와 events가 활성화되어 접근할 수 있는 훅이라고 한다. 그래서 이벤트 버스는 created안에 넣어주는 것이고,

데이터를 가져왔으면 이미 걸려있는 datatable(이벤트)을 해제시켜준다.

그리고 updated()는 컴포넌트의 데이터가 변하여 재 렌더링이 일어날 때 실행되는 훅이라고 한다. 따라서 이벤트 버스를 잡아서 데이터의 변화가 감지되었을 때 datatable(이벤트)를 다시 걸어준다.

nextTick은 모든 화면이 렌더링된 후 실행하는 것을 보장함으로 저기 안에 넣어주면 된다.

https://google.com/#q=import%2Fno-webpack-loader-syntax  Unexpected '!' in 'expose-loader?$!expose-loader?jQuery!j query'. Do not use import syntax to configure webpack loaders위와 같은 

위와 같은 코드에러가 났을 때!

eslint 때문에...!!!!

삽질을 몇 시간동안 한듯

다시 호흡 가다듬고 jquery 설치부터

1. 먼저 jquery를 install 해준다.

npm install jquery --save

2. build/webpack.base.conf.js 파일에 plugins 추가

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}

3. 그리고 webpack.base.conf.js 파일(2번과 같은 파일) 최상단에 webpack 적어두고,

const webpack = require('webpack')

4. 만약 eslint 사용하고 있으면 최상위루트의 .eslintrc.js 파일에 globals 붙여넣기

module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...

위 솔루션은

https://maketips.net/tip/223/how-to-include-jquery-into-vuejs 여기 참고하여 해결함ㅠㅠㅠ

cordova를 이용해서 하이브리드 앱으로 제작하던 도중,

네이티브 앱이 아닌 모바일웹이다보니 자꾸 버튼이나 a태그를 선택할 때 텍스트에 영역이 잡히는 현상이 발생하였다.

그럴 경우엔

* {
     -ms-user-select: none; 
     -moz-user-select: -moz-none;
     -khtml-user-select: none;
     -webkit-user-select: none;
     user-select: none;
 }

위와 같이 CSS를 주면 해당 선택자는 드래그가 되지 않는다.

유튜브를 사이트에 붙이려면 원하는 동영상 가서 밑의 그림처럼 공유버튼 -> 소스코드에 있는 iframe 코드를 복사해서 사용하면 된다.

근데... 두둥

재생 일시정지 중지를 따로 버튼을 만들어 제어해야하는 일이 발생하였다고 한다!

그럴땐

1.

src에 마지막에 ?enablejsapi=1&version=3&playerapiid=ytplayer 를 붙인다.

위의 캡쳐된 소스코드로 보자면 <iframe width="560" height="315" src="https://www.youtube.com/embed/liGwFOQr45Q?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>

요런식으로 작성한 후에

2. 제어할 버튼에 이벤트 추가

$(".stop").on("click", function(){
	$("iframe")[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

stopVideo, playVideo, pauseVideo를 저기 빨간부분에 알맞게 넣으면 된다.

우분투에 apache2가 깔려있다 가정!

1. 일단 apache2폴더로 들어간다.

cd /etc/apache2

2. vim으로 또는 vi로 apache2.conf를 연다. (참고로 sudo권한으로 열어야 쓰기모드로 열림)

sudo vim apache2.conf

3. /Follow 해서 Options FollowSymLinks 라는 단어를 찾는다!

4. 처음엔 맨위에있는 FollowSymLinks에 MultiViews 를 적었더니 반응없어서 아래에 /var/www/ 디렉토리에 있는 Options Indexes FollowSymLinks에 MultiViews를 적었더니 오 된다!

5. 아파치 재시작

sudo /etc/init.d/apache2 restart

네이버(http://m.naver.com) 이나 다음(http://m.daum.net)의 모바일버전을 보면

메인메뉴 영역을 스와이프해서 전체 메뉴를 훑을 수 있게 만들어졌다.

이 기능을 만들어 보고자 개발자 모드로 확인하였더니 css의 transform, transition 등을 이용해서 만든 것으로 보였다.

그래서 나는 trans관련 css와 함께 스와이프 동작을 인식해야하므로 jquery의 touchstart, touchmove, touchend를 이용해서 만들었다.

참고로 touchstart, touchmove, touchend는 마우스로는 작동이 안되고 핸드폰에서만 작동하는 것을 확인하였다.

카페24의 호스팅을 이용하여 사이트를 관리하던 중에

셋팅을 건드려야 할것이 많아 AWS EC2로 옮겼다.

그런데 카페24에서 잘 작동했던 mail함수가 AWS에선 작동하지 않았다!

구글링해보니 다른 인스턴스를 이용하고 따른거 좌르륵 하라고 하지만

그냥 하나 설치해주면 mail함수로 메일을 보낼 수 있었다.

1. apt-get을 이용하여 sendmail을 설치한다

sudo apt-get install sendmail

끝!

sendmail만 설치하면 mail함수가 잘 작동한다!

AWS에 APM(apache, php, mysql)을 설치하고 index.html에 php코드를 작성해보니

아니.. 왜 php코드가 그대로 출력되죠?! 당황..

갓구글님께 여쭤보았더니

httpd.conf나 apache2.conf 등등 conf파일이란 모든 conf파일을 들먹이며

LoadModule, AddType 등을 넣어보라는데

자세한 설명이 없어서 몇번째 줄에 넣어야 할지도 모르겠고 넣기만하면 아예 사이트가 먹통..

엄청난 구글링 끝에 드디어 해결방법을 알아내었다.

환경은

aws ec2

ubuntu 16.04

php7

1.

sudo vim /etc/apache2/mods-enabled/mime.conf

위 파일을 vim으로 연다.

2.

/AddType

AddType을 vim 내에서 찾는다.

n 키를 눌러 next next 하다보면

위처럼 AddType이 쭉 나열되어있는데

바로 밑에

AddType application/x-httpd-php .php .phtml .html .htm

를 작성하고 :wq

3.

sudo /etc/init.d/apache2 restart

아파치 재시작하면 끝

mysql 상위버전 5.6인가 5.5인가를 쓰다보니

자꾸 doesn't have a default value 이러면서 insert가 안된다;;

나는 insert를 set으로 사용해서 그런가 빈 공백이 있으면 안된다고 자꾸 나를 오류로 혼내킨다..

검색해보니 sql_mode 를 수정하라고 하는데

역시나 한번에 되는일이 없었다.

/etc/my.cnf 파일이 없어서 어떻게 뭘 해야할지 모르겠사!!

1.

sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf

위 파일을 vim에디터로 열어준다.

2. [mysqld]를 찾아서

대충 사이에 적절하게 sql_mode = '' 끼워넣는다

[mysqld]
#
# * Basic Settings
#
user            = mysql
pid-file        = /var/run/mysqld/mysqld.pid
socket          = /var/run/mysqld/mysqld.sock

...

skip-external-locking
sql_mode = ''

...

3.

sudo service mysql restart

mysql을 재시작해주면 끝!