써먹는 웹개발

1. 카멜케이스 camelCase - 단어 연결할때 연결되는 단어의 첫글자를 대문자로 시작하는 표기법 - js에서 흔히 사용됨 props: { greetingText: String } 2. 케밥-케이스 kebab-case - 하이픈으로 단어를 연결하는 표기법 - html 태그명으로 흔히 사용됨 3. 파스칼 케이스 PascalCase - 첫 단어를 대문자로 시작하는 표기법 export default { components: { lotto-ball : LottoBall, }, ... } 4. 스네이크 케이스 (뱀 표기법) snake_case - 단어를 밑줄 문자로 구분하는 표기법 5. 헝가리언 케이스 strName, bName, szName - 접두어를 사용하는 표기법 - str -> string, b ->..

사이트 주소 : https://kr.vuejs.org/v2/style-guide/#%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84-A-%EA%B7%9C%EC%B9%99-%ED%95%84%EC%88%98-%EC%97%90%EB%9F%AC-%EB%B0%A9%EC%A7%80 Style Guide — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 우선순위 A(필수)와 B(매우 추천함)을 숙달될 때까지 매일 한번씩 볼 것!

computed 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다. computed 속성에는 2가지 장점이 있습니다. 1. (템플릿에 데이터 표현을 넣지 않음으로 인해) 템플릿의 가독성이 증가합니다. 2. computed 내의 연산에 들어있는 변수값이 바뀌면 자동으로 재연산이 됩니다. 예시 ... {{ num }} {{ doubleNum }} 화면에서 오래걸리는 계산식을 소스 바꿀때마다 재연산이 안되게 하려면, computed에서 연산식을 선언하여 리턴 받아야됩니다. 그러면 관련된 변수 값이 변하지 않는 한, 재연산을 하지 않게 됩니다. 사용방법 평균 시간: {{average}}ms export default { data() { return { result: [], ... } },..

You may need an additional loader to handle the result of these loaders 를 번역하면 '이 로더의 결과를 처리하려면 추가 로더가 필요할 수 있습니다.' 라는 뜻인데 나의 상황이 .vue파일에 style을 추가하면서 에러가 발생했다. 해결은 webpack.config.js 파일에 2가지 모듈을 추가하였다. webpack.config.js 파일 (굵은 글이 추가한 것) module: { rules: [{ test: /\.vue$/, use: 'vue-loader', }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader', ] }], }, 해당 문구를 입력하면 됩니다. npm i vue-style-lo..

1. 모듈이 변경될때마다 자동으로 compile해주는 방법이다. package.json에서 webpack 옆에 "--watch"를 붙인다. { "scripts": { "build": "webpack --watch" }, } package.json 파일을 저장한 다음에 npm run build를 하고나서 "webpack is watching the files"라는 문구가 뜨면 성공한 것이다. 이 상태가 되면 모듈이 변경될 때마다 자동으로 compile 해줄 것이다. 2. 새로고침 없이 변경내역 적용방법 ※ 변경내역없이 하는 작업은 로컬서버에서 진행가능합니다. 1) 로컬서버 준비 : package.json에서 dev를 추가한다. { "scripts": { "build": "webpack --watch", "..

npm run build 중, 다음과 같은 에러가 나타났다. ERROR in ./NumberBaseball.vue Module Error (from ./node_modules/vue-loader/lib/index.js): main.js[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options. @ ./main.js 2:0-46 4:8-22 해결한 방법이다. npm i --dev vue-template-compiler webpack clean npm run dev 추가설명 해주실분 댓글 부탁드립니다. 출처 : ht..

Vue.js의 강력한 기능 중의 하나는 컴포넌트인데, 이를 알아보자. 0. 컴포넌트 정의 : 기능을 가지고 있는 HTML 요소의 설계도로, 공통적인 기능을 캡슐화하여 여러군데에서 쓰일 수 있게 만들어 놓은 것이다. 1. 컴포넌트를 쓰는 이유 : 2가지의 다른 기능이 있다고 했을때, 공통적으로 쓰이는 필수 기능들이 겹치는 경우가 있다. 필수 기능들이 변경된다면 수정하는 시간이 기능 개수가 많아질수록 늘어나게 되는데, 이를 컴포넌트로 공통적인 기능을 묶어준다면, 소스를 여러번 수정하지 않기 때문에 수정시간이 줄어들 뿐만 아니라 정확도도 많이 개선될 것이다. 2. 컴포넌트 등록 사용방법 컴포넌트 등록(정의)하기 (Js) Vue.component('my-component', { template: 'MyCompo..

0. script에서 규칙 1) new Vue안에서 이름을 지켜주어야 할 것 ( - el, data, methods 2) input에서는 type="number"를 붙이면 숫자값 입력만 되고 인식할때는 문자열로 인식된다. - 숫자로 인식하고 싶을때는 v-model 뒤에 .number를 붙일 것 - ex) 3) 줄임 문법 - v-on:click -> @click - v-bind:class -> :class 4) style을 지역변수화 하는 방법 : scoped - vue 파일 안에서 5) v-if와 v-show의 차이점 - 개발자도구의 Elements에서 if문일때는 tag도 안보이고, show는 tag는 보이지만 style="display: none;"으로 되어있다. - v-show일때 화면상의 소스 :..