[Vue3][wikibook] 1. Vue 소개

웹 개발/Vue

[Vue3][wikibook] 1. Vue 소개

cha430 2025. 8. 6. 11:35

1.1 프런트엔드와 백엔드
1.2.2 렌더링 방식의 변화
1.2.3 싱글 페이지 애플리케이션의 등장
1.3 Vue 3에서 달라진 점
1.3.2 컴포지션API 탑재
1.3.3 타입스크립트 지원
1.3.7 프런트엔드 도구 Vite 활용

구내 도서관에 책을 신청했다.

그리고 세 달 지나서 대출했다. 새 책이 아닌 걸 보니 그새 누가 봤나보군. 나만 빌릴까봐 걱정했는데 아니어서 괜히 뿌듯함..ㅎㅎ

도서관엔 18년도~22년도 책들이 많아서 최신 기술을 배우고 싶었기 때문에 신청했다.

Vue 3와 스프링 부트로 시작하는 웹 개발 철저 입문 - 위키북스, 최진 (2025)

예제 코드를 다운받아보자

https://github.com/wikibook/vue3-springboot

DownloadZIP 클릭

그리고 다운로드 받은 zip 파일 압축을 푸는데, 적당한 폴더 만들어서 풀면 된다.

Vue는 SPA인데, 이건 개념을 봐도봐도 실무에서 써먹을 때 헷갈린다. 난 아직 3개월차니까 ..히히

어쨌든, single page application 은 처음에 하나의 페이지를 로드하고. 사용자가 화면을 전환하면 새로고침 없이 필요한 부분만 불러와 렌더링한다고 한다. (?)

1.1 프런트엔드와 백엔드

프론트렌드인가 프런트엔드인가 .. 뭐가 외래어표기법에 맞을까 .. 역시 책에 써있는 게 맞군. 나도 앞으로 맞게 쓰려고 해야겠다. 프런트가 맞다.

난 그동안 프런트엔드가 그냥 보여지는 화면과 거기서 일어나는 일련의 일들.. js가 처리하는? 거라고 막연하게 생각했는데

-> 사용자 요청을 백엔드에게 요청하고 백엔드로부터 받은 데이터의 처리 결과를 사용자에게 출력하는 거라고 정리되어있군.

처음부터 이렇게 프런트랑 백이 나눠져있던 것은 아니고

마이크로소프트 IE(Internet Explorer)가 오만하게 웹표준 거부해서 cross browsing 이슈가 발생하고(동일 코드인데 IE에서만 다르게 동작)

마침 Google이 chrome보급에 성공하면서 ...

마이크로소프트가 19년도에 Edge 만들면서 웹표준 맞췄지만 때는 늦은 듯.

웹표준은 www을 창시한 Tim Berners-Lee 팀 버너스 리가 설립한 W3C (World Wide Web Consortium) 국제기구가 만든다고 한다.

여기서 또 흥미로운 건

HTML 을 W3C가 만들었지만 W3C의 느린 진행 방식에 불만을 가진 브라우저 기업들이 WHATWG 를 만들었고

W3C와 협력하여 HTML5를 만들었다고 한다.

그래서 현재 공식 HTML 표준은 WHATWG가 유지 중이라고 한다 ..

1.2.2 렌더링 방식의 변화

이전엔 사용자가 데이터 요청하면 전체 화면을 처음부터 다시 그렸는데 (댓글 등록 시 목록, 입력 창 등 모든 요소를 다시 그림)

Ajax(Asynchronous JavaScript and XML) 가 등장했다. Ajax는 일부 화면만 업데이트하여 빠르고 효율적이다.

기존 방식은 주로 서버에서 하기 때문에 SSR (Server-Side Rendering) 이라고 하며

새로운 방식은 클라이언트에서 렌더링하기 때문에 CSR (Client-Side Rendering) 이라고 한다.

그리고 CSR은 DOM(Document Object Model)을 쉽게 다룰 수 있는 jQuery가 등장하면서 더 많이 쓰였다.

** 여기서 DOM은 HTML요소를 JS로 조작할 수 있게 만든 트리 구조 모델이다.

