(1) Vue로 만드는 직방/인스타그램 웹앱 강의

https://youtu.be/NONWar0jGLM

Vue 강의를 찾아보던 중,,, 되게 쏙쏙 들어오게 설명해주시는 것 같은 분을 발견해서 듣기 시작했습니다.

코딩애플님의 Vue로 만드는 직방/인스타그램 웹앱 강의 따라하기... 시작해봅니다!

 

설치, 세팅

node js 설치. -> npm을 사용하기 위해서.(npm은 각종 웹개바 라이브러리 설치 도우미)

npm install -g @vue/cli

* vue/cli->vue프로젝트 빠르게 생성해주는 라이브러리

 

확장 기능 Vetur, HTML CSS Support, Vue 3 Snippets 설치

 

프로젝트 생성

vue create vuedongsan

* vue create 프로젝트명

 

App.vue가 메인 파일이라고 생각하면 된다.

<template>안에는 HTML,

<script> 안에는 JavaScript, 

<style> 안에는 CSS를 짠다.

 

미리보기

npm run serve

 

App.vue를 HTML로 컴파일하기 때문에 웹 사이트처럼 동작을 하고 있는 것이다!

index.html에 App.vue에 짠 코드들을 박아넣고 있는것임! 박아넣는 작업은 main.js가 하고 있음.

 

파일, 폴더 설명

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

src: 소스코드 다 담는 곳

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

package.json: 라이브러리 버전, 프로젝트 설명 기록