Vue를 이용해서 API로 영화목록을 받아오는 게시판을 만들어 보려고 하는데.. 화면에 예뻐야 할 맛이 나지 않겠는가? 근데 나는 CSS나 이런 건 잼병이기 때문에 부트스트랩을 이용해 보려고 한다. 예전에 부트스트랩을 사용하는 방법을 정리한 적이 있는데, Vue 프로젝트 환경에서는 조금 다른 것 같아 다시 정리하려고 한다. 부트스트랩 설치 ============================================================================ 터미널에 아래 명령어를 입력하여 부트스트랩을 설치해준다. npm install --save bootstrap 그럼 아래와 같이 package.json에 부트스트랩이 추가 된 것을 확인 할 수 있다. 이제 main.js에 가서 부트스트..

지금까지 프로젝트에 적용했었던 Vue는 아래와 같았다. 1. 뷰컴포넌트 생성 2. 뷰 인스턴스 생성 3. dom에 뷰 인스턴스 부착 이걸 소스로 풀면 아래와 같이 되는데.. $(document).ready(function() { Vue.component('color-list',{ template : '내용', data () { return { //데이터 } }, methods : { //함수 } }); new Vue({ el : '#color' }) }); 이렇게 컴포넌트를 만들고 나면 반드시 아래에, 뷰 인스턴스를 생성하여, DOM의 특정 태그에 부착시켜 줘야 했었다. => new Vue 생성자를 통한 뷰 인스턴스 생성 근데 VScode로 Vue project를 만들어 공부를 하는데 뷰 인스턴스를 다음..

내가 진행했던 프로젝트에서는 제이쿼리에서 지원하는 플러그인인 jqGrid를 사용했다. 물론 지금도 그때 뭐 데이터가 null인 녀석이 있다면 그리드 자체에서도 'null' 이라는 문자열이 떴고, 고객쪽에서 이거 보기 안좋다. null인 녀석들은 그냥 아무것도 표기 되지 않게 해달라 라는 요청이 있었다. jqGrid에서는 목록으로 만들 데이터를 model에 넣어서 목록으로 뿌리는데, 그 안에서 for문처럼 데이터의 갯수, 행 만큼 돌고 돌아 그리드를 만드는 형식이다. jqGrid에 대한 자세한 설명은 다음에 설명하기로 하고, 오늘은 formatter 옵션에 대해서만 좀 알아보자. 대충 로직은 다음과 같다. ( 혹시 이해 안되면, 다음에 jqGrid에 대한 글을 써서 링크를 달아놓을테니 참고 바람.. ) m..

보통 개발을 하다보면 외부라이브러리든, 직접 만든 라이브러리든 써야하는 경우가 생긴다. 보통 js파일을 가져올 때 아래와 같이 를 이용해서 가져오는 경우가 많았는데, 2015년 ES6가 공개되면서 ES6 문법인 import와 export를 이용해서 javascript를 모듈화 하는 일이 많아졌다. 지금까지는 나도 저렇게 사용했었는데, 이제는 import와 export를 사용해보려 하는 김에 정리해본다. ============================================================================ export란? 내가 만든 모듈의 함수, 변수, 객체... 여러 타입의 데이터를 다른 모듈에서 사용 할 수 있도록 내보내는 것을 의미한다. export의 형식으로는 크게..

뒤에 필요없는 이야기도 많으니 문법만 필요한 사람은 이거 가져 가면 된다. setTimeout(() => { [실행 할 함수 및 문장]}, [딜레이 시간] ); ============================================================================ 오늘 유튜브를 보면서 VScode도 익숙해질 겸, Vue 기초 강좌?를 보고 있었다. 그러면서 만든 게, 구구단 놀이 같은건데, 우선 아래와 같은 느낌이다. 여기서는 setTimeOut 함수만 알아볼 거기 때문에, 다른 건 다 넘기고, 정답을 입력하였을 때, 정답입니다! 문구가 뜨면서 동시에 문제가 바뀌니, 조금 이상했다. 그래서 정답일 경우에는 약 1~3초 후에 문제가 바뀌도록 바꾸려고 했는데, 그때 쓴 게 ..

오늘 유튜브를 보면서 Vue 기초부터 하나하나 공부하고 있었다. 영상에서는 이미지 경로를 그냥 넣었는데, 나는 v-bind 함수를 가지고 src속성에 경로를 넣어주려고 하였다. 그래서 처음 짠 코드가 아래였다. 우선 배열의 길이는 3이므로, v-for문이 3번 돌고, 이미지 파일은 아래와 같이 연속 된 숫자를 가졌다 room0.jpg room1.jpg room2.jpg 그래서 그냥 getSrc함수를 아래와 같이 짰다. getSrc : function(index){ return './assets/room'+index+'.jpg'; } 이렇게 짜면 v-for문의 index값이 0, 1, 2 순으로 들어 올테고, 각 이미지 경로를 src로 적재되니, 당연히 가져 올 줄 알았는데... 실행해보니 이미지를 가져오..