document.getElementById('btn') 이런식으로 쓰는 것을 말한다.

** jQuery는 2006년 등장, JS 라이브러리다.

$('#id'), .addClass() 처럼 사용 .근데 요즘엔 Vue랑 React 같은 걸 더 많이 씀.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 문서가 로드되면 실행
  $(document).ready(function () {
    $('li').on('click', function () {
      alert($(this).text());  // 클릭한 항목의 텍스트 출력
    });
  });
</script>

** 그리고 늘 헷갈리는 Expression Language... JSTL...

- EL

: JSP등 뷰 템플릿에서 데이터를 간단히 출력할 때 쓰는 문법

${...} 형식으로 사용

- JSTL

: JSP에서 조건문, 반복문 등 로직 처리할 때 사용

<c:forEach ...> 같이 사용

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

  <ul>
    <c:forEach var="user" items="${users}">
      <li>
        이름: ${user.name}, 나이: ${user.age}
      </li>
    </c:forEach>
  </ul>

정리하자면

EL과 JSTL은 서버에서 HTML을 만들 때 사용되고
jQuery는 그 HTML이 브라우저에 표시된 후에 사용자가 클릭하거나 조작할 때 사용

1.2.3 싱글 페이지 애플리케이션의 등장

CSR에 익숙해진 개발자들은 하나의 페이지로 개발하고 싶다는 생각을 하게 된다.

= 처음에 페이지 하나만 불러오고 추후 JS활용하여 필요한 부분만 업데이트

구글의 Angular, 페이스북의 React, 에반 유의 Vue ..가 있다고 하는데 엥 리액트를 페북이 갖고있구나 신기하네

Angular : 재사용 가능한 컴포넌트, 실시간 양방향 데이터 바인딩, 간편한 HTML 템플릿 문법 제공

React : Virtual DOM으로 Angular 성능 이슈 해결 (애플리케이션 규모 커지면 성능 저하되는 것 해결)

Vue : 직관적인 문법, 뛰어난 성능 .. View와 같은 뜻의 프랑스어라고 한다 띠용

근데 js를 통해 데이터 요청하고 응답받아서 출력하기 때문에 크롤링하지 않을 수 있다는 단점이 있다고 한다.

그래서 SSR을 지원하는 React기반 Next, Vue기반 Nuxt 등이 또 등장했다고 한다.

** 근데 SPA도 URL 바꿔서 여러 페이지를 보는 것처럼 할 수 있다. pushState를 사용하면 된다고 한다.

// 버튼 클릭 시 URL 변경 (페이지 reload 없음)
this.$router.push('/profile');

1.3 Vue 3에서 달라진 점

tree-shaking 트리 셰이킹 : 나무 흔들어서 불필요한 잎, 가지를 떨어뜨리는 것처럼 애플리케이션에서 사용되지 않는 코드를 제거하고 최적화하는 기법

Vue3 는 ES 모듈(ESM) 기반으로 작성되어 있다.

번들러가 ES 모듈을 분석해서 사용하지 않는 코드를 제거한다.

node.js 에서 commonJS 방식(require(), module.exports) 쓰면 적용 안될 수 있다고 한다. 정적 분석이 어려워서 ..

근데 어차피 나는 Vue3로 쓰니까 상관없을 듯.. 어차피 봐도 모름 ..

뒷부분 읽다보니 CommonJS, ESM, AMD 등등이 있는데 지금 웹브라우저에서 기본으로 ESM을 채택해서 쓴다고 한다.

export 키워드로 내보내고 import 키워드로 불러오는 것.

그냥 트리 셰이킹은 import만 해놓고 안쓰면 연한 회색으로 글자 변하던데, 그런 거 말하는 거 같다 .....

1.3.2 컴포지션API 탑재

OptionsAPI에서는 data(초기 데이터 정의), methods(메서드 정의), computed(계산된 메서드 정의) 옵션을 제공했다.

근데 코드가 늘어날수록 데이터는 위에 있고 메서드는 아래에 있고 하다보니 왔다갔다 힘듦.

컴포지션API는 setup hook 안으로 기능들을 모은다.

데이터, 메서드를 모아둔 것..

