코드 기록장

여는 글

5일 동안 계속 붙잡고 있다가 해결해서 까먹기 전에 글로 써둔다.

붙잡고 있을 때는 진짜 힘들었는데 어느 순간 갑자기 되니까 기쁘다기 보다는 어안이 벙벙하다.

드디어 됐다... 이런 느낌?

Vue.js + Node.js + MongoDB 연동

 찾고 찾아서 연동되는 코드를 찾았다.

https://gnaseel.tistory.com/29

여기서 나는 클라우드가 아니라 로컬(Compass)을 사용했는데 코드 차이는 없는 듯 하다.

Vue.js + Node.js + MongoDB 값 넣기

input태그에서 v-model 쓰지말고 name으로 써야 동작한다.... 전체코드는 아래에 있다. (8.18일 해결)

참고한 파일은 frontend/src/pages/Blog-Develop.vue 와 backend/index.js

https://ms4hat.tistory.com/17

<전체 코드>

++21년 12.31 추가

this.axios 사용 금지. https://codelist.tistory.com/83 참고

frontend/components/SignUpPage.vue  (내 경우에는 이 컴포넌트를 views에 넣어 사용한다)

<template>
    <form action="/signup" method="post">
      <input type="text" name="id"> <!-- 여기를 v-model로 하면 안된다! -->
      <input type="text" name="password"> <!-- 여기를 v-model로 하면 안된다! -->
      <input type="text" name="name"> <!-- 여기를 v-model로 하면 안된다! -->
      <input type="text" name="address"> <!-- 여기를 v-model로 하면 안된다! -->
      <button @click="signup()">제출</button>
    </form>
</template>

<script>


export default {
    name : "SignUpPage",
    data (){
        return {
            id : '',
            password : '',
            name : '',
            address : '',
            output : ''

        }
    },

    methods : {
        signup() {
            this.axios.post('http://localhost:3000/signup',  { 
            headers : {
                "Content-Type" : "application/x-www-form-urlencoded"
            },
            id : this.id,
            password : this.password,
            name : this.name,
            address : this.address
                
            }).then((response) => { 
                console.log(response)
            })
            .catch((error) => {  
                this.output = error
            }) 

        }
    }, 



}


</script>

<style>

</style>

backend/routes/index.js

var express = require('express');
var router = express.Router();
router.use(express.urlencoded({extended:true}));
router.use(express.json())
var User = require('./mongodbuser');


/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


/* 봐야할 부분 */
router.post('/signup', (request, response) => {
  console.log('success served');
  console.log(request.body);
  User.create ({
    id:request.body.id,
    password:request.body.password,
    name:request.body.name,
    address:request.body.address
  });
});

module.exports = router;

결과 (고치기 전에는 undefined 또는 {} 로 떠서 프론트엔드에서 값을 못 넘긴건지 백엔드에서 못 가져오는 건지 고민을 많이 했다.)

MongoDB Compass에서 확인한 결과

닫는 글

5일이나 걸렸던 이유를 생각해보면 문제 위치를 잘못 파악하고 있었던 게 크다.

Node->DB 에서 기능이 동작하지 않는 줄 알고 이에 대한 구글링을 열심히 했으나

알고보니 애초에 Vue->Node에서 안되는 거였다. 

이 부분이 문제라는 것을 아는데 3일 걸렸고 해결하는데 2일이 걸렸다.

 원래는 어느 부분 문제인지 위치 파악부터 하는데 멘탈이 털려서 그랬나보다. (급하기도 했고..)

상품 페이지

이제 로그인, 회원가입, DB, 결제, 배포만 남았다.

드디어 백엔드!

여는 글

제품 판매 사이트 포트폴리오를 만드는 목적은 결제 시스템을 구현하고 싶었기 때문이다.

그래서 그냥 아무 물건 올려놓고 결제 구현에 집중해야지 했다가 기왕 이렇게 된거 브랜드 명, 컨셉, 제품에 디테일까지 정해볼까? 라는 생각이 들어서 어쩌다보니 브랜드 기획까지 해버렸다.

진짜 브랜드 하나 런칭하는 듯한 느낌이 들어서 설렜다.

올랑올랑 기획

어차피 판매하는 제품이 아니므로 일반 제품이 아니라 판타지적 요소를 가미해 게임에 있는 HP 포션처럼 포션들을 팔자! 가 시작점이었다.

그래서 포션들을 기획하고 포션이라고 하니 포션 제조하는 마녀 생각도 나고 그래서 컨셉은 몽환, 보라색 위주의 디자인으로 결정했다.

이름을 정할때는 순우리말이었으면 좋겠다는 생각이 들어 순우리말로 지었다.

기업이면 당연히 기업의 슬로건도 있어야 해, 하면서 메인 페이지에 슬로건도 써놓고.

닫는 글

