Vue.js

JavaScript를 기반으로 한 프레임워크로서, 웹 개발에서 중요한 역할을 한다.

 

## 개발환경 초기세팅(터미널)

• npm install -g @vue/cli
• Extensions 가서 vetur , html css support , vue 3 snippets 설치하기
• 설치 중 에러 발생한다면, 에러 참고 폴더 즐겨찾기 참고 /  —global yarn 입력하기
• 만들어 놓은 폴더 열고, 다시 터미널에 vue create 프로젝트명(예: vuedongsan) 입력해서 하위폴더 생성해 준다. >> (중간선택) vue으로 선택해서 만들어주기  
• App.vue 가 메인임! >> index.html 으로 컴파일해서 만들기!
• Template 안에는 HTML, Script 안에는 JS, Style에는 CSS 만들어 준다.

 

## 설치후, 새 터미널 설정. // 서버열기 미리 보기

• npm run serve

### 설명!!

• Nodejs 설치하면, npm 사용할 수 있음 >> npm은 웹개발 라이브러리 설치 도우미
• npm으로 @vue/cli 설치함 >> vue 프로젝트 빠르게 생성해 주는 라이브러리!

 

• node_modules : 프로젝트에 쓰는 라이브러리들
• Scr: 소스코드 다 담는 곳
• Public : html 파일, 기타 파일 보관
• Package.json: : 라이브러리 버전, 프로젝트 설정 기록

 

[개인적인 어려움/문제점/해결]

• 1) 초기 개발환경 설치과정이 헷갈리고, 어려웠음 >> 구글링과 chatGPT를 통해 문제점 발견, 미리 만들어놓은 폴더 먼저 하고, 해서 순서가 안 맞음 등등 발견>> 중간에 설치된 게 있어서 찾아서 지우고, 처음부터 다시 차근차근 빠진 부분 없이 재설치/node.js부터 재설치 복붙하고, 버전 확인 후 yarn도 1.22로 재설치
• 2) 만들었던 폴더 안에 있는 하위폴더를 열어줘야 함(npmdongsan으로)
• 3) 왼쪽 사이드바의 나머지 환경 등을 체크해서 활성화시켜서 나머지 설정 / 다른 방법으로 확인할 수 있는 방법 배움
  (open editor, NPM scripts)
• ㄴ npm scripts에서 serve 실행해 보면 정상작동하는지 확인 가능
• ㄴㄴ 내 로컬번호 확인해서 열기!!

---

[용도]

### 데이터 바인딩 : JS 데이터를 HTML에 꽂아 넣는 문법

원래 자바스크립트 문법으로 입력하면, 엄청 길게 해야 하지만, vue는 훨씬 간단하게 입력할 수 있다.

• 하드코딩 해놓으면 나중에 변경 어렵기 때문에 따로따로 해서 데이터 바인딩을 만들어준다.
• 실시간 자동 렌더링 쓰려고 사용한다.
  (vue는 데이터를 변경하면, 실제 변경된 사항이 자동으로 재랜더링 실시간으로 실행된다.
  따라서 웹앱 같은 걸 만들어 줄 수 있다. 자주 변경되는 애들을 간단하게 변경! )

 

Export 밑, 위엔 <script> 저장되어 있는 곳에 

data( ) { // *이 부분을 state(상태)라고도 부름!!

return { 

  // 이 안에 데이터 저장하는데 object 자료로 저장해 둠!**  {자료이름 : 자료내용}

}

},

…

이런 형식으로 만들어주고,
위에 html으로 하는 <template> 은 어디에 해당되는지 {{데이터이름}} 을 맞춰 준다.

 

** HTML 속성도 데이터 바인딩 가능! 

 :속성=“데이터이름”

 

## vue도 배열, 반복문 사용 가능하다!

# Vue의 HTML 반복문!!  한줄 코스로 생성 가능!

<태그 v-for=“?? In ??” :key=“??”> </태그>

