멋진 인생이 기록되도록 30분만 더 하자!

2019년 3월 6일 수요일

방금 뭔가를 해결했다.

visual studio code

vs code를 사용하면서

처음으로 고구마 천만개를 먹고 물을 안먹은느낌

바로 tab 키가 내가 원하는대로 움직이지 않아서 정말 답답했다.

콘솔에서도 탭을누르면 원래 기존에 node_modules/.bin

여기서 node_까지만 치고 탭을치면 자동완성되는 그런기능이나

에디터에서 4칸? 8칸? 정도 간격을 띄우는 역할을 해줘야되는데

tab을 누르니까 마우스를 쓰지않고

키보드만을 쓰기위한 기능 (다른탭 가선택)기능?뭐이런게 되버려서

이걸어쩌나 싶어 구글링을 해봤더니

나같은사람이 많더라는...

해결방법은 컨트롤 + M을 누르면

바뀐다

하 하루종일 유튜브보고 딴짓하다가

에헴 공부좀해볼까 해서 실상 공부는커녕 이런 작은 불편함 해결해서

뿌듯해하는 모습보면 하 진짜 밥과 공기가 아깝다 ㅠ

2019년 3월 5일 화요일

웹팩

/.node-modules/.bin/webpack-dev-server --open

짜잔

크롬에 걍열려버린다

설정에서 entry가 여러개일때 이런 에러를 뱉는다.

ERROR in chunk m1 [entry]
bundle.js
Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks 0 and 1)

ERROR in chunk m2 [entry]
bundle.js
Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks 0 and 2)

웹펙에서 css파일을 추가하고 webpack.config.js 에서 로더를 설정하다가 만난 에러

ERROR in ./src/css.css (./node_modules/css-loader!./node_modules/style-loader!./node_modules/css-loader!./src/css.css)
Module build failed (from ./node_modules/css-loader/index.js):
Unknown word (5:1)

3 | // load the styles
4 | var content = require("!!../node_modules/css-loader/index.js!./css.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // Prepare cssTransformation
7 | var transform;
8 |

@ ./src/css.css (./node_modules/style-loader!./node_modules/css-loader!./src/css.css) 4:14-146

before

const path = require('path')

module.exports = {

    entry:'./src/entry.js',

    output:{

        path:path.resolve(__dirname,'dist'),

        // path:__dirname+'/dist',

        filename:'bundle.js'

    },

    module:{

        rules:[

            {

                test:/\.css$/, 

                use:[{loader:"style-loader"},{loader:"css-loader"}]

            }

        ]

    }

}

after

const path = require('path')

module.exports = {

    entry:'./src/entry.js',

    output:{

        path:path.resolve(__dirname,'dist'),

        // path:__dirname+'/dist',

        filename:'bundle.js'

    },

    module:{

        rules:[

            { test: /.scss$/, use: [ "style-loader" , "css-loader" ] }

        ]

    }

}

2019년 3월 1일 금요일

vue 연습

  <body>  
   <div id="app">  
     <p>{{togglehiding}}</p>  
     <p v-if="togglehiding==1"> v if New p tag</p>  
     <p v-else-if="togglehiding==2"> v-else-if -2 New p tag</p>  
     <p v-else-if="togglehiding==3"> v-else-if -3 New p tag</p>  
     <p v-else-if="togglehiding==4"> v-else-if -4 New p tag</p>  
     <p v-else-if="togglehiding==5"> v-else-if -5 New p tag</p>  
     <p>  
     <button @click="togglehiding=!togglehiding">clickme</button>  
     <button @click="plus">plus ++</button>  
     </p>  
   </div>    
   <script type='text/javascript'>  
   var vm = new Vue({  
     el:'#app',  
     data:{  
       message:true,  
       togglehiding:1  
     },  
     methods:{  
       sayhi:function(v){   
         alert(v)  
       },  
       plus:function(){  
         this.togglehiding++  
       }        
     }  
   })  
   </script>

커스텀 이벤트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1,h2,h3,h4,h5,h6,div,p,span{font-size:36px; font-family: helvetica; padding:0; margin:0;}
        .comp_root{background:red; color:white;}
        #app{background:orange; padding:25px; color:blue}
    </style>
    <script type="text/javascript" src='../vue.js'>
    export default {
        
    }
    </script>
</head>
<body>
    <div id="app">

      <h1>Parent DIV</h1>     
      <comp v-on:relay='allocate'> </comp>
      <hr>
      <p>{{content1}}</p>
      <hr>
      <p>{{content2}}</p>     

    </div>  

    <template id="temp">
      <div class="comp_root">
        <h2>Component</h2>
        <input v-model='message1'>
        <input v-model='message2'>
        <button v-on:click='send'>Send data</button>
      </div>
    </template>  

</body>    
<script type='text/javascript'>

    var vm = Vue.component('comp', {
      template:'#temp',
      data:function(){
        return{
          message1:'저장된 �"시지1',
          message2:'저장된 �"시지2'
        }
      },
      props:[],
      methods:{
        send:function(){
          this.$emit('relay', this.message1, this.message2)
        },
        allocate:function(v1,v2){
            this.content1 =v1,
            this.content2 =v2
        }
      },
    })

    var vm = new Vue({
      el:'#app',
      data:{
        content1:'컨텐트1',
        content2:'컨텐트2'

      }
    })   
</script>
    

</html>

2019년 2월 21일 목요일

자바스크립트로 서버와 클라이언트 구축하기 - 불평불만

앞부분의 설명들은 읽기가 너무 버거워 쇼핑몰 프로젝트 예제만 진행하는데...

multer를 사용하는 파일 업로드 부분에서 막혔다.

예제의 소스코드를 그대로 따라해보니..

multer를 사용하는 부분에서 (422페이지 axios라는 라이브러리를 사용하기전)

req.file.filename << 이게 undefined 라고 계속 나오는데

따라가보니 shop/page/registry.vue 의

폼 부분에서 enctype="multipart/form-data" 라는 한 줄이 빠져서
<input type="file" name="img">

부분이 서버쪽에선 아무리 req.file을 찾아보려 해도 찾을 수 가 없지!

굉장히 사소한 부분이지만 책을 따라가는 입장에선 이거 한줄로 막혀버려 포기할수도 있다.

물론 다무시하고 axios를 사용하는 부분으로 넘어가면(아직 거기까진 해보지 않았지만

axios는 폼대신 사용하니 enctype을 따로 명시해주지 않아도 돌아갈지 모르겠지만)

내 소스는 문제없이 돌아가는데? 라고 말해버리면 할 말없지만 html 폼을 처음 접하는 친구들은
아니 대체 뭘해야 axios 안써도 db에 파일명이 들어가는거지? 라는 의문이 생기지 않을까?

대상독자 : 초중급

이런거 찾을줄 알아야 초중급에 드는거다! 라면 할 말없고 ㅋㅋ

<template>
    <div class="container">

        <form action="/api/v1.0/admin/clothes/registry"
        enctype="multipart/form-data"
        method="post">
            <label for="옷 이름">옷 이름</label>
            <input type="text" name="name">

            <label for="옷 가격">옷 가격</label>
            <input type="text" name="price">

            <label for="옷 카테고리">옷 카테고리</label>

            <select name="category">
                <option v-for="cate in categories" v-bind:value="cate" :key="cate">
                    {{cate}}
                </option>
            </select>

            <label for="옷 이미지">옷 이미지</label>
            <input type="file" name="img">
            <button type="submit"> 등록하기 </button>

        </form>
    </div>
</template>

페이지 424 클라이언트 구현에서 그대로따라가다보면
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 10)
이런 에러를 보여주는데 캐치블록이 없기때문에 이런 에러를 뿌린다.

