[Vue3.js] Vue3+nodejs+mariadb로 게시판 만들기(1) - 뷰 개발환경 세팅

이번 포스팅부터는 Vue를 사용하여 게시판 만들기 프로젝트를 진행하려고 한다.

 

왜 Vue인가?

개발자는 필요에 의해서 공부를 하는 것이라 생각한다.(지극히 개인적인 의견)

현재 내가 맡은 프로젝트가 Vue3 나름 최신 라이브러리들을 사용하고 있기 때문에, 필요에 의해서 공부를 해보려고 하는 것이다.

 

 

[기본 환경 준비]

• Vue3 + typescript + composition api
• Vuetify
• nodejs
• mariaDB

 

그럼, Vue 프로젝트를 생성해보자.

node.js는 이미 설치되어 있다고 가정한다. 만약 설치가 되어있지 않다면 여기에서 설치하면 된다.

 

개발은 VSCode에서 진행한다. 만약 VSCode 환경 설정이 되어있지 않다면, VSCode 설치 및 한글 설정 방법을 참조하면 된다.

 

프로젝트 생성은 매우 간단하다.

 

적당한 위치에 프로젝트 폴더 생성 후 VSCode로 열기

나의 경우에는 C:\vue-study 폴더 생성하였다.

 

VSCode 터미널(Ctrl+Shift+`)을 열어 아래 명령어를 입력한다.

 

npm install -g @vue/cli

 

설치가 완료되면 아래 명령어를 입력한다.

 

// vue create {프로젝트명}
vue create bbsclient

 

그럼 아래 이미지처럼 뜰 것이다.

 

 

여기에서 첫 번째 선택(Vue3 프로젝트 진행)

 

무언가 막 진행이 되면서 최종적으로 아래와 같은 메시지가 뜬다.

 

�🎉  Successfully created project bbsclient.
�👉  Get started with the following commands:

 $ cd bbsclient
 $ npm run serve

 

프로젝트 생성이 완료되었으니, 해당 프로젝트로 터미널 경로를 이동하여 실행해보라는 뜻

시키는 대로 해보자.

 

PS C:\vue-study> cd .\bbsclient\
PS C:\vue-study\bbsclient> npm run serve

 

크롬을 열어서 확인: localhost:8080

 

 

 

서버가 켜져 있는 터미널에서는 다른 명령어를 못쓰기 때문에 터미널을 새로 열어준다.(Ctrl+Shift+`)

 

나는 typescript를 사용할 것이기 때문에 프로젝트 경로로 이동하여 아래 명령어를 입력한다.

 

vue add typescript

 

그럼 typescript 관련 설정을 묻는 질문이 시작된다.

 

 

여기까지 진행했을 때, 아래와 같은 에러가 발생할 수도 있다.(무시해도 되지만 매우 거슬림)

확장 기능을 사용하지 않은 경우 에러가 안뜰 수도 있음.

 

 

The template root requires exactly one element.eslint-plugin-vue

 

해결방법

VSCode 작업 폴더를 프로젝트 경로로 이동하면 된다.

아까는 터미널에서만 이동했음.

 

급하게 마무리하는 느낌은 있지만, 우선 이번 포스팅에서는 여기까지만 진행하도록 하겠다.

내용이 길어질 것 같으므로 다음 포스팅에서 composition api를 사용하여 컴포넌트를 생성하는 방법 등을 다루겠다.