웹 프론트엔드/Vue.js, Jquery, PWA11 Vue.js : vue-loader / webpack watch/ webpack-dev-server/ style scoped /data와 computed : [강좌 4강 정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# Webpack을 이용하여 npm과 webpack을 통해 Vue 인스턴스를 사용하기 위한 기본 구조를 잡는 방법을 알아봅니다. 4-1) Vue-loader webpack config 설정 webpack.config.js파일에 있는 module의 Loader를 통해 빌드시 JS파일이 아닌 파일(ex .vue)파일을 Javascript 파일로 변환해 줄 수 있다. module의 Loader는 꼭 Javasc.. 2021. 1. 18. Vue.js : Webpack 설정하기 : [강좌 3-3강 정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# Webpack을 이용하여 npm과 webpack을 통해 Vue 인스턴스를 사용하기 위한 기본 구조를 잡는 방법을 알아봅니다. NPM 패키지 모듈 설정하기 webpack 설정을 위해 webpack, webpack-cli, vue-loader, vue-template-compiler에 대한 npm install을 진행합니다. package.json을 보면 다음과 같습니다. 추가적으로 vue-template.. 2020. 12. 20. Vue.js - template, script, style 알아보기 [강좌 3-2강정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 뷰 인스턴스 코드를 npm으로 수행하기 cdn으로 사용할때는 아래와 같이 Vue 인스턴스를 실행한다. const app = new Vue({ el: '#root', }) npm을 이용하여 설치를 한 이후에는 다음과 같이 Vue 인스턴스를 실행한다. import Vue from 'vue'; import NumberBaseball from './NumberBaseball.vue'; // 숫자야구 vue 컴.. 2020. 11. 23. Vue.js [강좌 3-1강정리] 웹펙의 사용이유 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 웹펙의 사용이유 웹펙 관리의 어려움보다 스크립트 관리의 어려움이 커질때 웹펙이 필요하다. 웹펙을 사용하려면 노드를 사용해야하는데, node 홈페이지에서 LTS node버전을 받는 것을 추천한다. 노드를 설치하면 npm을 사용할 수 있는데, 이는 남이 작성한 자바스크립트 라이브러리를 사용할 수 있도록 도와준다. npm init을 하면 package.json파일이 생기는데 이는 내가 사용한 남의 자바스크립.. 2020. 2. 4. Vue.js - 전역 component / template / vue data / props / [강좌 2강정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# (2-1강) Vue 컴포넌트의 사용 이유 컴포넌트 사용은 데이터가 중복되는 것을 피하고 동일한 내용을 반복하고자 할때 사용한다. 컴포넌트를 사용하지 않게 되면, 코드가 지저분하고 중복이 되게 된다. 반복되는 부분을 Component로 만든다. Vue 컴포넌트는 다음과 같이 작성한다. (파스칼 케이스나 케밥케이스를 사용) Vue.component(‘word-replay’); Vue 에서 알아두면 좋은 변.. 2019. 12. 17. Vue.js - v-if v-else 디렉티브 / 보간법 / v-model / ref [강좌 1강정리] 인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다. 설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~ 사이트 주소 : https://www.inflearn.com/course/web-game-vue/# 1-1강 ( cdn으로 Vue 사용해보기) Data를 바꾸면 알아서 뷰 화면이 바뀐다. 화면과 데이터를 일치시키는 것이 중요하다. 데이터만 관리한다. => 생각하는 방식을 데이터중심으로 바꾸는 것이 중요하다. 즉 데이터를 바꾸면 View가 바뀐다. 해당 cdn으로 vue.js를 이용할 수 있다. 1-2강 (data와 v-if, v-else) onclick => v.on:click 뷰에서 통제하는 메서드.. 2019. 12. 3. PWA란? PWA의 특징 PWA란? 구글 크롬 엔지니어 알렉스 러셀이 2015년에 고안한 개념입니다. 궁극적으로 앱 수준과 같은 사용자 경험을 웹에서 제공하는 것이 목적입니다. Progressive Web App은 웹의 장점과 웹의 장점을 결합한 환경입니다. PWA의 특징 이것은 사용자가 브라우저 탭을 맨 처음 방문할 때부터 유용하고, 설치가 필요 없다는 장점이 있습니다. 시간의 흐름에 따라 사용자가 앱과의 관계를 점진적으로 쌓아갈수록 성능이 더욱 강력해질 것입니다. 이 웹앱은 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 전송하며, 홈 화면에 아이콘이 있고, 최상위의 전체 화면 환경으로 로드됩니다. 즉 PWA는 확장성이 좋고 깊이 있는 앱같은 웹을 만드는 것을 지향합니다. 모바일을 중심으로 하는 인터넷 서비스는 크게.. 2018. 9. 28. jquery - html과 text 메소드의 차이 text 어떤 내용이 예를들어 p같은 문자 태그 안에 있다면 text를 사용해서 변경할 수 있습니다. 그냥 text() 이런식으로 사용한다면 오히려 해당 요소의 text를 가져오는 역활을 합니다. 위의 예제는 hello를 출력합니다. html html도 text와 비슷한 기능인데요, text는 텍스느만 불로오지만 html()은 html 태그도 불러옵니다. http://www.everdevel.com/jQuery/text-html.php 2018. 8. 30. jquery의 chain Chain 이란 jquery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있습니다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있습니다. 즉 자기 자신을 포함하는 래퍼를 모든 메서드가 반환합니다. 여러줄의 코드를 한줄로 표현 가능~ Chain의 장점 코드가 간결해집니다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함. 하나의 주어를 여러가지 서술어가 묘사 할 수 있습니다. 탐색 (traversing) chain의 대상을 바꿔서 채인을 계속 연장시킬 수 있습니다. 너무 복잡한 chain은 코드의 가독성을 떨어 뜨립니다. 예제) find(.foo) -> 주어진 래퍼의 자식 앨리먼트중 class명이 foo인 엘리먼트를 찾아라!end() -> 마지막으로 사용한.. 2018. 8. 13. jquery의 선택자 선택자란? jquery 래퍼에는 CSS 선택자가 위치할 수 있는데, 이를 통해 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있습니다. jquery 공식 홈페이지 api.jquery.com -> jquery 공식 홈페이지 Selector 챕터의 Basic에 해당 선택자에 대한 설명이 나와있습니다. 예제를 실행해보며 공부해 볼 수 있습니다 기본 선택자 필터 선택자 대괄호로 시작하며 앞쪽에는 속성 이름이 들어가게 됩니다. = 앞에 어떤 연산자가 들어가느냐에 따라 동작의 차이가 발생합니다. 속성 선택자 폼 선택자 2018. 8. 13. 이전 1 2 다음