• <a v-for=“ 작명 in 몇 회 반복할지 숫자 적기” :key=“작명“> </a>
• 예: <a v-for=“작명 in 3” :key=“”> Home </a>

    ㄴ 변수 작명 2개까지 가능 (,) 해서!! // 예: (a, i)

ㄴ 왼쪽변수는 array내의 데이터 / 오른쪽변수는 1씩 증가하는 정수

 

### 이벤트 핸들러 : HTML 클릭 시 코드 실행하는 법!(클릭 시 작동하게 하는 법!)

• 자바스크립트 방식은 onClick=“”
•  Vue 방식은 v-on:click=“”  또는 @:click=“”
• 버튼 누르면, 관련된 데이터만 +1 (Vue는 데이터 변하면, HTML에 바로 반영됨)
  예)  
  1) <button @:click="신고수++">허위매물신고</button> <span> 신고수 : {{ 신고수 }}</span>
  2) <button @:click="신고수 +=1”>허위매물신고</button> <span> 신고수 : {{ 신고수 }}</span>
• 1),2) 둘 다 신고수 클릭하면, 왼쪽에 1씩 증가해 달라는 명령
•  @mouseover : 클릭이 아니라 후버처럼 여기에 마우스 갖다 대면, 체크하게 하는 이벤트 헨들러!

등등이 있다. 많이 있으니 찾아서 사용할 것~~!!

 

 

### 자바스크립트 함수 축약 사용

• 입력할 코드가 길면, 축약해서 vue에서 사용하기~~
• methods : { //함수()()}
  예)
  methods : { increase() { this. 신고수 += 1,} }, …
  그리고, 위에도 함수명인 increase 인 함수명으로만 입력해 준다
  주의할 점은, 어떤 건지 가리키기 위해, 나 자신인 this. 을 꼭 입력해 줘야 오류가 안 난다!

 

### 모달창 (열기창) 만들기 (동적인 UI 만드는 법!! 규칙 중요!)

• 디자인부터!!
• UI의 현재 상태를 데이터로 저장해 둠
• 데이터에 따라 UI가 어떻게 보일지 작성

 

• v-if=“조건식” 문법 쓰임(조건식이 참/거짓일 때만 HTML 보여줌) //
  예: v-if=“1 == 1”.   >> 참일 경우에만 보여주겠다. / v-if=“1 == 2”  >> 거짓일 때만 보여주겠다. 

### 모달창 (닫기창) 만들기 , 긴 데이터 자료 넣기(assets> oneroom.js 파일에 따로)

# import / export 문법

보통 긴 데이터 자료들을 data() 란에다가 보관한 후 {{데이터 바인딩}}하면 되는데 너무 길어 보여서 그대로 붙여 넣기 하면 복잡해져서 import/export 문법을 이용해서 다른 js 파일에 보관한 뒤 가져온다. (예: assets 폴더 안에 oneroom.js 파일 만들어 주고, 거기에다가 데이터 자료 넣고, 위에 export default 해서 추가하거나, var 변수명 = 변수명 하고, 만들어준다.  // 그리고, App.vue의 <script> 밑에 import 해서 만들어주기~!

• 어떤 js파일에서 만든 변수나 자료를 다른 js 파일에서 사용하고 싶은 경우 해당 문법을 사용한다.
• 다른 파일에서 export 해야 다른 파일에서 import를 할 수 있다.
  수출을 해야 수입을 할 수 있다.
• 문법: 

## 시작점이 { 으로 시작하면 object 데이터이다~~!

 

---

 

** 공부 진행 자료 확인(깃허브) : https://github.com/creatdevv/vuedongsan

GitHub - creatdevv/vuedongsan: 코딩애플 vue 3버전 강의 수업 자료 참고(6강까지)

 

** 수업 참고영상(코딩애플/1강~6강까지): https://www.youtube.com/watch?v=NONWar0jGLM 

 

 

[사진 출처: viarami Photographer from Germany]