node.js vue.js express.js 처음 해보기

 

NEMV(Node.js, Express.js, MongoDB, Vue.js)

0. 개요

늦은감이 있지만, 요즘 많이 쓰는 것들을 새로 배우고 싶어서 짬날때 조금씩 공부하려한다.

nodejs로 서버만들고 vue.js 사용해보고싶고, jquery는 없애고싶었다. 요즘스타일, 요즘 트렌드를 접하고자한다.

https://fkkmemi.github.io/nemv/nemv-007-vuetify-install/

모던웹(NEMV) 혼자 제작 하기 3기 - 7 뷰티파이 설치

이 강의를 보고 진행했으며, 이 글은 저 강의를 진행하면서 만났던 에러나, 몰랐던 부분 등등을 정리할 계획이다.

1. 뷰티파이 설치시 문제 발생

쭉 잘 설치하다가 뷰티파이 설치할 때 문제가 생겼다. 뷰티파이 공식 홈페이지에서 하라는데로 했는데 HelloWorld.vue 위치를 못읽겠다는 오류가 계속 뜬다.

강의 자료에서처럼 App.vue 파일을 수정했지만 이것 또다른 더 많은 에러가 뜨길래, 공식홈페이지처럼 진행했다.

import HelloWorld from './components/HelloWorld';

이부분에서 에러가 나는데 혹시나 해서 확장자 명을 붙여주었더니 잘 된다.... 왜 나만 확장자명을 붙여줘야 잘 작동하는 것일까 ㅠㅠㅠㅠㅠㅠㅠ

import HelloWorld from './components/HelloWorld.vue';

무튼 삽질하다가 해결했다.

2. git

참고 : https://caesiumy.github.io/2019/04/07/vscode-how-to-git/

Git을 vscode를 통해 간편하게 사용해보자!

위 글을 보면서 진행했다.

평소 이클립스 svn을 써서 이번에 git으로 해보고 싶었다. 깃블로그가 있어서 계정은 준비되어있었다. push, commit 이런게 svn이랑 달라 익숙치 않아서 새로운 오류를 만나게되는데...

커밋 다하고 보니 폴더 하나가 폴더 두개 겹친모양의 아이콘으로 클릭이 안되었다. 이건 또 무슨 문제인가... 찾아보니 깃 삽질하면서 .git이 해당 폴더 안에 들어가있어서 문제가 발생한거였다...!

저 .git을 지우고 다시 add, commit, push 해주면 제대로 폴더가 들어갔다 ㅠㅠ!

3. 프론트 빌드하기

강의자료에서 8번에 프론트 빌드하기에서 에러가 발생했다. 버전업이 많이 되면서 안되는 것들이 많아보인다 ㅠㅠ 그래도 이런 에러로 더 공부할 수 있는 계기가 되니 좋게 생각하자.

프론트 빌드는 vue-ui에서 하면 깔끔하게 된다. vue cli 설치부터 2020년 2월 기준 최신 버전에 대한 설명이 필요하다면 아래 링크가 도움이 될 것이다.

https://romeoh.tistory.com/entry/Vuejs-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%A4%EC%A0%95-vuecli-vue-ui

[Vue.js] 프로젝트 설정/배포 - vue/cli & vue ui

cmd창에 vue ui 치면 브라우저창으로 vue 프로젝트 메니저가 뜬다.

좌측에 Task 메뉴로 들어가면 build 항목이 있다. 완료 후엔 해당 폴더 안에 dist 폴더가 생성된것을 확인할 수 있다.

 

4. 파이어베이스....?

순간 새로운 강의가 뭐가있나 보다가 vue + firebase 강의를 보게되었다. 서버의 기능을 파이어베이스가 해주는 서버리스로 이게 더 빠르게 사이트 하나 만들 수 있을것같다.

서버를 내부망이라 어떻게 해야할까 고민하던중에 혼자 스터디 하려고 공부하는거니까 파이어베이스를 이용해보려한다.

 

참고 : https://fkkmemi.github.io/vf/vf-001/

Vue와 Firebase로 모던웹사이트 만들기 1 개발환경 구축하기