티스토리 뷰
Node.js와 Vue.js를 이용해 프론트엔드 웹 서버를 만들어 보려고 한다.
Node.js 설치
https://nodejs.org/en/download/
Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Mac LTS 버전으로 다운받았다.
Vue Project 생성
원하는 위치에 Vue 프로젝트 폴더를 생성해준다.
해당 폴더에 뷰 프로젝트를 생성하겠다. vs code ide를 실행시키고 뷰 폴더를 선택해서 연다.
그리고 터미널을 실행해 프로젝트를 생성해보겠다.
- vue cli(command line interface)
콘솔 창(터미널 창)에서 명령어 한 줄로 vue 프로젝트를 만들 수 있게 해주는 도구이다.
sudo npm install -g @vue/cli터미널 창에서 위 명령어로 vue cli를 설치한다.
vs code 터미널 창으로 뷰 프로젝트를 생성해보겠다.
vue create to-do-frontend
# 프로젝트 생성 완료 후
npm run serve
뷰에서는 코드를 바꾸고 저장 버튼을 누르면 서버를 껐다켜지 않아도 자동으로 코드가 반영되고 화면이 바뀌었다. 굉장히 편하다는 느낌을 받았다.
이렇게 Node.js와 Vue.js를 이용해 frontend 웹 앱을 만들어 보았다.
총 두 개의 서버를 가지고 있는 것이 되었다.
1. 스프링 부트 RESTful API 실행되는 서버
2. Vue.js 및 프론트엔드 실행하기 위한 Node.js 서버
작은 어플리케이션에서는 스프링부트 RESTful API 서버는 필요없을 수 있고, 그냥 node.js 서버만 가지고도 몽고 디비나 serverless api를 이용해 충분히 앱을 만들 수 있다고 한다. 하지만, 대부분의 엔터프라이즈 웹 어플리케이션은 아직도 백엔드에 RESTful API 서버를 가지고 있는 추세이다.
다음에는 이렇게 만든 프론트엔드 앱에서 스프링 부트 api를 사용하는 걸 해보겠다.
https://rosedaily101.tistory.com/31
[vue] 환경설정 및 Vue 프로젝트 생성까지 ( + 폴더구조)
1. node.js설치 - 웹개발 라이브러리 설치를 도와주는 npm사용을 위함. - 난 기존에 설치되어 있어서 생략. 2. vue 설치 - 새 터미널 열고 > npm install -g @vue/cli C:\Users\rosei\AppData\Roaming\npm\vue ->..
rosedaily101.tistory.com
'Spring' 카테고리의 다른 글
| TO-DO 앱 만들어보기 - Bootstrap-vue 이용해보기 (0) | 2022.08.16 |
|---|---|
| TO-DO 앱 만들어보기 - vue-router 이용해서 리스트 띄우기 (0) | 2022.08.15 |
| TO-DO 앱 만들어보기 - POST API 생성 (0) | 2022.08.15 |
| TO-DO 앱 만들어보기 - GET API 생성 (0) | 2022.08.15 |
| To-Do 앱 만들어보기 - 의존성 설정 (0) | 2022.08.15 |