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

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

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

왜안될까??