1일차 - 2024.11.14
Vue3 설치 및 셋팅
Vue 공부 목적
기본문법 숙달 (어디에서 사용하는지, 왜 사용하는지, 어떻게 사용하는지)
개인 프로젝트 간단하게 수행 (Vue3의 Script Setup 방식 사용 예정)
VUE는 왜 사용하는가?
1. 문법이 간략하여 React나 Angular에 비해 코드의 가독성이 높음.
2. 코드를 짤 때 React나 Angular와 달리 방법이 정해져 있음.
- Q. <HTML>을 여러개 만들고 싶은 경우
- React : {map}, forEach, for for in for of 등
- Vue : v-for 방식하나로 통일되어 있음
- Q. <HTML>을 조건부로 랜더링하고 싶은 경우
- React : tenary, operator, &&, ||, if else, enum... 등
- Vue : v-if, v-else로 통일되어있음. -> 스타일의 통일성
이 외에도 React에 비해서 살짝 렌더링이 빠르다는 장점, 업데이트를 주기적으로 자주해준다는 장점등이 있음.
Vue의 설치 방법
1. node.js 설치 (기존에 사용하고 있는 node.js의 경우에도 최신버전으로 설치를 진행해주어야 추후 라이브러리 설치 등과 같은 부분에서 충돌을 방지해줄 수 있음)
- 설치 목적 : npm 명령어 사용을 위해 설치 (npm : 각종 웹 개발 라이브러리 설치 도우미)
2. npm install -g @vue/cli로 vue-cli 설치
- vue cli은 vue 개발환경을 도와주는 도구로 기본적인 프로젝트 세팅을 도와주므로 프로젝트 폴더 구조에 대한 고민, lint (소스코드를 분석하여 문법적인 오류나 스타일적인 오류), build (소스 코드 파일을 실행 가능한 소프트웨어 산출물로 변환하는 과정), 라이브러리의 구성, webpack (웹에서 사용되는 모든 자원을 하나로 합쳐주는 모)의 방법에 대한 고민등을 덜어주는 용도로 사용함
Vue 프로젝트 생성
1. cmd 창에 vue create [프로젝트 명]
으로 프로젝트를 생성
- 해당 에러의 경우 vue 프로젝트명에 대문자가 들어갔기 때문에 일어난 문제로 vue CLI는 프로젝트 이름에 대문자를 허용하지 않기 때문에, 소문자만을 사용헤야함
- 아래 친절하게 실행 명령방법도 나타남 (프로젝트 디렉터리로 이동 후 npm run serve 명령어로 실행)
- template라는 항목이 나타나며 그 안에 html코드를 작성하여 랜더링하는 방식임을 알 수 있음.
.vue 확장자의 특징
1. template, script, style 세 부분으로 나뉘어짐
- template : HTML 구조를 작성하는 영역
- script : 컴포넌트의 JavaScript 로직을 작성하는 부분
- style : 컴포넌트에 적용할 CSS 스타일을 작성하는 부분
'VUE 공부' 카테고리의 다른 글
| 소규모 Project 제작 -1 (1) | 2024.11.26 |
|---|---|
| VUE 공부 5일차 (1) | 2024.11.19 |
| VUE 공부 4일차 (1) | 2024.11.18 |
| VUE 공부 3일차 (0) | 2024.11.18 |
| VUE 공부 2일차 (2) | 2024.11.15 |