lifecycle hooks 도 setup hook 안으로 들어왔다.

lifecycle hooks	OptionsAPI	CompositionAPI
컴포넌트 생성	created	setup hook에 포함
컴포넌트 마운트	mounted	onMounted
컴포넌트 소멸	destroyed	onUnmounted
컴포넌트 업데이트	updated	onUpdated

1.3.3 타입스크립트 지원

JavaScript의 상위 집합(superset)
JavaScript에 정적 타입(static type)을 추가한 언어
컴파일 단계에서 타입 오류를 잡아줌
최종적으로는 모든 TypeScript 코드는 JS로 변환되어 브라우저에서 실행

[JS]

function sum(a, b) {
  return a + b;
}

console.log(sum(5, "10")); // 510 😱

// JavaScript는 문자열+숫자를 그냥 합침 → 런타임에서 문제 발생 가능

[TS]

function sum(a: number, b: number): number {
  return a + b;
}

console.log(sum(5, "10")); // ❌ 컴파일 단계에서 오류 발생

1.3.7 프런트엔드 도구 Vite 활용

원래 Vue CLI로 Vue프로젝트를 빌드하고 개발 환경을 설정했다. 근데 최근 Vite를 많이 사용한다.

Vite는 React에서도 사용 가능하고 빠르기 때문이다.

이것도 프랑스어고, quick 의 뜻이라고 함.

<html>
  <body>
    <script src="class1.js"></script>
    <script src="class2.js"></script>
  </body>
</html>

[class1]
let captain = "kim";

[class2]
console.log(captain);

이렇게 실행할 경우 captain 은 class1에서 정의했음에도 불구하고 kim이 출력된다.

captain이 전역변수이기 때문이다.

무분별하게 사용하면 전역변수 오염으로 인해 .. 오류가 날 수 있다.

그래서 모듈 시스템이 등장했다. 각 기능을 모듈로 분리해서 전역 변수가 오염되지 않게 한다.

CommonJS, ESM, AMD 등이 있는데 ESM 이 대표적이다.

** ESM : 함수 내보낼 때 export, 갖다쓸 때 import 하는 것

[class1.js]
let captain = "kim";

export default captain;


[class2.js]
import captain from "./class1.js";

console.log(captain);

이렇게 했었는데

이젠 웹브라우저에서 ESM방식을 자체적으로 지원한다 (=네이티브 ESM)

이제 ESM 방식 사용하고 싶으면 type에 module 값만 넣으면 된다.

<script setup> 문법을 쓰면 export default를 안 써도 됨

<script type="module" src="./check.js"></script>

아. 그래서 type="module" 을 쓰는 거구나. 이 모듈을 쓰려고..

정리하면

1. html에서 type="module" 을 써서 check.js가 모듈이라고 알려줌. 이러면 check.js에서 import, export쓸 수 있음

2. check.js 는 그냥 entry 역할. js파일을 어디서 import에서 쓰지 않기 때문에 export 안 해도 된다.

3. Vue컴포넌트는 SFC. Vue빌드 도구 (Vite, Vue CLI)가 자동으로 export default 한다.

그래서 js에서 import Check from '@/components/check/check.vue' 해서 쓸 수 있다.

4. check.js를 어디서 갖다쓰려면 check.js에서 export해야하는데 SFC는 자동으로 export default 해주기 때문에 안해도 됨

createApp(Check).use(vuetify).mount('#app')

5 근데 js파일에서 #app 을 mount 했기 때문에 vue가 .html파일의 <div id=app></div> 부분에 들어가는 것이다.

'웹 개발 > Vue' 카테고리의 다른 글

[Vue3][wikibook] 4. Vue3 시작을 위한 기초 학습 (0)	2025.08.07
[Vue3] optionsAPI / compositionAPI(script setup) 비교 예제 (0)	2025.08.07
[Vuetify] ml- , mb- (0)	2025.06.16
[Vue3] DB중에서 계정 과목 불러와서 selectBox에 넣기 (1)	2025.06.10
[Vue3] v-slot (0)	2025.05.28

현재글[Vue3][wikibook] 1. Vue 소개

ChaChaCode

CHA 개발 일지

ChaChaCode