- Vue-cli 4.5 를 사용하고있습니다.
vue.config.js에서 scss, sass를 지정해주려는 가운데, appendData 에 대한 에러가 발생하였을 때 적용하여 해결하였습니다.
appendData -> additionalData
로 변경해주었습니다.
| [ Vue.js ] Computed 속성 다루기 (0) | 2022.02.05 |
|---|---|
| [ Vue.js ] LocalStorage 이용하는 방법, 예제 (0) | 2022.02.02 |
| [ Vue.js ] Arrow funciton ()=> ? why?? (0) | 2022.02.02 |
| [ Vuetify ] Vuetify 뷰티파이 이용해서 Login 창 구현 (0) | 2022.02.01 |
| [ Vue.js ] Webpack, node, npm, vue.js, build 해보기 (1) | 2022.01.30 |
VueJS에서 Arrow Function을 사용해야하는 이유
ES6
medium.com
[ Vue Instatnce의 위치와 함수의 사용법에 따른 this.function의 값 출력 ]
Original Function : 함수 내에서 새로운 Instance를 생성하기 때문에 this.을 찾지 못한다.
그래서 새로운 함수 내의 function 을 호출하면 값을 뱉어내지 않는다.
Arrow Function : 선언되던말던간에 기존의 Instance의 위치 그대로 this.를 찾음
그래서 새로운 Arrowfunction 내에서 function을 호출하면 값을 뱉어낸다.
그냥 뭐 그렇다고.... ㅎㅎ ;;
별 내용은 없고 그냥 Vue와 데이터베이스 구현하는데 필요하여 구현해봤다.
물론 어느 블로그 참고..
뷰티파이는 css-framework와 유사하나 Vue와 직접적으로 연동하여 사용할 수 있다.
// main.js
import Vue from 'vue'
import app from './App.vue'
new Vue(app).$mount('#root')<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>// package.json : build 명령어 추가
"scripts": {
"build": "webpack --watch",
},// webpack.config.js
// entry객체 내에 app의 path.join 지정
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'production',
entry: { // app => 합쳐질 파일명, main.js => webpack으로 build 할 파일
app: path.join(__dirname, 'main.js')
},
module: { // rules를 통해 '.vue'로 끝나는 파일은 vue-loader를 사용하겠다고 정의
rules: // 이유: webpack은 기본적으로 javascript를 처리 App.vue 파일은 javascript 파일이 아니기 때문에, vue-loader가 처리하게 만듬
[{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}
]},
plugins: [ // vueloader plugin을 사용하기 위해 vue-loader plugin 모듈을 가져옴
new VueLoaderPlugin()
],
output: { // build결과물에 대한 정보.
filename: 'app.js', // build 파일명
path: path.join(__dirname, 'dist') // 파일이 저장될 디렉터리 지정
}
}
node.js 와 vue.js 에서 모듈들을 삽입하는 방식의 차이. require, import...
// In node.js
require, module.export
// In Vue.js
import, export default이렇게 직접 하나씩 module들을 다운로드 하고 삽입하는 것은 vue-cli가 잘나와서 굳이 필요하다고는 생각치 않는다.
하지만 프로젝트 기본을 설정하는 webpack.config.js 를 어떻게 구조화하는지에 따라 명령어에 따라 에러가 발생할 수도있다는 것을 한 번 더 느끼게 해주었고, vue의 config가 어떤 식으로 돌아가는 지 이해가 더 잘되었다.
그간 프로젝트 만들고 에러 해결해 나가는 것에 급급해 했지만, 하나씩 기초를 다질 때가 된 것 같아 이렇게 webpack에 대해 알아보았다.
예전에 bootstrap css-framework를 사용하면서 dist가 무엇인가? 에 대해 의문을 가졌지만 그 때에는 그것보다 구현하는데에 급급했기에 넘어갔지만, 이번 기회에 dist가 왜 발생하고, 어떤 식으로 프로젝트를 구성하는지에 대해 좀 더 잘 알 수 있었다.
Vue.js 프로젝트를 webpack을 이용해
npm run build를 하였을 때 나타나는 경고 문구
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack.config.js 에 어떤 모드로 프로젝트를 설정한것인지 기재를 안해놓았기 때문이다.
그렇기에 mode: 'production' 혹은 'development' 를 추가해주면 된다.
| [ Vuetify ] Vuetify 뷰티파이 이용해서 Login 창 구현 (0) | 2022.02.01 |
|---|---|
| [ Vue.js ] Webpack, node, npm, vue.js, build 해보기 (1) | 2022.01.30 |
| [ Vue.js ] How to use Custom Directives in Vue.js 3?? | vue.js3에서 커스텀 디렉티브 사용하는 방법 예제 (0) | 2022.01.05 |
| [ Vue.js ] v-on, @ click 이벤트로 여러 개의 메서드 실행하기, 다중 메서드 실행 하는 방법 (0) | 2021.12.22 |
| [ Vue.js ] v-for 사용하기 예제 02 - 객체배열 (0) | 2021.12.21 |
https://server-talk.tistory.com/81
Windows 방화벽 포트 열기
Windows 방화벽 포트 열기 방화벽이란? 방화벽이란? 인터넷 또는 네트워크에서 들어오는 정보를 확인한 다음 방화벽 설정에 따라 이를 컴퓨터로 전달하는 것을 차다 또는 허용하는 소프트웨어 또
server-talk.tistory.com
| [ Galaxy ] 갤럭시 키보드 LED점등 사용하기, 사용하는 방법 (3) | 2022.02.22 |
|---|---|
| [ 후기 ] 내돈내산, Galaxy Tab S8 Ultra - 갤럭시 탭 S8 울트라 (2) | 2022.02.22 |
| [ LG U+ 공유기 ] 엘지 유플러스 공유기에서 현재 접속 되어있는 ip 주소 확인하는 방법 (0) | 2022.01.26 |
| [ VSCode, Lint ] 에러 해결 potentially fixable with the `--fix` option (0) | 2022.01.20 |
| 윈도우 bash: node: command not found 에러 해결하기 (0) | 2022.01.17 |
오전 10시까지 한다던 점검... 오후 1시 15분 현재까지 점검중이네요.
https://ud.floor.line.games/kr/bbs/notice/notice_kr/1/detail/1643141497051027404/
모든 것에 反하는 세계, 언디셈버 그랜드 오픈!
ud.floor.line.games
잔버그 고치느라 고생이 많습니다.. 개발자님들 화이팅...ㅠㅠ 눈물이 눈 앞을 가리네요..
ㅋㅋㅋ갈려가는 소리가 여기까지 들린다.ㅠㅜ
| [데스티니 가디언즈2] 함선강탈자의 항해 12단계, 묻혀 있는 보물 찾는 방법 / 지도 얻는 방법 (0) | 2022.09.24 |
|---|---|
| [ LOL ] COIN, 게임하면서 LAPLATA 코인 벌기, P2E, PLAY TO EARN (1) | 2021.12.10 |
| [ LOL ] 롤 (리그오브레전드) 하면서 돈 버는 방법 - 코인 채굴 - 라플라타 채굴 (0) | 2021.12.06 |
| [ Roblox ] 게임 만들어보기 (0) | 2021.11.07 |
| Steam : 스크린샷 폴더 경로 (0) | 2021.08.29 |
공유기 IP주소 찾는법
VSCODE로 KIOSK에 SSH 접속하려고 했는데, 권한설정을 안해놓아서 접속 자체를 할 수 없었다.... ㅂㄷㅂㄷ
쓰면서 든 생각 : 어라.. PUTTY로 가능하지 않던가..??
ㅇㅁㅇ... 키보드 가져왔는디..
| [ 후기 ] 내돈내산, Galaxy Tab S8 Ultra - 갤럭시 탭 S8 울트라 (2) | 2022.02.22 |
|---|---|
| Window10 에서 포트 허용하여 URL로 웹 접속하기 (0) | 2022.01.28 |
| [ VSCode, Lint ] 에러 해결 potentially fixable with the `--fix` option (0) | 2022.01.20 |
| 윈도우 bash: node: command not found 에러 해결하기 (0) | 2022.01.17 |
| [ VSCode ] vscode ssh 접근, 파일 생성 및 저장 에러, permission error (0) | 2022.01.14 |