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값이 들어올것이며, 이를 토대로 이벤트를 걸어주면 된다.

docker run -dit --name my-apache-app -p 8080:80 -v "$PWD/apache_home":/usr/local/apache2/htdocs/ httpd:2.4

my-apache-app은 도커 프로세서의 이름이고,

$PWD/apahce_home은 현재 경로에 있는 apahce_home을 htdocs처럼 사용한다고 속이는 역할을 한다.

-p 8080:80도 원래 http같으 웹서버는 80포트로 열리는데, 8080포트를 80번 포트처럼 사용하겠다는 느낌

참고로

docker start my-apache-app

은 my-apache-app이라는 이름을 가진 프로세스를 시작하겠다.

docker stop my-apache-app

은 my-apache-app이라는 이름을 가진 프로세스를 중지하겠다.

docker rm my-apache-app

은 my-apache-app이라는 이름을 가진 프로세스를 지워버리겠다.

docker ps

은 그냥 터미널창에 ps 치는 것과 같이, 도커의 프로세스 정보들을 쫘르륵 보기위함

docker images

docker rmi 

https://www.lesstif.com/pages/viewpage.action?pageId=51282114

위 주소 참고

그냥 cmder 터미널?에

alias test=cd /Users/haeru/Desktop/test

위와 같이 한줄 친 후엔 매크로 적용되어

test

만 입력해도 cd /Users/haeru/Desktop/test 폴더로 이동된다.

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

나는 20살 이후 개발관련 대회에 나가본적이 없다.

고등학교때 3년동안 기능대회준비만 했었으니 조금은 쉬고싶기도 했고, 대회보다는 사람들을 만나고 놀고 싶었기 때문에

여튼 시간이 좀 지나니 대회의 그 심장쫄깃함을 다시 느껴보고 싶었고,

고등학교 졸업하고나서는 기능대회 준비했을때처럼 그렇게 열정적으로 밤샘 불코딩 해본적이 없었던거 같았다.

하긴 그때는 3년내내 안쉬고 코딩했으니까..

그래서 뭔가 추억에 젖으면서 지원했었다.  사실 그 유명한 마이다스아이티 밥을 너무 먹어보고싶어서..

먼저 마이다스챌린지는 연령, 경력 뭐 이런거 하~나도 안본다.(그래서 이번에 참가한사람들중에 고졸팀도 있었고, 졸업하고 현업에 계신분들도 보였다.)

그리고 상받은거와 무관하게 심사위원들이 해커톤을 지켜보면서 잘하는사람들 픽미픽미해서 입사할만한 사람들 평가하는 것 같았다.

마이다스챌린지는 예선과 본선으로 나누어지는데

--예선--

먼저 예선은 자소서 점수와 코딩테스트의 점수를 합산해서 합격자를 추려내는 것 같았다.

자소서 항목 질문이 제대로 생각은 안나는데

일단 자기가 살아온거? 자기소개? 그 항목이 500자 이내

그리고 경험들 상세하게 적는 항목은 글자수 제한없음

이렇게 2가지 항목이 있었다.

그리고 코딩테스트는 총 6문제가 있었는데, 이불 밖은 위험하니 집에서 시간맞춰 코딩테스트사이트 접속해서 보면 된다.

코딩테스트 문제는 구글링하면 풀이까지 다 나와있기때문에 자세한 설명은 생략한다.

아침 10시부터 시작이었는데 뭔 생각이었는지 언제 시작해도 테스트 시간은 2시간 제한일거라 착각하고 11시부터 느긋하게 풀었다.

그래서 나는 알고리즘못알이기 때문에 3문제밖에 못풀어서 아.. 개망.. 난 떨어졌구나 싶었다.

근데 붙었음?

내 생각에는 마이다스아이티에서 주는 포트폴리오 양식이 있었는데, 그것도 정리해서 썼고

직접 ppt로 상세하게 적어 만든 포트폴리오도 같이 묶어서 냈기 때문에 그 정성을 보시고 합격시켜주시지 않았을까 생각한다.

--OT--

OT는 맘편하게 가면된다.

예선 합격메일에 오티날짜와 함께 본사로 초대한다는 내용이 담겨있다.

가서 팀원들 얼굴보고 연락처교환하고

진짜진짜 맛있는밥먹고 간식먹고간식먹고간식먹고 오면 된다.

나는 밥에 환장하기때문에 밥만 잘주면 노예도 될수있다고 떠들어댔는데

밥을 먹으면서 하.. 나는 여기라면 노예를 할 수도 있을 것만 같아.. 라는 생각을 했다.

--본선--

미리 말하자면 수상은 못하였다. 완성을 못했기 때문에

