Vue22 Vue(14) router-link (라우터 링크) 밑줄 없애기 Vue.js 로 개발 중이다. 라우터의 태그를 사용하였더니 아래와 같이 밑줄이 생겼다. 이런 경우 어떻게 해야할까? 당황하지말고 새발자를 잘 따라와보자. Vue(13) router-link (라우터 링크) 밑줄 없애기 우리가 잊지 말아야 할 것이 있다. vue 는 프레임워크라는 것, 즉 vue 의 현란한 태그들을 사용하지만 정작 HTML 에서는 익숙한 태그들로 바뀐다. router-link 를 html 로 보면 태그로 사용된다. // vue.js HOME // 웹에서 볼 때 HOME 실제 HTML에서는 라는 태그를 태그로 인식하기 때문에 a 에 대한 css 를 지정해주면 해결! a { text-decoration: none; } 2021. 9. 24. Vue(13) 동적라우팅으로 상세페이지 vuex 로 구현하기 메뉴들을 클릭할 때, 라우터를 통해 각각의 컴포넌트 상세페이지로 넘어가는 것이 아니라 컴포넌트 없이 동적라우팅을 통해 상세 페이지로 넘어가는 기능을 구현해보자. Vue(14) 동적라우팅으로 상세페이지 vuex 로 구현하기 src/api/index.js 일단 Api를 불러와 상세페이지를 보여줄 통신 메소드를 정의해보자. import axios from "axios"; function showMenuDetailApi(menuid) { // 매개변수로 menuId를 받는다. const BASE_URL = `http://________/menu/${menuid}`; return axios.get(BASE_URL); } export { showMenuDetailApi }; src/router/index.js 통신.. 2021. 8. 24. Vue(12) Vuex 란 (Vuex 설치하기) Vue.js 를 통해 수많은 변수를 만들고 로직들을 관리하며 프로젝트를 구성해나가다 보면 변수들을 어떻게 관리하느냐가 프로젝트의 효율성을 높이는 중점이 된다. 변수에는, 컴포넌트 내에서만 쓰이는 변수(지역변수)와 전체적으로 공용되는 변수(전역변수)가 있다. 전역 변수의 경우, 컴포넌트마다 일일이 선언해서 사용한다면 중복이 많아지고 자원의 낭비도 심할 것이다. 그래서 Vuex 와 같은 전역변수를 한곳에 모아 한방에 관리해주는 라이브러리를 사용한다. Vuex 란 Vuex는 Vue에서 사용하는 ‘상태 관리 패턴’ 라이브러리 이다. 앱의 모든 구성 요소에서 액세스할 수 있는 중앙 집중식 데이터 저장소를 만들 수 있다. Vue.js만 사용할 경우 데이터를 주고 받기 위해 상위 컴포넌트와 하위 컴포넌트가 지속적으로.. 2021. 8. 16. Vue(11) axios 을 통해 API 동적으로 화면에 뿌려주기 api에는 menu 라는 데이터가 있다. 리스트를 받아와서 화면에 동적으로 뿌려주자. 스포일러 api에서 받아온 menu안의 id와 title의 내용(데이터)가 동적으로 몽땅 표시된다. 그럼 추울발! Vue(11) axios 을 통해 API 동적으로 화면에 뿌려주기 axios 설치 먼저 통신을 해야되니까 npm install axios src/api/index.js src 폴더 안에 api 폴더를 만들고, index.js 파일을 만들어준다. (통신전용 공간이랄까. 여튼 이걸 api 구조화 라고 한다.) 통신 전용 메소드를 만들어주고 export 꼭 해주기 ! 그래야 밖에서도 쓸 수 있다. import axios from 'axios'; // axios 임포트해주기 function showMenuApi().. 2021. 7. 31. Vue(10) eslint 에러 화면 제거하기 (오버레이) Vue 에서 eslint 를 적용했을 때, Critical 한 에러가 아닌데도 overlay가 되어 화면을 가린다. 이걸 없애 볼거다. 1. App.vue 파일에서 빨간 줄이 떠버렸고, 2. 로컬서버를 실행해보니 eslint가 overlay가 되어 화면을 가린다. 이걸 없애 볼거다. 3. src 폴더 안에 vue.config.js 라는 파일을 만든다. (뷰 설정파일이다.) 아래와 같이 내용을 넣고 저장한다. // vue.config.js module.exports = { devServer: { overlay: false, }, }; 결과화면 화면 오버레이 없이 잘 나온다 ! 2021. 7. 30. Vue(9) Router 설치하기 (여러 페이지로 분리) Vue 에서 하나의 웹 페이지 안에 여러 페이지를 클릭해서 내용을 보려고 한다. Router 를 사용해서 원하는 페이지로 가보자 스포일러 로그인을 누르면 log in 이 나오고, 회원가입을 누르면 sign up 이 나온다. 덩달아 url 도 변경된다. 그럼 시작해보자 출발 1. 터미널에 다음 명령어를 사용하여 라우터를 설치해준다. npm install vue-router 2. 라우터가 들어갈 장소를 만들어 줘야한다. - routes 폴더를 만들고 그 안에 index.js 파일을 만들어준다. 3. 페이지(컴포넌트)들을 만들어 주자. - view 폴더를 만들고 그안에 LoginPage.vue 와 SignupPage.vue 를 만들어준다. 4. routes/index.js 라우터에 컴포넌트들을 넣어주자. - .. 2021. 7. 29. Vue(8) import 시 @/ 로 시작하는 절대경로 설정하기 vue 에서 파일경로를 작성할 때, 상대경로보다는 절대경로가 훨씬 편하다. @를 활용한 절대경로 작성법을 알아보자. import Demo from '../../demo/basic/Demo' // 상대경로 import Demo from '@/demo/basic/Demo' // 절대경로 1. 프로젝트 최상단 루트에 jsconfig.json 이라는 파일을 만들어준다. 2. 그 안에 아래 내용을 붙여준다. 그럼 최상단 루트 내에서 @/붙여 절대경로를 자유로이 사용할 수 있다. { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./src/*" ], } }, "exclude": [ "node_modules", "dist" ] } 2021. 7. 28. Vue 실행오류 - 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. NVM 설치 후 node.js 를 설치했는데 아래와 같은 에러 메시지가 나왔다. 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하 십시오. 하나하나 확인해보면서 문제 범위를 좁혀보기로 했다. node 는 설치가 되었는데 왜 version이 안나올까? 1차 시도) 환경변수 경로 설정문제인가? 1. 윈도우 - 고급시스템설정 검색 2. 고급 - 환경변수 클릭 3. 환경변수 안에 해당 경로가 있는지 확인... 했는데 둘다 있음 (문제없는 걸로 판단) C:\Program Files\nodejs C:\Users\유저이름\AppData\Roaming\npm 2차 시도).. 2021. 7. 24. Vue - (Windows) 윈도우용 NVM 설치하기 작업환경 세팅 중, 지난번에 작성한 ↓ 포스팅을 참고하여 고대로 윈도우에서 NVM 설치를 했다. (깃에서 명령어로 설치) 하지만 .... !! Vue - (맥os) NVM설치하기 Updated 2021/05/17 개발을 하다보면 프로젝트 별로 node.js 버전이 각각 다른 경우가 있다. 예를 들면 실습강의에선 node 버전이 v10.22.6 인데, 회사 프로젝트에서는 v10.16.3인 경우이다. 이럴 때 손쉽게 명 devbirdfeet.tistory.com 아니나 다를까 문제가 생겼다. node 설치 후 오류가 나는 것이다. NVM 은 Linux, Mac 기반에서 설계되었기 때문에 Window 에서는 Window 용 NVM 을 따로 다운받아 설치해줘야 한다. 😭 NVM 삭제하기 지난번에 쓴 포스팅으로 .. 2021. 7. 23. 이전 1 2 3 다음 반응형
