Install node.js as you want with package 'n'

NodeJs install manager 'n'

• You can install /update  nodejs as you want  with package 'n' 
• please refer as below link in detail
•  https://github.com/tj/n

## install   : 

npm install -g n     # 'n' is not option, It's package name. 

Using simple web server for firewall test (python)

 ## 3.x ( # ref : https://docs.python.org/3/library/http.server.html)

python3 -m http.server  {port}

# ex) run 8888 port

$ python3 -m http.server 8888        

### server1 ####

curl http://server2:8888

> default response is  file listing 

### server2 ####

python3 -m http.server 8888

build vuejs with new config mode with production build

 ## When you want to use another config values in deploying. you must add NODE_ENV=production

## .env.mynewmode

   NODE_ENV=production                 ##<-- this line makes files for deploying 

   VUE_APP_MY_VAR='mynewvalue' 

## build

npm run build -- --mode mynewmode

#ref: https://cli.vuejs.org/guide/mode-and-env.html#modes

https://cli.vuejs.org/guide/mode-and-env.html#modes

using app_vue variable in scss file

 VUEJS 2.x

## vue.config.js

css: {

loaderOptions: {

sass: {

perpendData: `

$VAR_NAME: "

${VUE_APP_MY_VAR1}" ;

`;

}

}

}

### in scss

  att:  $VUE_APP_MY_VAR1 + "my.png"

mobile web debugging in desktop / in mobile

While  developing mobile web sites, the behavior of real mobile browsers are a litter different with desktop's. While debugging, Developers  are using console.log. But developers cannot see logs in mobile phones. It makes it hard to figure out ,when unexpected errors occurred in phones . 

Like desktop,  there are solutions in iOS and android. 

1. android 

    ref: https://developer.chrome.com/docs/devtools/remote-debugging/

2. ios debugging. Window  and osX

• iOS mobile debugging is more complicated then android 
• Install iTunes
• Install Node.js
• open command window or powershell as Admin Mode
• install debugging adaptor 
• npm install remotedebug-ios-webkit-adapter -g
  
  
• run below command , if you see 'firewall warnning', allow 'access'
• remotedebug_ios_webkit_adapter --port=9000 
• In chrome,  type: chrome://inspect/#devices 
• discover network target : configure 
• add "localhost:9000"
• Enable web inspector on your iOS device.
• Settings > Safari > Advanced : enable web inspector( 웹속성)
• Browse sites.
• you can see lists in PC chromes. 
• click inspect. 

* Another ( no additional Install)  : mobile debug in mobile

• ref: https://blog.chromium.org/2019/03/debugging-websites-in-chrome-for-ios.html)
• No install programs  , in Chrome (mobile) 
• Type "chrome://inspect" in url then you can see below screen 
• Click 'logging start'

•  In new tab , browsing your web application,  You can see logs in  inspect Tab. 

vue js Using router : basic (2.x) vuejs 라우터 사용하기 기본

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

// router.js

// define routes and import components

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

import Login from '../components/Login'

import Home from '../components/Home'

export default [{

name:'login',

path:'/login',

component:Login

},

{

name: 'root',

path: '/',

redirect: 'Home'

},

{

name: 'Home',

path: '/home',

component: Home

},

]

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

// main.js

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

import Vue from 'vue'

import VueRouter from 'vue-router'

import App from './App.vue'

import Routes from './router/router'

let router = new VueRouter( //instancing router

{

mode: 'history', //set history mode

routes: Routes // set routes

});

//!! important!! use() method is enable

// to use 'route-view,route-link in template of compoent.

Vue.use(VueRouter)

new Vue({

router,

render: h => h(App),

}).$mount('#app')

Arduino timer 4 digit segment (소독기를 위한 아두이노 타이머)

• 개요

이전에 만든 마스크 자외선 살균기에 타이머 기능을 추가하기 위해서 별도의 타이머를 제작하였다. 다른 기기에도 사용할 수 있도록 외부에 콘센트를 달고 여기에 플러그를 꽂아서 사용 하도록 만들었다. 기술적인 이슈는 없었으나 어떻게 하우징을 할것인지가 가장 고민한 부분이다, 안쓰는 플라스틱 박스를 이용하기로 최종 결정을 하였고, 부품을 최대한 최적화 해서 배치 했다. 또하나의 고민은 아두이노 전원을 어떻게 공급할 것인가? 이었는데, 쓰지않는 아이폰 충전기를 이용해서 전원을 공급하도록 했다.

• 준비물

○ 4디지트 segment

○ 아두이노 나도

○ 릴레이

○ 전원어뎁터(5v)

○ 케이스

○ 로터리엔코드 (+클릭스위치기능)

○ 점퍼케이블

○ 버저

○ 저항

• 회로도

• 프로그램 

○ Arduino ide에서 c로 작성되었음

○ 라이브러리는  buzzer용, 인코더용이 사용됨

• 구현사진

• 동작방법

- 전원을 꽂는다.

- 기본으로 60초가 표시된다. 

- 노브를 돌리면 시간이 초단위로 줄거나, 늘거나 해서 원하는 시간을 조절할수 있다. 

- 버튼을 누르면 카운트다운이 시작되며, 램프에 전원이 공급된다.

- 지정된 시간이 다되면, 부저소리가 세번 울리고, 램프전원이 차단된다.

- 카운트 도중 전원을 누르면 타이머가 멈추고 대기 상태가 된다.  

Basic file template of vuejs 3

/**basic vuejs file template */

<template>

<div>

{{items}}

</div>

</template>

<script>

export default {

name: 'ComList',

props: {

items: {

type: Array

}

},

methods: {

method1(){

return this.items.filter((item) => (item.show))

}

},

data(){

        return { data1:'v1', data2:'v2'}

},

created(){

},

mounted(){

}

}

</script>