Vue 3 시작하기:前端开发基础와 프레임워크 소개

1. 프론트엔드 개발 개요

1.1 프론트엔드 개발 사전 지식

이전까지 SpringBoot와 관련 기술들을 활용하여 대이벤트 프로젝트의 백엔드 개발을 완료했다. 이제 해당 프로젝트의 프론트엔드 개발을 시작할 차례이며, 프론트엔드 부분은 다음 두 가지 프레임워크를 통해 구현할 것이다:

Vue3 (JavaScript 프레임워크)
Vue3 기반의 UI 컴포넌트 라이브러리 Element-Plus

HTML, CSS, JS의 역할을 되새겨보면:

HTML:网页의 구조 담당 (태그: form, table, a, div, span 등)
CSS:网页의 표현 담당 (스타일: color, font, background, width, height 등)
JavaScript:网页의 동작 담당 (인터랙션 효과)

1.2 JavaScript 가져오기/내보내기机制

Vue3 관련 기능을 효과적으로 학습하기 위해, JavaScript의 모듈화 기능인 가져오기(import)와 내보내기(export)에 대해 알아보자. script 태그로 JavaScript 파일을 가져올 경우, 파일의 전체 내용을 한 번에 불러오게 되어 성능 상의 손실이 발생할 수 있다. 하지만 JavaScript의 가져오기/내보내기 기능을 활용하면 필요한 내용만 선택적으로 가져올 수 있다. 이제 JavaScript에서 내용을 가져오는 세 가지 방법을 살펴보자.

방법 1:

JavaScript 파일에서 함수 정의 부분에 export 키워드를 사용하여 내보내기
HTML 파일에서 script 태그 내에 import 키워드를 사용하여 가져오기
형식: import {필요한 내용} from 'JS파일 경로'
주의: script 태그의 type 속성 값을 반드시 module로 설정

JavaScript 파일 (mathUtils.js):

export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

HTML 파일 (index.html):

<script type="module">
    import { add, multiply } from './mathUtils.js';
    
    console.log(add(5, 3));
    console.log(multiply(4, 2));
</script>

방법 2: 일괄 내보내기

방법 1은 함수가 많을 경우 하나하나 export를 붙여야 하는 번거로움이 있다. JavaScript에서는 export 키워드를 사용하여 한 번에 여러 항목을 내보낼 수 있다. JavaScript 파일 (stringUtils.js):

function uppercase(str) {
    return str.toUpperCase();
}

function lowercase(str) {
    return str.toLowerCase();
}

function getLength(str) {
    return str.length;
}

export { uppercase, lowercase, getLength };

별칭 사용하기: 가져오거나 내보낼 때别名을 사용할 수 있다.

import { uppercase as toUpper } from './stringUtils.js';

export { lowercase as toLower };

방법 3: 기본 내보내기 (Default Export)

내보내는 항목이 너무 많은 경우, HTML에서 필요한 항목을 기억하기 어려울 수 있다. 이 문제를 해결하기 위해 JavaScript는 기본 내보내기 기능을 제공한다. 기본 내보내기를 하려면 내보내는 항목 앞에 default 키워드를 추가하면 된다. 기본 내보내기된 내용을 가져올 때는 중괄호 {}를 사용하지 않고, 원하는 이름으로 직접 가져올 수 있다. JavaScript 파일 (logger.js):

export default function logMessage(msg) {
    console.log('[LOG]', msg);
}

export default function logError(err) {
    console.error('[ERROR]', err);
}

HTML 파일:

<script type="module">
    import logger from './logger.js';
    logger('안녕하세요');
</script>

2. Vue 프레임워크 소개

Vue는 사용자 인터페이스를 구축하기 위한 점진적(Progressive) JavaScript 프레임워크이다. (공식 사이트: https://cn.vuejs.org/) 예를 들어: 쇼핑몰 웹사이트에는 다양한 데이터가 표시되지만, 이 데이터는 하드코딩되어 있지 않다. 백엔드 API를 통해 데이터를 가져와야 한다. Ajax로 비동기 요청을 통해 데이터를 확보했다면, 이 데이터를 화면에 표시하는 것은 Vue가 효과적으로 처리할 수 있다. Vue의 주요 특징은 다음과 같다:

데이터에 기반하여 화면을 자동으로 렌더링하는 직관적인 방식 제공
풍부한 기능을 제공하며, Vue 핵심 라이브러리에는 "선언적 렌더링"과 "컴포넌트 시스템"이 포함되어 있다
핵심 라이브러리를 기반으로 "클라이언트 라우팅", "상태 관리" 등의 기능이 플러그인 형태로 제공
전용 빌드 도구(Vite 등)를 통해 Vue 프로젝트 구축 지원

Vue는如此多的功能을 제공하지만, 개발 시 반드시的全部를 사용할 필요는 없다. 핵심 라이브러리만을 사용하여 프로젝트의 일부에만 Vue를 적용할 수도 있고, entire 프로젝트에 Vue와 다양한 플러그인을 적용하여 工程化 개발을 진행할 수도 있다. Vue가 이러한 유연성을 제공하는 이유는 部分改造 maupun 전체 개발 모두 가능하기 때문이다. 그래서 Vue는 "점진적 프레임워크"로 불린다.

Vue 개발 환경 구축

Vue 개발 환경을 구축하는 방법은 다음 링크를 참조: https://blog.csdn.net/weixin_69553582/article/details/129584587

3. VSCode 사용법

새 파일 생성: VSCode에서 새 파일을 만들려면 Ctrl+N (Mac은 Cmd+N)을 누르거나 파일 탐색기에서 우클릭 후 "새 파일"을 선택한다. HTML 자동 완성: HTML 파일에서 기본 HTML 태그 구조를 빠르게 생성하려면 파일 최상단에서 html:5를 입력하고 Tab 키를 누른다. 그러면 다음과 같은 HTML 뼈대가 자동으로 생성된다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

태그: vue3 JavaScript frontend element-plus vscode

7월 29일 10:00에 게시됨

괴물 클럽