검색해보니
이런식으로 수정하면 db의 내용을 보여준다.

import axios from 'axios'

export default{

     asyncData ({ params, error }) {

    return axios.get(`http://localhost:3000/api/v1.0/admin/clothes`)

    .then((res) => {

      return { clothes: res.data }

    })

    .catch((e) => {

      error({ statusCode: 404, message: 'clothes not found' })

    })

}

}

페이지 433을 보면 유저리스트를 읽어와서 페이지네이션 하는부분이 있는데

왜 또 shop/pages/admin/clothes.vue 가 나오는건지.. 뭔가 의아한데? 라고 생각했는데

역시나 users.vue가 맞는거같다 ㅋㅋ

내용은 걍 clothes.vue의 코드내용과 같은 내용이라 수정이 안된거같다. ;;;;

435페이지를 보면;;; 유저들에 price가 왜있나 의아했다. 왜 고객의 가치를 쇼핑몰이 매기고있을까
다시 411페이지로 돌아가보니 유저가 보유하고있는 돈이었다.

어떻게든 446페이지까지는 실습을 진행해왔다.

여기서 문제점이 발생하는데
nuxt.js를 사용할때 서버를 구동시
1. sudo node server/index.js 로 구동 하는가?
2. sudo npm run dev 로 구동하는가에 따라

2번으로 했을때 서버페이지가 열리지 않거나 1번으로했을때 서버페이지는 열리지만

localhost:3000/ 으로 접속시 무조건 빈페이지를 반환하는 문제점이 생겼다.
localhost:3000/index 로 접속하면 일단 this page could not be found 라는 메시지를 보여주고
back to the home page 라는 링크를 보여주는데 클릭하면
url 은 localhost:3000/으로 가며 내가원하는 cloth를 db에서 정상적으로 읽어서 가져온다.

라우터에서 localhost:3000/ 으로 연결하는 설정이 뭔가 사전에 이루어져서 이런 문제가 발생하는듯 하다.

책에선 사용자 방문하면 관리자가 등록한 cloth들이 주욱 페이징 처리되어 나오고 여기서 클릭으로 들어가면 상세페이지로 나와야 하는데 무조건 localhost:3000/에서 새로고침 하면 빈화면만 나온다.

왜안될까??

2019년 2월 20일 수요일

음 mysql에 테이블설정이 utf8이 아니었을때 생기는 문제 흔한 문제 우리 이런건 걍 빨리 해결하고 커피한잔하러가자

incorrect string value'\xEc\ 각종 외계어'... for column 'name ' at row 1

이런거 뜨면 그냥 myql 테이블에 한글이 들어가서 생기는 문제라고 보면 될거같다.

Alter table 'tablename' convert to charset utf8;

이제 굳 !