ref에 있는 값을 옵저빙하고 싶어서

[$refs.component.data]() {}

같은 걸 해봤으나 택도 없다.

 

하나 의 템플릿 안에서 메서드로 jsx를 리턴하면 circular structure에 걸린다.

vue의 구조 잘못인지 trade off 개념으로 선택된건지 좀 파보고 싶다.

jsx는 render함수로 구현 되어어 한다.

즉 jsx를 쓰면 다르 템플릿과 같이 쓸 수 없다. (?)

 

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

vue로 하려다가 실패한 것들  (0) 2019.10.11
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

vue-if는 rendering자체가 안되고

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

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

vue로 하려다가 실패한 것들  (0) 2019.10.11
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

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

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

 

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

vue로 하려다가 실패한 것들  (0) 2019.10.11
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

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로 하려다가 실패한 것들  (0) 2019.10.11
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

A gradient is not color but image.

If you animate gradients, use a trick which animate position.

'FrontEnd' 카테고리의 다른 글

We can’t directly animate gradients using the CSS transition property  (0) 2019.05.23
code push 예시  (0) 2019.03.25
초간단 그림으로 보는 flux architecture  (0) 2018.07.25
lodash  (0) 2018.06.05
html unselectable  (0) 2018.05.13

// App version 1 (current version)

var onError = function (error) {
    console.log("An error occurred. " + error);
};

var onInstallSuccess = function () {
    console.log("Installation succeeded.");
};

var onPackageDownloaded = function (localPackage) {
    // Install regular updates after someone navigates away from the app for more than 2 minutes
    // Install mandatory updates after someone restarts the app
    localPackage.install(onInstallSuccess, onError, { installMode: InstallMode.ON_NEXT_RESUME, minimumBackgroundDuration: 120, mandatoryInstallMode: InstallMode.ON_NEXT_RESTART });
};

var onUpdateCheck = function (remotePackage) {
    if (!remotePackage) {
        console.log("The application is up to date.");
    } else {
        // The hash of each previously reverted package is stored for later use. 
        // This way, we avoid going into an infinite bad update/revert loop.
        if (!remotePackage.failedInstall) {
            console.log("A CodePush update is available. Package hash: " + remotePackage.packageHash);
            remotePackage.download(onPackageDownloaded, onError);
        } else {
            console.log("The available update was attempted before and failed.");
        }
    }
};

window.codePush.checkForUpdate(onUpdateCheck, onError);

//------------------------------------------------

// App version 2 (updated version)

var app = {
    onDeviceReady: function () {
        // Calling this function is required during the first application run after an update.
        // If not called, the application will be reverted to the previous version.
        window.codePush.notifyApplicationReady();
        // ...
    }
}



'FrontEnd' 카테고리의 다른 글

We can’t directly animate gradients using the CSS transition property  (0) 2019.05.23
code push 예시  (0) 2019.03.25
초간단 그림으로 보는 flux architecture  (0) 2018.07.25
lodash  (0) 2018.06.05
html unselectable  (0) 2018.05.13

react-router-dom의

Route는 unmount되는 즉시 dom에서 컴포넌트를 즉시 삭제한다

그래서 새로운 페이지의 등장 애니매이션은 쉽지만

기존의 페이지는 즉시 사라지기 때문에 애니매이션 효과가 반감된다.


React는 공식적으로 react-transition-group을 이용해서 해결하라고 한다.


<Route render={({location}) => (

<TransitionGroup>

  <CSSTransition key={location.key} classNames="page" timeout={300}>

    <Switch>

      <Route/>

      <Route/>

    </Switch>

  </CSSTransition>

</TransitionGroup>


)} />


와 같이 route이동에서 애니매이션을 쓸 수 있다.


주의할 점은 hashrouter를 쓸 경우 location.key가 없기 때문에 location.pathname 같은 걸로 대체해야 한다.


또한 location.pathname을 쓸 경우 다음과 같은 문제가 있다.

https://github.com/reactjs/react-transition-group/issues/136


참조

https://reacttraining.com/react-router/web/example/animated-transitions


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

routing animation을 해보자  (0) 2018.10.04
react-data-grid  (0) 2018.06.23
react-data-grid 정리#1 table cell word-wrap 문제  (0) 2018.05.29
react autofocus  (0) 2018.04.26
component, route, children  (0) 2018.04.17
react typescript로 시작하기  (0) 2018.04.16

+ Recent posts