이렇게 해서 완성된 메인 페이지

여는 글

Vue 파일구조 이해하느라 하루가 꼬박 걸렸고 html에서 많이 막혔다.

그냥 돼야 정상인데 왜 여기서만 안되는 지... 

결국엔 <template>을 이해하는 계기가 되긴 했다.

아 그리고 참고한 블로그들이 있는데 크롬에 고정시켜둔 페이지가 다 날라갔다.

작년에도 이랬던 적이 있는데 1년에 한 번씩은 꼭 이러는 듯...

Vue 파일 구조

먼저 나는 frontend는 vue, backend는 node.js를 사용하므로 둘을 연동해놨다. (이것도 참고한 블로그 날아감) 구글링하면 많이 나와있다.

일단 둘다 cmd에서 설치하고 그 경로에서 vscode로 열면 아래처럼 되어 있다.

나는 이미 메인페이지까지는 만들어둔 상태라 좀 더 파일이 많지만 네모박스만 집중해서 보면 된다.

components는 이해하기 쉽게 표현하자면 플러그인이다. 별도의 파일로 만들어놓고(html, css, javascript) views 아래에 있는 서브페이지들에 끼워넣는 식이다.

이게 Vue가 권장하는 개발 방식이라고 한다.

 예를 들어, 어떤 웹 페이지에 왼쪽 상단 브랜드 로고가 있다. 이 브랜드 로고는 어느 서브페이지를 가던 상단에 항상 떠있어야 한다.

근데 그걸 모든 서브페이지에 따로 코드를 작성하는 것이 귀찮기도 하고 코드가 길어진다.

이때 components에 상단 로고를 화면에 출력하는 html, css 코드를 작성했고 이 component 이름이 Logo라고 하면, 모든 서브페이지들에는 <Logo></Logo> 이것만 넣어주면 끝이다.

앞서 설명했듯이 views는 페이지들이 있는 폴더고 그 안에 있는 Home.vue는 html로 말하면 index.html이다. 

이 메인페이지에 Logo를 넣고 싶다면 <template> 안에 넣어주면 된다.

App.vue는 최상위 틀이라고 보면 된다. 결국에는 Home.vue도 여기에 속해있다.

이런 구조를 이해한다면 개발하는데 큰 무리는 없다.

Template 사용하기

나는 template를 사용해본 기억이 없다. 

눈치껏 html 태그들을 넣으면 되는 건가? 하고 넣었다가 html처럼 내가 원하는대로 안되길래 열심히 구글링해서, 아직도 완벽히 이해한 것 같지는 않지만 아는 만큼 설명해보기로 한다.

리스트를 작성하면 html에서는 단순히 <ul>, <li> 태그들을 사용하면 된다.

근데 vue 공식 사이트에서는 v-for 사용을 권장한다. 

처음에는 단순 list 출력하는 건데 함수까지 써야해, 라는 거부감이 들어서 안 쓰려고 했는데 결국엔 쓰게 됐다...

내 생각에는 vue의 template는 단순 html처럼 쓰는 게 아닌 것 같다.

링크를 걸때도 <a>에다가 v-bind를 사용한다.

예를 들어, components 에서 메인으로 가는 링크가 있는 컴포넌트를 작성한다고 가정해보자.

    <template>
    	<div>
    		<a v-bind:href="main.url">{{main.message}}</a>
        </div>
    </template>
    
    <script>

export default {
  name: "Header",
  data () {
    return {
    main : {
     message : '올랑올랑', 
     url:'/'  ,
    },

    }
  }
};


</script>

이렇게 쓴다. 계속 쓰다보면 익숙해지기도 하고 그러려니 하고 쓸 것 같긴 하다...

이것 외에도 많은 태그들이 있다. <router-link> (페이지 이동) 등. 공부해야 할 것이 꽤 있다.

++지금 생각해보니 컴포넌트라 템플릿 내 코드 깔끔 + 재사용이 쉽도록 하기 위한 목적인 것 같기도 하다. 특히 v-for 같은 경우에는 재사용 시 html 요소는 그대로 두고 함수 message만 바꿔주면 되니까 더 편한 것 같기도 하다. 

닫는 글

React와 Vue가 많이 비교되는 데 둘 다 써본 내 입장에서는

React는 진입 장벽이 낮은 것이 장점, 코드가 깔끔하지 않다는 것이 단점(마찬가지로 메인 코드는 깔끔한데 component를 별도 파일로 분리하지 않으므로)인 것 같다.

Vue는 코드가 깔끔한 것이 장점, 단점은 처음에 알아야 할 것이 많다는 것이다.

어떻게 표현할 지 생각해봤는데 이렇게 정의할 수 있겠다.

내가 개발할 때는 React, 누군가 짜놓은 코드를 봐야할 때는 Vue 구조가 좋다.