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

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

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/에서 새로고침 하면 빈화면만 나온다.

왜안될까??





 

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

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


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

Alter table 'tablename'  convert to charset utf8;

이제 굳 !

간헐적 단식과 추가적인 TIP (나의 경험을 덧으로 추가해보았다.)

1.인슐린 자극 안하는 음식먹기

당분, 가공식품, 패스트 푸드 피하기 

자연식품 선호하기

기존에 포스팅한 내용이지만 비닐로 포장된 모든 식료품은 피해야한다. 하지만 우린 현대인이다.

최소한으로 줄이는 연습이 현실적이다.

붉은 피망은 요즘 정말 비싸다 주먹만한 피망2개가 4천원대 

요즘은 브로콜리가 그나마 약간 저렴하니 브로콜리 섭취를 추천 

2. 채식 위주의 식단으로 ..

녹황색 채소 - 

(채소류는 열에 데치거나 열에 닿으면 그만큼 영양소가 파괴될 수 있다.

깨끗이 씻어 생으로 먹자!)

3. 단식시간 조절

나의경우 야간업무를 병행하기에

최장 30시간 이상 넘길 경우 신체 활동에 무리가 갈 수 있다.

오후11시부터 익일 오후3시 그러니까 15시간정도 간헐적 단식을

유지한다. 식사할때 내가 소화하기 편한 분량으로 식사한다 

오후11시 자율배식이므로 평소 먹는량의 2/3 가량 줄여서 식사한다.

4. 공복 상태에서 운동을 한다.

원래 운동은 공복상태가 가장 좋다. (몸이 가벼운느낌)

전에 발포 비타민제 + 물 600ml 정도 준비하고 운동을 했는데

굉장히 좋았다.

5. 중량 운동을 한다?

평소 맨몸운동을 자주하는 나로서는 중량운동은 현재 안하고있다.

팔굽혀펴기 스퀏 정도로 간단히 운동한다.

유튭 단식으로 살빼는 5가지 다이어트 방법에서 추가적인 덧을 단다.

추가 )

물을 자주마신다. 수분보충은 건강유지에 기본이다.

비타민 섭취가 중요하다고 생각한다.

간헐적 단식을 할 때 요즘 같은 환절기에 면역력이 크게 떨어질 수 있다.

감기에 걸리게 되면 간헐적단식을 유지할수 없다. (감기가 악화되어 폐렴으로 가면 답이안나온다)

비타민C의 주기적인 섭취 (6시간마다 2000mg) 주기적으로 식후 섭취 하여 감기에 대비한다.

간단(간헐적 단식)하면 간단하다.

살을 못빼는사람은 의지 박약이다 -> 틀린말


살을 못빼는 사람은 시간 약속을 지키지 못한다 - > 어느정도는 맞는말


내가 만약 활동하는시간이

오전 6시30분 기상을 한다.

6시30분 기준

약 7시 오전 식사를 마친다.



정오에 점심식사를한다. 약 오후 1시쯤 점심식사를 한다.


저녁 6시 저녁식사를한다 -> x



다음날 오전 6시 30분 기상을한다.

오전 7시 아침식사를한다.



여기서 1일 2식을 하면 살이빠질수있다. (3식 이었던 사람 기준)


왜?  13시 식사를 했기때문에 18H 가 지난 이후 다음 식사하는 방식으로 간헐적단식을 하게되니까.



일정시간 공복을하면 그시간 동안  우리몸이 필요한 에너지를 몸속에서 찾기 시작한다.

그게 허기진시간이다.  다음 끼니 시간이니까 저녁시간을 건너뛰면 약 7~8시일듯

그시간이 지나면 배고픔도 사라지고 수면의 질도 더 높아질거라고 예상된다.


1/25 이후 약 5~6kg을 감량했는데 나도 술을마셔서인지 지금 배고파서 이것저거 먹는다.


하지만  위의 일정에 맞는 수면시간 전후 공복을 유지하는 루틴을 지킨다면 (비만/혈압)과의 전쟁은

불필요하지 않을까 생각된다.

제일 싫어하는말

1. 다 제 때가 있어

니가 지금 고생하는건 그때 그 고생을 안해서야

- 모든걸 다안다는듯한 그 표정과 그말투

글쎄 모든게 정해져있다면 늙은나이에 많은걸 이루어낸사람은 젊었을때 이뤘어야했던걸 뒤늦게 이룬걸까?

무슨 때가 있는걸까 젊어서 고생은 사서하라고? 그럼  젊은 재벌2세들은 왜 사서안하지?

고생이라든가 불편은 해결과제가 아닐까? 그걸 사서하라고? 머저리냐?





2. 니가하는게 그러면 그렇지

이건 말이 필요없다 진짜 박스테이프로라도 감싸주고싶은 입이다.



말이란건 내뱉는사람의 정신을 나타낸다. 그러니까 곰곰히 생각해보고 개같다 싶으면 차라리 혀를 깨물어 일주일이라도 말을 안하는게 낫다


어떤말이든 당신의 가능성에대해 0.5%라도 이야기하는 사람이있다면 망치로때리든가 그자릴 피해야한다.

전혀 쓸데없는 말이라고 역사적으로  입증된 결과다.

뭐야 자바스크립트 환경설정하는데 설치해야될게 너무 많아

다시 치기 귀찮으니 저장해놓는다

어차피 다시쓸땐 버전들이 다 바뀌어있겠지만 쓰기귀찮은건 맞음

sudo npm i -D babel-loader@7.1.4 style-loader@0.20.3 css-loader@0.28.11 babel-core@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.2
4.1