작년 웹솔루션 분야 주제는 todo list였는데 이번엔 학생식당관리서비스 였다.

자세한 사항은.. 혹시나 공개적으로 발설했다는걸로 철컹철컹 당할수도있으니 소심한 나로써는 이또한 자세한 설명은 생략한다. CRUD 몇개 구현하면 된다는 정도?

여튼 아침10시까지 도착해서 30분정도 과제 설명해주고 그후 쭉~ 다음날 아침 10시까지 마라톤 하면된다.

경기창조혁신센터에서 했기때문에 마이다스 셰프들이 본사에서 음식 만들어서 여기로 갖고와서 급식처럼 배식해주신다.

그럼 맛있게 졸지않을만큼 먹고 열심히 코딩하면 된다. 야식으로 치킨도 종류별, 브랜드별로 시켜주신다.

우리가 원하는 간식과 음식을 무한 제공해주시기 때문에 적당히 먹어야한다. 계속 먹으면 바~로 꿈나라행~

핫식스와 커피는 무한으로 채워졌고, 간식테이블에 졸음뚝껌이 있길래 처음 봐서 먹어봤더니 진짜 잠이 한방에깸 목캔디의 43385189268배의 화~함이었다. 눈코입귀 다뚫림;

우리팀은 오티끝나고 회의하면서 한명이 스프링개발자, 한명이 노드, 나는 php 인 것을 알게 되어서 언어를 정하는것부터 쉽지 않았다.

일단 노드로 가닥이 잡혔는데 나는 노드를 제대로 해본적이 없었기때문에 front를 담당하기로 하였고, 노드가 주 언어셨던분이 전반적인 back단, 스프링개발자분이 데이터바인딩을 맡았다. 음.. 생각해보니 이 얘기하면 내가 누군지 알겠구납

나는 부트스트랩 그런건 쓸 생각도 안했다. 너무 전형적인 디자인과 모달 뜨는 방식같은게

마치 발표할 때 현란하고 정형화된 프레지만 쓰는 듯한..? 프레지..당신은 대체.. 이제그만! 이런 느낌이었다.  

그래서 열심히 핀터레스트랑 웹디자인모음사이트들을 찾아서 색과 구조를 정하고, 열심히 아이디어를 냈다.

세명 다 아이디어를 내고 기획을 하려고 하다보니 2시간이 넘어서도 가닥이 안 잡히길래 일단 나는 먼저 코딩을 해야겠다는 생각이 들어서 나머지 기획은 두분께 맡겼다.

어차피 데이터관련한 기획이나 특히 ERD는 학교에서 이제 막 제대로된 이론을 배우고있고, 내가 끼기에는 많이 부족한것 같았기 때문이었다.

그래서 잔말말고 열심히 코딩했다. 그러다보니 저녁 8시~9시쯤 어느정도 전체 페이지 틀이 잡히기 시작했고, 데이터 연결을 기다리며 세부디자인이나 아이콘 이런것을 작업하기 시작했다.

저녁먹고 치킨먹고 하다보니 새벽3시쯤? 정도 되었길래 카페인이 잘 받는 내 신체장기들에게 감사함과 미안함을 동시에 전하며 커피한잔을 크게 원샷한 후 데이터바인딩 준비를 하였다.

근데 아쉽게 ORM?으로 하면서 문제가 터지고, 로그인도 패스포트 그게 잘안되고 하다보니까 점점 똥줄이 타기 시작했고 6시부터는 나도 슬슬 마음을 편히 먹기 시작했다.

도와드리고싶어도 이미 완성된 노드사이트 수정만해봤지 처음부터 끝까지 만든 경험이 없었기에, 특히 쿼리날리는건 자신있는데 ORM으로 했다고하길래 ORM을 처음 들어보기도했고 음.. 패쓰~ 이런 마음이었다.

이왕 이렇게된거 즐겜합시다~ 다들 이런마음을 갖기 시작했고 그때부터 더미데이터를 하드코딩으로 넣고 해커톤은 종료되었다.

발표는 분야별로 나누어서 학교 실습강의실처럼 생긴 룸에 가서 발표하였다. 어느정도 완성한 팀은 2팀 정도있었고, 이 2팀 중 추가기능까지 만든 팀이 최우수상, 필수기능만 구현한 팀이 우수상을 타갔다.

시상은 본사가서 하였고, 마지막 만찬으로 본사 구내식당에서 참치를 직접 회떠주셨다.. 클라스..

완성 못한것이 좀 아쉬웠지만 오랜만에 24시간넘게 잠도 안자고 코딩만한게 오랜만이어서 상을 못받았는데도 너무 기분이 좋았다. 코딩변태인가; 밥이 맛있어서 기분좋은 것도 한몫했음! 헿

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

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

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

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

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