Vue.js+ node.js +Mysql |개발 환경 세팅하기 part1

Vue.js 로는 웹페이지를 UI UX 및 데이터요청을 싱글페이지 구성을 위해 사용.

Express.js는 Oracle,Mysql 같은 DB에 접근하기 위해 사용

 

Tool > Vscode

 

Vscode 터미널에서 진행

 

1.Backend 설정

express --ejs backend #express-generator   //아래처럼 보안이슈 에러가 있을 수 있다. 그럴 경우에는

`명령어 입력` : set-executionpolicy unrestricted

 

PowerShell 까지 설정 해준 후 다시 vscode 터미널에

express --ejs backend #express-generator  //를 입력하면 다시 잘 작동한다.

cd backend

npm install

npm start #

backend는 localhost:3000번에 생성.

 

위치는

<-------------------------------------------------------------------------------------------------------------------------------->  단락선

 

2. frontend 설정

npm install -g @vue/cli                  /*Vue.js 설치*/

vue create frontend                       /*Vue.js 로 이루어진 폴더명을 frontend로 정하고 설치 */

 

Vue가 처음이면 vue-project가 없을 수도 있다. 이전에 설정해주었던 사람이면 이전 설정처럼 만들거냐는 이야기다.

Default는 그냥 기본옵션으로 2버젼 쓸거냐 3버젼 쓸거냐 차이

Manually select features 로 가면 이제 설정을 어떻게 할 것인지 정할 수 있다. 들어가면

이처럼 나오고 우리는 babel, router, vuex, eslint 를 사용할 것이다.우리는 원하는 설정을 Space 키로 정할 수 있다.

설정에 대한 짧은 설명을 해보면

Babel -> Vue.js의 최신문법을 가지고 js를 짤건데 구 브라우저에서도 동작 될 수 있게끔 자동변환을 시켜주는 것

TypeScript-> TS문법으로 짜기 위해 있는 것

PWA-> 웹을 모바일 처럼 할 수 있는 것

Router-> 메뉴를 구성하고 메뉴를 클릭 했을 때, 화면을 이동할 수 있게 하는 모듈

Vuex-> 모든 Vue component 내에서 공통으로 접근할 수 있는 저장소를 만드는 것

Linter -> js 문법 체크해주고, 코드들을 동일한 코딩규칙을 만드는 것 ( 띄어쓰기나, 등등)

Space bar로 Babel, Router, Vuex, Linter를 설정한다. 그리고 엔터를 누르면

이처럼 나오고 우리는 3버젼을 사용할 것이기에 다시 엔터하고

이거는 라우터기능중에 history라고 있는데 그것을 사용할 것이냐. 우리는 사용하자 yes 엔터 그 후 

가장 표준화된 ESLint + Standard config 로 설정

Lint라는 문법체크를 저장을 누를 때 마다 확인해주자. Lint on save  엔터

babel ,eslint등 이것들을 package.json에 다 몰아 넣자! 체크 후 엔터

지금 설정 한 것을 다음번에도 설정 할 수 있게 프로젝트설정을 만들어둘래?  이건 아까 vue create frontend할 때 처음에 나온 설정을 save할 수 있는 것이다. 나는 save를 했기에 처음 만들 때 나온 것이다. 이것도 y  yes

앞으로 이 설정을 뭐라고 할래? 각자 이름 정하면 됩니다.

하고 엔터하면. 설치가 진행됩니다.

 

다 했으면. 터미널을 키고 

npm run serve

해서 

이렇게 나오면 성공이다. 잘나오는지 주소창에 입력해보자 localhost:8080

 

3. ProxyTable 설정 (express + vue.js 연결)

여기까지 따라왔다면 현재 Backend, Frontend의 2개의 폴더가 생겼을 것이다.
project
-frontend
-backend

현재 2개의 폴더는 각각 따로 실행되고 있다.
port : (frontend : 8080, backend: 3000)
이 2개를 연결해줘야 한다.

백엔드와 프론트상의 연결을 위함이다.

frontend/vue.config.js로 가서

이렇게 초기 설정이 되어 있는 것을.

이렇게 바꿔주자.

프론트엔드의 ui/ux을 localhost로 넘긴다는 의미이다.

cd frontend

npm run build  // frontend의 ui ux를 저장해서 backend 쪽으로 넘겨서 보여주는 것을 위한 명령어이다. 앞으로는 늘 이 프론트엔드의 클라이언트를 바꾸면 프론트엔드로 와서 npm run build를 하고 backend로 가서 npm start 해야한다.

새로운 터미널을 열고

cd backend

npm start 를 해보자.

그 후 localhost:3000을 가보면

이렇게 연동 된 것을 확인 할 수 있다.