Puppy's paw

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

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

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

npm show webpack@* version

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

webpack V4 update하면

ts-loader도 update해줘야 한다.

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에서 지원을 잘 안해준다.

db.collection.insert()

collection이 없으면 만들고 삽입

db.collection.insertOne()

하나 추가

db.collection.insertMany()

여러게 추가

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 참 쉽겠구나 라는 생각이 들거다.

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

res._headerSent 로 확인 할 수 있으나

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

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

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

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

If you use next server's prepare method,

routing-controllers can't find moudle 'cors'

You must use cors in express.

action.type 상수는 다르게 했는데

안에 string이 겹치는 게 있어서 계속 다른 루트를 탔다 ㅜㅜ