2022.02.08 - Vue.js 개발환경세팅 MAC (+ 에러 추가)

 Vue :

- 가상 DOM을 활용할 수 있고, DOM을 통해 모든 요소를 실시간 반응형 컴포넌트로 제작할 수 있는 자바스크립트 프레임워크.

 

- SPA 개발에 특화된 프레임워크 이다.

 ( single page application ) : 단일 페이지 어플리케이션의 형태로 웹을 개발하는 것을 의미한다. 

 최초 로드시, 전체 페이지를 로드 한 후 부터는 기존의 페이지와 비교하여 갱신이 필요한

 특정 부분만을 json 형태로 데이터를 가져와 바인딩 한다. 

 SPA 방식은 Ajax로 데이터를 가져와 필요한 부분만을 갱신하도록 자바스크립트를 작성한다. 

 

- 라우팅이란? 데이터를 보낼 최적의 경로를 선택하는 과정으로, 주어진 데이터를 최적화 된 형태로 주고받을 수 있는 경로를 선택하는 과정

 

1) npm 사용을 위해 node.js 설치 

npm: node package manager. (라이브러리를 설치하고, 프로젝트를 인식 가능하게 함)

https://nodejs.org/ko/

Node.js

 

 

 

2) npm  설치 

npm install -g @vue/cli

 

입력 후 에러 발생시 앞에 (sudo)를 붙여준다. 

 

 

 

3) 설치 완료 확인 

vue --version 입력 후  

---------------------------------------

@vue/cli 4.5.11 

명령어 나오면 성공 

 

 

 

4) vue project 설치 명령어 입력 

4-1) vue create [ 프로젝트명 ]

2번 3번 중 선택하면되는데 나는 2번 선택! 

 

 

5) 쭉쭉 실행하다가 설치 완료 후 

-> 해당 폴더로 이동 명령어 입력 

cd / 폴더경로 

-> 서버 실행 명령어 입력 

npm run serve

 

여기서 나는 npm run serve 명령어 수행 오류가 발생했는데..

 

검색해보니 

node_module 폴더 삭제 후 명령어로 재설치하고 가동하라고 해서 

1) 4번에서 생성한 폴더 경로를 찾아 node_module 폴더를 삭제한다. 

2) 삭제 후 터미널에 npm i 입력

3) npm run serve 재기동

3번 명령어 실행 후 이 화면이 나오면 성공~~!

컨트롤 누른후 로컬 url 클릭 후 접속까지 확인하면 된다! 

vscode에서 폴더 열어 목록 확인하면 끝~~

 

 

===================2월 13일(일)=================

vue 수업들으려고 터미널 실행시켰더니 npm run serve 싫애이 안되는 것.. 

node_module 삭제도 해보고 이것저것 했는데도 안돼서^^..

https://any-ting.tistory.com/38

[Vue] Mac Vue.js 개발환경 설정

그냥 모조리 삭제하고 yarn 방식으로 다시 다운받았따 이거 왜이래?

왜그러는지 진짜 모르겠고 검색해도 잘 모르겠고 일단..수업간다 ㅋㅋ..