visualstudiocode31 뷰 라우터(Vue Router) 설치 후, "1(#) critical severity vulnerability" 오류 해결 방법 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! 뷰 라우터(Vue Router) 설치 후 발생하는 오류 상황 VSCode로 Vue.js 개발을 진행하는 중에 뷰 라우터(Vue Router) 기능을 이용해보고자 뷰 라우터를 설치하고자 했습니다. 뷰 라우터는 npm을 통해 설치할 수 있다고 하여 아래와 같이 npm 명령어를 이용하여 뷰 라우터를 설치하였습니다. 명령어: npm i --save vue-router 설치가 완료된 후, 아래와 같이 "critical" 메세지가 표시되더라구요. 위 사진에서 안내되는 오류 메세지를 텍스트로 써보자면 아래와 같습니다. "1 criti.. 2022. 12. 7. Vue.js 프로젝트에 뷰 라우터 (Vue Router) 설치하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하는 도중, 웹 어플리케이션 개발시 가장 기본적인 기능 중 하나인 '라우팅 기능'을 이용하고 싶더라구요. 뷰에서 라우팅 기능은 '뷰 라우터'로 공식적으로 지원하는 라이브러리로 npm에서 설치할 수 있도록 지원하고 있어 npm 명령어를 통해 설치 및 연동하였습니다. 뷰 라우터 (Vue Router) 뷰 라우터란 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다. 뷰 라우터는 총 3가지로 구분할 수 있으며, 자세한 사항은 각각 아래의 링크를 참조해주세요. 기본 라우터: https://log.. 2022. 12. 6. VSCode 환경에 Git 설치 및 Github Repository 연동하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 개발자라면 꼭 사용해야하는 버전관리 시스템(VCS), 그 중에서도 가장 보편적으로 사용하는 Git에 대해서 설치 및 계정을 연동하는 과정에 대해서 소개합니다. Github 계정 및 Github 내 Clone할 Repository가 있다는 가정하에 작성된 글입니다. Git 설치 VSCode에서는 Git을 Source Control System으로 Default로 제공하고 있습니다. 다만 사용하려면 별도로 설치를 해야 합니다. 1. Git 공식 사이트로 접속하여 OS에 맞게 Installer를 다운로드합니다. 주소: https://git-scm.com/download/win .. 2022. 11. 16. 뷰(Vue) 프로젝트에 Bootstrap 설치 후 적용이 안되는 문제 해결 방법 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. Vue 프로젝트에 Bootstrap 설치 후 스킨이 적용되지 않는 문제 상황 지난 글에서 "Vue 프로젝트에서 Bootstrap 연동하기"라는 글로 Vue 프로젝트에서 Bootstrap을 사용할 수 있도록 설치 및 연동, 마지막으로 테스트하는 작업까지 설명했습니다. 처음부터 깔끔하게 설치 및 정상 동작까지 완벽하게 됬으면 좋았겠지만, 설치 후 Bootstrap의 스킨들이 적용되지 않는 문제가 있었습니다. 콘솔창을 보니 아래와 같이 Warning message도 있더라구요. 원인 제가 생성한 Vue 프로젝트는 Vue3를 기본으로 하는 프로젝트이나 설치한 Bootstrap은 .. 2022. 11. 15. 뷰(Vue) 프로젝트에서 부트스트랩(Bootstrap) 연동하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. Vue.js 개발을 하는 도중, UI에 대해서 제가 신경쓰지 않아도 예쁘게 나왔으면 좋겠더라구요. 다들 많이 사용하는 Bootstrap을 연동하여 사용하기로 결정하였습니다. Bootstrap은 npm에서 설치할 수 있도록 지원한다고 하여 npm 명령어를 통해 설치 및 연동하였습니다. Bootstrap 설치 Bootstrap 설치시 주의해야할 사항이 있습니다. 첫번째, Vue 프로젝트의 최상위 디렉터리에서 작업해야 합니다. 두번째, Vue의 버전에 따라 설치해야할 Bootstrap의 버전도 달라지니 확인 후 설치해야 합니다. 명령어 Vue 3이 아닌 경우: npm insta.. 2022. 11. 14. 뷰(Vue) 파일 추가 후, "Parsing error: No Babel config file detected for" 오류 해결 방법 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. Vue 파일을 신규 추가할 때 발생하는 오류 상황 VSCode로 Vue.js 프로젝트를 신규 생성한 후, 정상적으로 구동이 되는 것을 확인하였습니다. components 폴더 하위에 vue 파일을 새롭게 추가하고 App.vue 파일에 연결하니 아래와 같은 오류가 발생하였습니다. 위 사진에서 안내되는 오류 메세지를 텍스트로 써보자면 아래와 같습니다. Parsing error: No Babel config file detected for '신규 추가한 파일 관련 경로' 원인 Javascript 문법을 자동으로 검사해주는 VSCode의 Extensions 중 하나인 ESLint.. 2022. 11. 11. VSCode로 뷰(Vue.js) 프로젝트 생성 및 구동하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. Vue.js 개발하기 위한 환경 구축을 완료했다면, 신규 프로젝트를 생성하여 환경 구축이 정상적으로 진행되었는지 테스트하는 작업을 수행합니다. 프로젝트를 새로 생성하지 않아도 된다면 각 프로젝트에 맞게 구동 하여 정상 동작 여부를 테스트해보시면 됩니다. VSCode 내 Vue.js 프로젝트 생성하기 1. VSCode에서 터미널(Terminal)을 킵니다. 키보드: Ctrl + Shift + ` 마우스: 상단 메뉴의 Terminal > New Terminal 클릭 2. 터미널에서 Vue 프로젝트를 생성하는 명령어를 입력 후 실행합니다. 명령어: create vue 프로젝트명.. 2022. 11. 10. 이전 1 2 3 4 5 다음
