Vue.js에서 라우터 URI에 파라미터 전달하기

Router 객체에서 /test 라는 라우트 경로를 추가하고 name을 파라미터로 받는다고 가정할 때, router.js 파일에 다음과 같이 코드를 추가합니다. { path: '/test/:name', name: 'test', component: Test } 위 코드에 따르면, 사용자는 http://localhost/test로 접속할 수 있으며, 뒤에 name이라는 변수의 값을 파라미터로 전달할 수 있습니다. 위 라우트 경로의 이름은 test이며, 사용하는 컴포넌트는 Test입니다. 이제, 사용자가 위의 경로로 접속했을 때 파라미터를 받아서 사용하는 코드를 작성합니다. My name is {{name}} 위의 컴포넌트에서 보는 바와 같이, mounted() 콜백함수가 호출되었을 때, $route라는 변수..

• format_list_bulleted 컴퓨터 공학/JavaScript
• · 2019. 4. 14.
• textsms

[Vue.js] vuex의 상태 값의 변화를 감지해서 지역 변수에 반영하는 방법

웹 프론트엔드를 개발하는 도중에 스낵바 컴포넌트를 사용할 일이 생겼는데, 다양한 vue 파일에서도 사용할 것 같아서 vuex에 스낵바 표출 여부인 snackbar 변수와 스낵바 메시지 값인 snackbar_message 변수를 할당해서 보관하고, 필요할 때 마다 actions를 통해 값을 변경하면 스낵바가 나타나게 구현하기로 하였습니다. 처음에는 v-model="this.$store.getters.get_snackbar"와 vuex의 snackbar를 직접 지정해주었더니 5초 타이머가 지난 후에 스낵바가 없어지는 과정에서 해당 값을 변경할 수 없다는 오류가 출력되었습니다. 이에 따라, 지역 변수로 snackbar를 만든 후에 v-model="snackbar"로 지정하고 vuex의 snackbar 값이 변..

• format_list_bulleted 컴퓨터 공학
• · 2019. 4. 13.
• textsms

유용한 Node.js 글로벌 모듈

nodemon 소스코드 저장 시 자동으로 재시작 pkg 실행파일 생성

• format_list_bulleted 컴퓨터 공학
• · 2019. 4. 12.
• textsms

Electron-vue 관련 링크 모음

Electron 설치 순서 https://jiwondh.github.io/2017/06/22/Electron1/ electron-vue https://github.com/SimulatedGREG/electron-vue/tree/master/docs/ko Node.js와 Vue.js 간 통신하는 방법 https://itinerant.tistory.com/52 Node.js와 Vue.js 간 통신하는 방법2 https://electronjs.org/docs/api/ipc-main 기타 electron-vue를 설치하기 위해서는 vue-cli 2버전을 사용해야 한다. npm install -g @vue/cli로 vue 3버전 이상을 설치해야 vue add vuetify를 사용할 수 있다. 이를 위해, elec..

• format_list_bulleted 컴퓨터 공학/JavaScript
• · 2019. 4. 12.
• textsms

유용한 사이트 모음

생활 http://se.naver.com/ 네이버 SE (구글처럼 빠른검색) http://stackoverflow.com/ 프로그래밍 지식 사이트 https://www.flitto.com/ 사람이 번역해주는 사이트 http://www.sweetsearch.com/ 학생에게 유용한 검색엔진, 신뢰적인 사이트만 소개 http://navercast.naver.com/list.nhn?cid=461&category_id=461 네이버캐스트, 각종 it정보 게시 http://www.gasengi.com/ 가생이닷컴, 해외반응 게시 https://chrome.google.com/webstore/detail/iconic-history/hfacpfhgpmaifaanbmgbbjkfgelookom 내 현재 히스토리 http..

• format_list_bulleted 유용한 웹사이트
• · 2019. 4. 7.
• textsms

[단순코드] Node.js 로거 모듈 winston/winston-daily-rotate-file 초기화

logger.prototype.init = function(){ if(this.writer != null){ return; } this.writer = winston.createLogger({ transports: [ new (winstonDaily)({ name: 'info-file', filename: path.join(utils.LOG_PATH, './server_%DATE%.log'), datePattern: 'YYYY-MM-DD', colorize: false, maxsize: 50000000, maxFiles: 1000, level: 'info', showLevel: true, json: false, timestamp: time_stamp_format, format: winston.format..

• format_list_bulleted 컴퓨터 공학/JavaScript
• · 2019. 4. 6.
• textsms