반응형 DEV/Vue.js6 npm run serve permission 에러 1. vue create vue3-cli로 뷰 프로젝트를 생성했다. 2. 성공 후 나온 명령어를 입력하여 실행시키려는데, 계속 permission 에러가 떴다. 그래서 에러나는 폴더들를 생성하거나 권한을 주거나 했는데, 다른 폴더나 파일들 permission이 계속 떠서 이런 방법으로는 해결이 되지 않을 거 같았다. 그래서 혹시나 하는 마음에 실행을 sudo 권한으로 하니 잘 된다. 3. sudo npm run serve 를 입력하면 잘 실행되는 걸 볼 수 있다. (참고: 나는 package.json scripts에 serve를 s를 변경한 상태여서 sudo npm run s를 입력해줬다.) 2024. 2. 27. zsh: command not found: vue vue create vue3-cli을 입력하니 아래와 같은 메세지가 계속 떴다.zsh: command not found: vue구글링도 해보고, chatGpt도 돌려서 환경변수 설정을 해봤지만 잘 안 됐는데 결국 해결! 아래와 같이 입력해주면 된다.vim ~/.zshrc1) 우선 ./zshrc 편집기를 연다.export PATH=$PATH:/Users/[사용자이름]/.npm-global/bin2) 위 내용을 입력한다. 사용자이름에는 맥북 사용자 이름을 입력하면 된다.source ~/.zshrc3) 새로고침 해준다. 그리고, vue --version을 확인해보면 잘 나오는 걸 확인할 수 있다. 2024. 2. 27. 02-2. 뷰(Vue) 개발자 도구 & VSCODE 확장 플러그인 설치하기 뷰 개발자 도구(뷰 크롬 플러그인)은 뷰로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있다. 1. Google에서 Vue.js devtools를 검색해서 크롬 플러그인 스토어로 이동하거나, https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd 에서 [Chorome에 추가]버튼을 클릭한다. 2. Vue.js devtools을(를) 추가하시겠습니까? 알럿이 뜨면 '확장 프로그램 추가' 버튼을 클릭한다. VSCODE 확장 플러그인 목록 Vue 3 : Volar 색 테마 : Night Owl 파일 아이콘 테마 : Material Icon Theme 뷰.. 2022. 3. 13. 02-1.Vue.js 시작하기(인텔리제이 기준 환경세팅) 1. https://nodejs.org/ko/ 에서 LTS 버전을 다운로드 받은 후 설치해준다. ■LTS (Long Term Support) : 오랜 기간(2년) 지원이 가능하다는 의미로, 해당 버전에 대한 취약점 패치, 개선 사항에 대한 패치를 의미한다. 해당 버전에 존재하는 코어 기능에 대해 같은 코드가 같은 기능을 하도록 지원합니다. ■ 현재 버전: 개발이 진행중인 버전이다. 해당 버전에 존재하는 기능이 패치를 통해 사라지거나 변경되어 새로 코드를 작성해야할 가능성이 존재하는 버전이다. node -v npm -v2. 윈도우키 + R ▶ cmd 창에서 명령어를 입력하여 제대로 설치됐는지 확인한다. 3. 인텔리 제이가 설치되어 있지 않으면 https://www.jetbrains.com/ko-kr/ide.. 2022. 3. 13. 01-2. Vue.js의 특징 1. UI 화면단 라이브러리 Vue.js는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM(Model - View - ViewModel) 패턴이란? 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴이다. 즉, 화면 앞단(프런트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다. MVVM 패턴으로 개발하면 화면의 요소들을 제어하는 코드와 데이터 제어로직을 분리하여 코드를 직관적으로 이해할 수 있고, 추후 유지보수까지 편해진다. 용어 설명 뷰(View) 사용자에게 보이는 화면 돔(DOM) HTML 문서에 들어가는 요소(태그, 클래스.. 2022. 3. 13. 01-1. Vue.js란? Vue.js란? Vue.js는 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크이다. (프레임워크 : 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해놓은 도구) Vue는 화면단 라이브러리이자 프레임워크라고 볼 수 있다. (라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집) *사이드 라우팅 : 서버에게 별다른 요청을 보내지 않고, 클라이언트의 브라우저 단에서만 여러 페이지들을 왔다갔다 방문할 수 있게 하는 기능 * 컴포넌트 : 재사용이 가능한 독립된 모듈 Vue.js는 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있기 때문에 점진적인 프레임워크(progressive framework)라고 부른다. 화면단 데이터 표현에 .. 2022. 3. 12. 이전 1 다음 반응형
