Vue 웹 채팅 애플리케이션 만들기 4

로그인 화면 만들기

1. Vuelidate 설치

npm install --save vuelidate

2. plugin 파일 생성

quasar new plugin vuelidate

3. plugin 파일 편집

/src/plugins/vuelidate.js

4. quasar.conf.js 파일 편집

5. page 파일 생성

quasar new page Login

6. page 파일 편집

src/pages/Login.vue

7. router 파일 편집

src/router/router.js

8. 결과 화면 확인

quasar dev
localhost:8080/#/login

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^


* Vue를 이용한 웹 채팅 애플리케이션 만들기 목록

Vue 웹 채팅 애플리케이션 만들기 3

Quasar 설치하기

1. Quasar CLI를 설치합니다.

- npm install -g quasar-cli

2. Quasar CLI를 사용해서 프로젝트를 생성합니다.

- mkdir vue-chat & cd vue-chat
- quasar init client

3. 프로젝트를 실행합니다.

- cd client
- quasar dev

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^


* Vue를 이용한 웹 채팅 애플리케이션 만들기 목록

Visual Studio Code 사용하기

Visual Studio Code 설치

1. Visual Studio Code를 다운로드 받습니다.

- 다운로드 위치: https://code.visualstudio.com/
- 빨간색으로 표시된 부분을 클릭해서 설치파일을 다운로드 받습니다.

2. 다운로드가 완료되면 파일을 더블 클릭해서 VS Code를 설치합니다.

- 빨간색으로 표시된 부분을 계속 클릭하면 설치가 완료됩니다.

3. 설치가 완료되면 VS Code를 실행하고 Vetur 플러그인을 설치합니다.

- 빨간색으로 표시된 부분을 계속 클릭하면 설치가 완료됩니다.

4. Vue 프로젝트 폴더를 추가합니다.

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^

Vue.js 참고 사이트

Vue.js 참고 사이트

1. Vue.js 공식 사이트

 - Vue.js에 대한 기본적인 지식을 배울 수 있는 곳으로 Vue.js를 처음 배우는 분들을 반드시 방문해야 하는 사이트 입니다.
   https://kr.vuejs.org/v2/guide/

2. Vuetify 공식 사이트

 - Vue.js는 가상 돔(DOM)을 이용하기 때문에 jQuery가 제대로 동작하지 않는 경우가 있습니다. 그래서 jQuery를 이용하는 Bootstrap도 잘 동작하지 않는 경우도 있습니다.
 - Vuetify는 Bootstrap을 이용해 Vue.js를 이용하면서도 Bootstrap을 이용한 것처럼 화면을 만들 수 있도록 합니다. Bootstrap과 사용방법이 거의 비슷합니다.
   https://vuetifyjs.com/ko/getting-started/quick-start

3. Awesome Vue.js

 - Vue.js를 이용해서 만들어 놓은 라이브러리가 많이 있습니다.
 - 바퀴를 다시 발명하지 말라는 말이 있듯이 Awesome Vue.js에서 이미 만들어져 있는 기능을 라이브러리로 가져와서 사용하면 직접 기능을 만들면서 고생할 필요가 없습니다.
   https://github.com/vuejs/awesome-vue#official-resources

4. CSS-TRICKS

 - Vue.js를 이용한 애니메이션 기능을 구현하는 방법을 찾아보다가 알게 된 사이트 입니다.
   https://css-tricks.com/intro-to-vue-5-animations/

5. Medium - Vuetify

 - Medium이라고 블로그 서비스 사이트가 있는데, 여기에 Vuetify라는 그룹이 있습니다.
 - Vuetify로 Drag and Drop 기능을 할 수 있는지 찾아보는 도중에 찾게 되었습니다.
   https://medium.com/vuetify

이외에도 Vue.js를 지원하는 많은 사이트들이 있습니다.

저도 Vue.js를 공부하고 있는 중이라 공부하면서 도움이 되는 사이트가 있으면 추가하도록 하겠습니다. 혹시 알고 계신 Vue.js 관련 사이트가 있다면 댓글로 알려주시기 바랍니다.

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^

Vue 웹 채팅 애플리케이션 만들기 2

Vue.js 설치하기

1. 작업할 디렉토리를 만듭니다.

- d:
- mkdir workspace & cd workspace

2. Vue.js를 설치합니다.

- npm install -g @vue/cli

3. Vue.js를 이용해서 프로젝트를 만듭니다.

- vue create webchat
- default를 선택합니다.

4. 프로젝트를 실행합니다.

- cd webchat & npm run serve
- 웹 브라우저를 실행하고 주소창에 http://localhost:8080/을 입력합니다.

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^


* Vue를 이용한 웹 채팅 애플리케이션 만들기 목록

Vue 웹 채팅 애플리케이션 만들기 1

Node.js + NPM 설치하기

1. Node.js 설치 파일을 다운로드 받습니다.

- 다운로드 위치: https://nodejs.org/ko/
- 빨간색으로 표시된 부분을 클릭해서 설치파일을 다운로드 받습니다.

2. 다운로드가 완료되면 파일을 더블 클릭해서 Node.js를 설치합니다.

- 빨간색으로 표시된 부분만 계속 클릭하면 설치가 완료됩니다.

3. 설치가 잘 됐는지 확인을 합니다.

- 명령 프롬프트에서 node -v & npm -v 명령어를 실행합니다.
- 빨간색으로 표시된 부분을 참고하세요.

Node.js와 NPM 설치를 완료했습니다.

다음 글에서는 Vue.js와 Vuetify를 설치하고 프로젝트를 만들어 보겠습니다.

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^


* Vue를 이용한 웹 채팅 애플리케이션 만들기 목록

Vue 웹 채팅 애플리케이션 만들기

목록

1. Node.js + NPM 설치하기

2. Vue.js 설치하기

3. Quasar 설치하기

4. 로그인 화면 만들기

5. Python + Django 설치하기

6. Django 프로젝트 만들기

7. Django REST Framework 설치하기

8. 로그인 기능 구현하기

9. 웹 채팅 애플리케이션 화면 만들기

10. Express + Socket.io 설치하기

11. 채팅 서버 만들기

12. 채팅 기능 구현하기

우선 계획은 위와 같이 세웠으나 진행하면서 변경될 수 있습니다.

저도 만들면서 배우고 그 내용을 기록하기 위해 이 블로그를 만들게 되었으므로
실제로 웹 채팅 애플리케이션을 만들 수 있을지는 알 수 없습니다.

그래도 최선을 다해 만들어보고 최대한 쉽게 설명 드리도록 하겠으니
많은 관심을 갖고 지켜봐 주시기 바랍니다.

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^