뷰동산 만들기, vue 작동원리

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!

1.Node.js 설치하기

Node.js는 JavaScript를 사용하여 서버 측 애플리케이션을 개발하기 위한 런타임 환경입니다. Node.js는 Google V8 JavaScript 엔진을 기반으로 하며, 이 엔진은 브라우저에서 JavaScript를 실행하는 데 사용되는 엔진 중 하나입니다.

JavaScript를 사용하여 클라이언트 측과 서버 측 모두에서 동일한 언어로 애플리케이션을 개발할 수 있어 개발자들에게 매우 유용한 도구 중 하나입니다.

 

여기서 잠깐 npm 이란?

npm (Node Package Manager)은 Node.js 애플리케이션 및 프로젝트에서 필요한 패키지를 관리하고 설치하는 도구입니다. npm은 Node.js 생태계에서 사용되는 JavaScript 라이브러리, 모듈, 패키지, 프레임워크 및 도구를 쉽게 공유하고 배포할 수 있도록 도와줍니다

npm install -g @vue/cli    뷰 개발환경 설치 도와주기

vue create vuedongsan(프로젝트명) 

vue3 선택하고 프로젝트 생성해주기

설치가 자꾸 에러가 나서 카페와이파이 말구 핫스팟으로 진행

 

확장프로그램 설치 

https://velog.io/@skyepodium/%EB%82%B4-%EC%B5%9C%EC%95%A0-VS-Code-%ED%99%95%EC%9E%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8

내 최애 VS Code 확장 프로그램

 

 

완료!

 

코드 짜는 곳은 App.vue 입니다.

template 안에는 html을 짜고

script 안에는  JS를 짠다.

style 안에는 css를 짠다

 

미리보기 띄우기는 npm run serve

(혹시 안된다고 error 나면 파일 디렉토리확인 먼저 한다. app.js가 있는 곳으로 디렉토리 이동해야한다)

쀼우 폴더에서 cd vuedongsan 명령어를 통해서 파일 이동 완!

---

 

https://simplevue.gitbook.io/intro/

Simple Vue.js - simpleVue

 

VUE CLI 란?

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.

 

여기서 CLI 란 ?

명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. (위키백과)

---

NodeJS, NPM, 프로젝트 폴더명 설명

NodeJS란? npm 이용하려고 설치

Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임으로 , JavaScript를 서버에서도 사용할 수 있도록 만든 소프트웨어 프로그램

NPM이란? 각종 웹개발 라이브러리 설치 도우미

NPM은 (Node Package Manger)의 약자로 명령어로 자바스크립트 라이브러리를 설치하고 관리하는 패키지 매니저

 

프로젝트 폴더명 설명

 

node_modules:  프로젝트에 쓰는 라이브러리들

src : 소스코드 다 담는 곳

public : html 파일, 기타파일 보관

package.json : 라이브러리 버전, 프로젝트 설정 기록하는 곳

---

node.js 설치한 이유는 npm을 사용하기 위해서다

npm은 각종 웹개발 라이브러리 설치 도우미 (yarn도 마찬가지)

npm이 vue @cli 설치를 도와주는데 vue cli는 프로젝트를 빠르게 생성해주는 라이브러리로

프로젝트 생성은 vue create 프로젝트명

App.vue가 메인페이지

웹브라우저는 사실 .vue 파일을 못읽는데 app.vue에 있는 파일을 html로 다 컴파일해줘서 동작할 수 있는 거다.

index.html에 app.vue가 꽂아져서 작동하는 원리 , 이걸 누가 꽂아주나여? main.js가 합니다.