FE/Vue.js7 [Vue.js] Router 설치 및 환경 설정(Vue 3) Router 설치 npm i vue-router@next # vue 3 버전부터는 vue-router가 아닌, 다음의 명령어로 설치를 진행 폴더와 파일, 모듈 등 생성 src/router/index.js 생성 컴포넌트 import 후 path와 함께 등록해 줍니다. path는 "/" 뒤에 적절한 텍스트를 입력해 경로를 지정해 줍니다. 모듈 가져오기 라우터 영역 지정하기 로그인 2022. 4. 20. [Vue.js] Axios 설치 및 JSON 호출(Vue 3) Axios 설치 npm install axios Axios import import axios from 'axios' // 작업할 페이지에 axios import 호출 버튼 클릭 시 axios로 로컬에 있는 test.json을 호출합니다. 2022. 4. 20. [Vue.js] SASS(SCSS) 설치 및 폴더 구성(Vue 3) SASS 설치 npm i sass npm i sass-loader@10 # 새로운 버전의 sass-loader가 작동하지 않을 수 있어 10 버전으로 지정하여 설치 SASS 적용 SCSS 파일 분리 참고로 style 태그 안 scoped는 현재 컴포넌트에만 스타일을 지정할 수 있게끔 해주는 역할을 하여 의도하지 않고 실수로 다른 컴포넌트에 영향을 주는 것을 막을 수 있습니다. 저는 있으면 좋아 보여 별 생각 없이 각 파일마다 scoped를 지정했는데, 초기 body에 margin이 8씩 들어가는 걸 해결하고자 계속 margin 0을 줘도 적용되지 않으면서 헤맨 기억이 있기 때문에 뭐든 적당히 사용하는 게 좋아 보입니다. SCSS 폴더 구성 경로: src/assets/scss layouts: 페이지 전체를.. 2022. 4. 17. [Vue.js] Vuetify 설치 및 환경 세팅 Vuetify Vue에서 제공하는 UI, CSS 라이브러리입니다. Vuetify 설치 npm으로 vuetify 프로젝트가 설치가 되었다면, 다음과 같은 명령어로 vuetify를 설치해주시면 됩니다. vue add vuetify 위 명령어 입력 후 설치하다 선택하는 단계가 나올 텐데요. 그때 default를 선택해주시면 됩니다. Vuetify import // src/main.js import vuetify from './plugins/vuetify' const app = createApp(App) app.mount('#app').use(vuetify) 여느 라이브러리가 그렇듯 설치 후에 import 후 해당 홈페이지 접속해서 사용하시면 됩니다. Vuetify 홈페이지 https://vuetifyjs.co.. 2022. 4. 17. [Vue.js] v-for 반복문 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. 과제 배열을 데이터에 담아 데이터 바인딩 해 오는 것이 과제였습니다. v-for 반복문 HOME 근데 이렇게 되면 HOME만 세 번이 출력이 돼 사실 메뉴의 역할은 못 하고 있는 모습입니다. 위에 코드블럭에서 "작명 in 3"은 곧 세 번만큼 돌아 HOME이 출력되는 논리였는데, 저 '3' 자리에 배열이 들어갈 수도 있고, 배열을 넣어주게 되면 우리가 의도하는 메뉴에 더욱 가까운 모습으로 개발이 가능해집니다. 반복문 key 반복문을 작성할 때 key를 꼭 작성하라고 하는데요. 그 이유는 사용하지 않으면 오류가 나기 때문이고, key의 역할은 컴퓨터가 반복문을 돌린 요소를 구분하기 위함이기 때문에 이를 구분할 .. 2022. 3. 31. [Vue.js] 데이터 바인딩 문법 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. 데이터 바인딩 문법 데이터 바인딩 문법이란 Vue.js에서 변수 등의 데이터를 보관하는 데이터 보관함이며, object 자료로 저장해 둡니다. 가격처럼 바뀔 수 있는 데이터들을 데이터 보관함에서 데이터 바인딩 해서 가지고 와야 실시간 렌더링으로 더욱 유연한 페이지를 개발 할 수 있습니다. 그리고 데이터 바인딩 할 때 꼭 텍스트뿐만 아니라 스타일 지정도 가능한데요. 이처럼 제가 color를 각각의 변수에 green과 purple로 지정해주고, 각 태그에 style을 줬는데, 제가 준 데이터가 잘 적용된 것 같습니다. 2022. 3. 29. 이전 1 2 다음
