2021. 8. 31.

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


2021. 8. 16.

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"

2021. 6. 6.

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

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



2021. 5. 20.

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')