Vuejs 배포시 route 동작 처리

vuejs에서 express로 배포하는 방식을 기존에 설명 했었다.

문제는 vuejs route에 주소를 직접 치고 들어가면 404 오류가 발생하였다.

express쪽에서 기본적인 요청은 vuejs의 route를 바라보게 하고 싶어서 검색을 해보니, Routes not working in production라는 글을 확인 하였다.

처리 방법은 express에 마지막 부분에 다음 코드를 추가 하면 된다. index.html은 vuejs를 배포한 위치이다.

app.get('*', (req, res) => {
  res.sendFile(`${__dirname}/public/index.html`);
});

vuejs도 잼나네!

참고 자료


Posted by lahuman

How to fix “this is undefined” in Vue.

Vue를 써보고 있는데, Vue 안에 method를 선언하고 this를 호출하니 undefined가 발생하였다.

export default {
  methods: {
    sayHello: () => {
    	this.val = 'hello';
    	console.log(this.val);
    }
  },
  data() {
	  return {
	  	val: ''
	  }
  }
}

#### 결과
this is undefined

원인을 찾아 보니 다음과 같은 내용을 확인했다.

If you try to access this from inside of an arrow function that’s on a Vue component, you’ll get an error because this doesn’t exist!

Vue 구성 요소에있는 화살표 함수 내부에서 this에 액세스하려고 하면 존재하지 않기 때문에 오류가 발생합니다!

Vue 구성 요소 안에서 this를 사용하려면 화살표 함수를 사용하지 말아야 한다는 내용이다. 다음과 같이 수정하면 잘 동작한다.

export default {
  methods: {
    sayHello() {
    	this.val = 'hello';
    	console.log(this.val);
    }
  },
  data() {
	  return {
	  	val: ''
	  }
  }
}

#### 결과
hello

화살표 함수는 익명 함수를 만들때 사용하며, 다음과 같은 이유로 사용됩니다.

  • 보다 짧고 응축된 구문
  • 향상된 가독성
  • this 주변상황에서 취해진다.

Vue의 method 내부에서 사용하는 것은 크게 문제가 없지만, method 자체를 화살표 함수로 선언할 경우 this를 사용할 수 없다.

# Vue 내부에서 화살표 함수 사용 예
data() {
  return {
    match: 'This is a message',
  };
},
computed: {
  filteredMessages(messages) {
    console.log(this); // Our Vue component
    
    const filteredMessages = messages.filter(
      // References our Vue Component
      (message) => message.includes(this.match)
    );
    
    return filteredMessages;
  }
}

참고 자료


Posted by lahuman

How To Use Winston to Log Node.js Applications

간단하게 설정만 작성하는 것으로 원본자료 How To Use Winston to Log Node.js Applications을 보세요.

var appRoot = require('app-root-path');
var winston = require('winston');

// define the custom settings for each transport (file, console)
var options = {
  file: {
    level: 'info',
    filename: `${appRoot}/logs/app.log`,
    handleExceptions: true,
    json: true,
    maxsize: 5242880, // 5MB
    maxFiles: 5,
    colorize: false,
  },
  console: {
    level: 'debug',
    handleExceptions: true,
    json: false,
    colorize: true,
  },
};

// instantiate a winston.createLogger with the settings defined above
var logger = winston.createLogger({
  transports: [
    new winston.transports.File(options.file),
    new winston.transports.Console(options.console)
  ],
  exitOnError: false, // do not exit on handled exceptions
});

// create a stream object with a 'write' function that will be used by `morgan`
logger.stream = {
  write: function(message, encoding) {
    // use the 'info' log level so the output will be picked up by both transports (file and console)
    logger.info(message);
  },
};

module.exports = logger;

요렇게 설정만 해놓아도 기본으로 사용이 가능하다.

추가로 알게된 App Root Path Module 도 꽤 유용해보인다.

app의 root path를 제공하여 다음과 같이 사용할 수 있다.

#1 
var appRoot = require('app-root-path');
var myModule = require(appRoot + '/lib/my-module.js');

#2
var reqlib = require('app-root-path').require;
var myModule = reqlib('/lib/my-module.js');

#3
// In app.js
global.reqlib = require('app-root-path').require;
 
// In lib/module/component/subcomponent.js
var myModule = reqlib('/lib/my-module.js');

#4
var myModulePath = require('app-root-path').resolve('/lib/my-module.js');

좋은게 많은데 몰라서 못쓴다.

공부 많이 좀 해야겠다. 요즘 게을러져서 공부도 안하고 그냥 날로 먹을라고 한다.

참고 자료


Posted by lahuman