vue-if는 rendering자체가 안되고

vue-show 는 display: none으로 감춘다.

'FrontEnd > vue' 카테고리의 다른 글

vue-if 와 vue-show  (0) 2019.08.17
vue-style-loader : cannot resolve "./listToStyles"  (0) 2019.08.16
Typescript, Vue, Webpack  (0) 2019.08.14

npm i @babel/core @babel/preset-env -D

 

npm i babel 한다고 core가 설치되지는 않는다.

각각 설치해야 한다.

 

vue-style-loader@4 부터 es6 module을 사용한다.

그래서 babel없이 import를 할 수 없다.

 

'FrontEnd > vue' 카테고리의 다른 글

vue-if 와 vue-show  (0) 2019.08.17
vue-style-loader : cannot resolve "./listToStyles"  (0) 2019.08.16
Typescript, Vue, Webpack  (0) 2019.08.14

ts-loader@^2.3.7

은 webpack4에서 사용 할 수없다.

// ts-loader 2.3.7
function getLoaderOptions(loader) {
    // differentiate the TypeScript instance based on the webpack instance
    var webpackIndex = webpackInstances.indexOf(loader._compiler);
    if (webpackIndex === -1) {
        webpackIndex = webpackInstances.push(loader._compiler) - 1;
    }
    var loaderOptions = loaderUtils.getOptions(loader) || {};
    var configFileOptions = loader.options.ts || {};
    var instanceName = webpackIndex + '_' + (loaderOptions.instance || configFileOptions.instance || 'default');
    if (utils_1.hasOwnProperty(loaderOptionsCache, instanceName)) {
        return loaderOptionsCache[instanceName];
    }
    validateLoaderOptions(loaderOptions);
    var options = makeLoaderOptions(instanceName, configFileOptions, loaderOptions);
    loaderOptionsCache[instanceName] = options;
    return options;
}

loader 에서 getLoaderOptions(this)로 부르는데 options가 없어서 undefined에 접근하는 오류가 발생한다.
ts-loader version 4 이상을 써야 한다.

webpack4 이상에서 vue-loader 12.0.3 또한 안된다.
위와 마찬가지로 options가 없다.
vue-loader version 15 이상을 써야 한다.
참조: https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes

'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

webpack 4로 넘어오면서 안되는 것들  (0) 2019.08.16
webpack version issue  (0) 2019.08.14
error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15

npm show webpack@* version

 

설치 가능한 WEBPACK버전들을 보고 싶다면 

'nodeJS' 카테고리의 다른 글

npm 설치 가능한 버전 보기  (0) 2019.08.16
Conflicts in NextJs and Routing-Controllers  (0) 2019.07.30
또 다른 circular dependency 처리  (0) 2019.04.09
nodeJs 구조  (0) 2018.04.18
npm --save --save-dev  (0) 2018.04.14

webpack V4 update하면

ts-loader도 update해줘야 한다.

'FrontEnd > babel&webpack&eslint' 카테고리의 다른 글

webpack 4로 넘어오면서 안되는 것들  (0) 2019.08.16
webpack version issue  (0) 2019.08.14
error TS2300: Duplicate identifier  (0) 2018.04.29
please use config.optimization.minimize instead  (0) 2018.04.19
eslint] ES7 적용  (0) 2018.04.15
eslint] but never used 처리  (0) 2018.04.15
module.exports = {
    mode: "development",
    entry: {
        app: "./main.ts"
    },
    resolve: {
        extensions: ["vue", "ts", "js", "json"],
        alias: {
            "vue$": path.join(distRoot, "vue.esm.js"),
            // "@": "./"
        }
    },
    externals: {
        'vue': {
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue',
            root: 'Vue'
        },
    },

    output: {
        path: distRoot,
        filename: `[name]-dist`.ts
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                  appendTsSuffixTo: [/\.vue$/],
                }
              },
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

.vue 파일은 js가 아니므로 loader가 필요 하다.
bash npm i vue-loader
vue-loader를 쓰려면 vue-template-compiler가 필요하다.

vue와 vue-template-compiler는 버전이 같아야 한다.
bash npm i vue-loader
vue-loader를 webpack에서 쓰려면 VueLoaderPlugin이 필요하다.
const {VueLoaderPlugin} = require("vue-loader")
선언하고 plugins에 추가한다.

현재 vscode에서 vue module을 찾지 못한다.
vue-shim.d.ts 파일에 추가한다. 없으면 만든다.

declare module "*.vue"
{
    import Vue from "vue"
    export default Vue
}

이렇게 해도

Module not found: Error: Can't resolve 'vue' in

라는 에러가 뜬다.

externals: {
  'vue': {
    commonjs:  'vue',
    commonjs2:  'vue',
    amd:  'vue',
    root:  'Vue'
  }
}

webpack에 추가한다.
vue는 react보다 typescript와 webpack에서 지원을 잘 안해준다.

'FrontEnd > vue' 카테고리의 다른 글

vue-if 와 vue-show  (0) 2019.08.17
vue-style-loader : cannot resolve "./listToStyles"  (0) 2019.08.16
Typescript, Vue, Webpack  (0) 2019.08.14

db.collection.insert()

collection이 없으면 만들고 삽입

db.collection.insertOne()

하나 추가

db.collection.insertMany()

여러게 추가

'database' 카테고리의 다른 글

[MongoDB] insert  (0) 2019.08.02
MongoDb Query  (0) 2019.08.02
if exist drop index and create index in MYSQL  (0) 2019.05.18

NOSQL인 MongoDb를 공부하려고 Compass 설치하고

query 연습부터 해봐야겠구나

하고 query 치는 데를 한참 찾았는데...

query 개념이 기존과 좀 다르다.

일단 이건 javascript로 만들어졌으니 sql이 아니라 함수 실행인데

compass에서는 안보인다.

겁내지 말고 shell로 시작해 보자

그냥 node cli 뛰우는거랑 똑같다.

MongoDb사이트 가입하면 512mb짜리 공짜 DB제공해주니 가입해 보자.

튜터리얼용 db들도 세팅되어 있다.

 

☛ []는 변수로 생각하면 되니 []를 치진 말자

ex는 순차적으로 따라 해야 한다.

 

> db

현재 db가 나옴

>show dbs

db들이 나옴

> use [dbname] // ex: use sample_training

dbname사용

> show collections

collection들 보여줌

> db.컬렉션이름.find() // ex: db.grades.find()

collection을 보여준다.

자바스크립트니 db["컬렉션이름"].find() 처럼 동적으로 부를 수도 있다.

자바스크립트니 당연히 json이 나오고

자바스크립트를 잘한다면 MongoDB 참 쉽겠구나 라는 생각이 들거다.

'database' 카테고리의 다른 글

[MongoDB] insert  (0) 2019.08.02
MongoDb Query  (0) 2019.08.02
if exist drop index and create index in MYSQL  (0) 2019.05.18

response는 clilent로 일단 한번 보내지면 다시 쓸 수가 없다.

 

res._headerSent 로 확인 할 수 있으나

언더바에서 알 수 있듯이 typescript에서는 노출이 되지 않는다.

현재 nextJs와 routing-controllers를 같이 쓰고 있는데

router를 두개 쓸 경우 구분해 내기가 쉽지 않다.

routing-contorllers안에서 nextJs를 처리할 수 있어야 할 것 같다.

+ Recent posts