※ Keep in mind
본 내용은 웹개발과정의 강의 중 내용을 복습을 위해서 메모한 것에 불과한 것입니다. 이러한 연유로 강의내용을 오인한 나머지 오기재 및 불기재가 있을 수 있으니 '참고'만 해주시길 바랍니다. 저의 경우에도 본 내용을 단순히 읽은 것이 결코 저의 것이라고 생각하지 않습니다. 본 내용은 복습을 위한 초기 내지 중간 과정에 불과한 것이고, 이후에 내용을 보충 후 인출 및 설명하기 과정이 있어야 비로소 복습의 단추가 어느 정도 마무리되어간다고 볼 수 있습니다.
따라서 당초에 본 내용은 비공개였습니다. 그럼에도 불구하고 본 내용을 공개한 점은 함께 공부하는 동료들과 나눔을 바탕으로 배움과 성장의 공진화라는 소기의 목적을 달성에 어느 정도 도움이 될 수 있기 때문이라고 생각합니다.
I. Vue.js
1. 자바스크립트 개발 도구
(1) 개발도구의의와 설명
1) 개발서버 이용의 필요성
npm :node package management
보안 때문에 디렉토리에서 바로 html page를 실행하면 안돼! liveserver 는 외부에서 온거야
만약 실수로 문서를 열어라고 메일로 보내고, 로컬에서 그냥 실행하라면 하면 파일들을 형식을 바꾸어 버리는 경우도 있어 그러니까 로컬에서 실행하는건 하지말자
그런데 로컬로 안하면 방법이 없는데, 웹서버로 하자!
문서만드는데 톰캣 하기 부담스럽자나, 가볍게 하기위해서 만든게 개발서버(preview, liveserver)를 써
npm에 저장된 devserver도 있어
2) web-pack 의 필요성(sass , less e.t.c)
es5 때 나온거야 이떄는 js 모듈시스템 등이 없었던 시절이야
es6를 지원하지 않는 브라우저는 많은데 es6 spec을 보고 싶은데 es6를 써도 es5를 써도 해결이 돼
이런 번역기가 등장했어
ES6가 지원안돼 ES5만 되기 때문에 도구가 필요해
ES6하고 변환기로 써야해
마찬가지로 sass 는 css 변환기 / less 도 마찬가지 if문 같은게 있어
css가 지원안됐는데, 오늘날 반영이 되었어
css를 less 로 쓰면 변환기 있어야해
3) webpack
이런경우 webpack 은 다 묶어 주는거야
그런데 얘들이나 sass, less를 안써 왜냐하면 css를 잃게 돼
서로 충돌도 나고 프레임웍 가능하면 쓰지말자 언어 그 자체를 잘 쓰자
dom도 엄밀히 프레임웍이 될 수있다는 의미이다 가능하면 특별한게 아니면 프레임웍은 쓸떄만 쓰는거야
그때는 남발하고 쓰는것에 혈안이고 능력있는거같지만 실제로는 다 꼬아버리는거야
dom 바닐라 / mvc는 리액트, 뷰, 앵귤러, 스벨트
4) Vite 사용의 필요성
그래서 우리가 webpack을 쓰지않는데, 그 이유가 bundle로 하다보니까 묶어서 쓰니까 개발할때 자주실행하자나 실행할 때마다 번들만들어서 실행하니까 그 과정이 오래걸려
vite 빠르다 를 의미한다. => 이걸 만든 이유 자체가 번들링해서 합치는거지만, 이제는 필요한 만큼만 합쳐서 하는게 가능해
이제 훨씬더 완성도, 결과물을 높일 수 가있어!
5)
moduleSystem 지원안하는데에서는 합치지못했는데, 웹팩은 이거를 한 파일로 만들어주어서 배포파일로 만들어주는 bundle system이야
즉 이런시스템 필요이유가 모듈화 지원하지않던 시절에 es6 기능을 쓰려고하는거처럼 합쳐주는 방법이야
결과물이 뚱뚱해질수록 나오는 속도가 느려져
{
"name": "rland-vue3",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.47",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"vite": "^4.1.4"
}
}
vite는 일부만 해서 빨라!
vite 하면 webpack보다는 빠른성능도 기대, 서버따로설치 X , bundling 유용
기본 Vue의 페이지를 다 지우면 vite 초기상태 와 마찬가지야
vite로 웹서버 대신할 수있고, 얘가 제공하는것으로 코드 작성을 원할하게 가능해
Vue.js의 변환기 쓰면은 코드를 훨씬 쉽게할 수있는 싱글파일 컴포넌트가 가능해
2. 확장자 Vue
(1) 확장자 Vue 소개
1) 확장자 Vue 사용여부
확장자를 vue를 하면은 한번 변환기를 쓴다는 말이야, js 문법등이 안맞아도 변환기로 맞춰줄 수 있다는 의미야
list.js 와 list.vue 차이가 있어 :
<전자>는 html 파일에서 <script src="" > 설정해주어야해
<후자>는 Sigle-file-component를 쓸 수있어
전자는 Sigle-file-component 못썻어 왜냐하면 js 확장자에다가 css, html을 같이 둘 수없었어
Sigle-file-component는 Vuw라는 확장자 쓰면서 js,css 등 다 쓸수 있어
한번에 변환해주고, 번들링해주는게 있고 그것이 바로 비트야!
2) Vue의 필요성에 의문
그런데 원래 한 파일에 둘 수있는거 아닌가?
페이지가 여러개로 나누어 지는거야 쪼개어져서 개별적으로 만들 수 있어
쪼개어진 한 블럭에서 스타일 따로 가져오는게 불가능해 단위 블럭에서
단위블럭 만들면서 3가지 따로하면서, 서로 영향안받는(고립화) 할 수있는 이점이 있어
(2) 번들링하기
(번들링: 모듈화된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업)
dev : vite는 webServer 띄우는거야 / build : vite build 는 번들링 하는거야 번들제품만드는거야
`` 을 하면 색이 다 같아 그래서 곤란해
왼쪽 작성한게 오른쪽으로 변환한것을 누군가가 해주기 때문에 가능한거야
그 역할을 웹팩과 같은 vite라는 녀석이 번들링 해주기 때문이야
3. 앱에서 계산기 기능 분리하기 (Vuw 없이)
(1) 방향성
1) 들어가며
이제 프론트엔드하는거야 예전에는 JS는 브라우저에 돌아가는 간단한코드인데, 이제 JS만의 코딩환경이 만들어졌어
node 실행하자
header, footer 빼고 페이지 로딩없이, 안의 내용만 바뀌어야하는거야
2) 3단분리
template(Calc.js) 으로 모듈화를 하고, App.js 에 mount 를 한다
그리고 App.js에서 createApp(main.js) 에 mount 를 한다.
이렇게 한번 해보자!
3) 실습 : 계산기 어플리케이션
app.js 만든다
가운데 앱이 우측으로 간거야
우측은 단순히 객체에 불과한거지 앱이 아니야 현재는
뭘했냐 하면
createApp{} 에 들어오는게 어플객체야
어플 만드는 구문에다가 calc역할을 하는거만 넣었어
지금은 그게 아니라 app역할하는것을 따로 두었어
어플에서 계산기를 분리했어
app위한 component로 할지 계산기 심는건지 내 선택이야!
현재 이상태는 계산기가 어플리케이션인데
계산기 하나만이면이게 충분해
그런데 다른것이 포함된거라면 바람직하지 않은거야
4) 다중 계산기 어플리케이션
계산기를 App()으로 할거면 .createApp(Calc)
하면돼
그렇다면 계산기가 그 중 하나로 되게끔 해보자
import Calc from './calc2.js';
Vue
.createApp({
template:`<section>
<h1>다양한 도구를 만나봅시다</h1>
<Calc/>
<Calc/>
<Calc/>
</section>`
})
.mount("#app");계산기를 여러개 두었다
그러나 당장은 실행이 안돼 (options Misc(mix): https://vuejs.org/api/options-misc.html#components )
import Calc from './calc2.js';
Vue
.createApp({
components:{
Mo : Calc
},
template:`<section>
<h1>다양한 도구를 만나봅시다</h1>
<Mo/>
<Mo/>
<Mo/>
</section>`
})
.mount("#app");이거는 Mo라는 별칭방식으로 하는거야
별칭방식으로 하고싶지 않으면 Calc만 넣어주면 돼
이렇게 하면 나올 수 있게 돼!
지금 보는 것처럼 만들고자 하는 것을 하나의 컴포넌트 만든 것을 바꾸거나 뺄수도 있어!
4. 알렌드 컴포넌트 바꾸기 (.Vuw 사용)
(1) 들어가며
1)
이번에도 바꾸거나 겹치거나 재사용하는것으로 가는거야!
싱글파일컴포넌트 만들거야 뷰엔진이 제공하는 뷰 변환기 쓸거야
앞에서 본 계산기에서 하는app.js 만들고 import 방식보다 Vue3.X 버전에서 새로 제공하는 방식이야, 그래서 2.X 로 할 수있는게 많이 없엇어 (자사확장자로 제공!)
변환기라서 이걸로 다양한 플랫폼에서 이용할수 있게 돼!
2)
importMap ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap )
한번 봐!
(2) App.vue 를 이용한 분리하기
1) 분리하기
App.vue -> App.js 로 변환이 돼 그러면서 아까 보았던 계산기 처럼 변환이 되는거야
이거를 직접하는게 아니야 App.vue로 만들어서 알아서 변환되는것이 편해
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/css/reset.css" type="text/css" rel="stylesheet" >
<link href="/css/style.css" type="text/css" rel="stylesheet" >
<link href="/css/layout.css" type="text/css" rel="stylesheet" >
<link href="/css/header.css" type="text/css" rel="stylesheet" >
<link href="/css/footer.css" type="text/css" rel="stylesheet" >
<link href="/css/user/find-id.css" type="text/css" rel="stylesheet" >
<link href="css/buttons.css" type="text/css" rel="stylesheet" >
<link href="css/icon.css" type="text/css" rel="stylesheet" >
<link href="css/deco.css" type="text/css" rel="stylesheet" >
<link href="css/utils.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="app"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>module 로 타입설정
<template>
<div th:insert="~{inc/footer}"></div>
<header class="header fixed-header" th:fragment="header">템플릿 설정
import App from './App.vue'
import {createApp} from 'vue'
createApp(App)
.mount("#app");여기서 import 로 vue 하는것은 cnd 에서 들고오는 예약어야
이전에 .js 확장자 방식은 객체를 선언하는 방식으로 이용을 했다면
.vue 확장자 방식은 라이브러리를 이용하는 방식으로 하기 때문에 이렇게 하는거야!
2) cdnjs 에서 들고오기
우리가 Vuw를 사용하는 방법은 여러가지야
노드에다가 npm으로 변환기를 쓰는 환경이 있어!
웹에서 앞으로 라이브러리 쓸건데 모든것들을 사용 할때
node.js에다가 변환기 얹여서 라이브러리 쓰는경우가 있어
그리고 script에서 Vuw 글로벌빌드로 하는거야 탑레벨로 하는거지
뽀개기 해서 쓰거나 vue.createApp을 하는거야
그런데 우리가 쓰는게 이런방식이 아냐 우리는 다른 라이브러리 쓰는거야
쓰는 방법이 달라 글로벌 객체를 제공해주지않아
글로벌의 경우 글로벌객체를 제공해줘
우리가 쓰는방법은 글로벌객체를 안써 대신에 모듈 을 제공해줘 (esm)
쓰는 방법은 여기서 차이가 있어
우리는 모듈화된 Vuw 라이브러리만 가져다 써야하는거야! 모든 것을 쓸 수있는건 아니야!
같은 라이브러리가 아니야
3) cdn 이란?
cdn : content 딜리버리 네트워크
구글이 제공하는 수많은 js라이브러리가 있어 js 라이브러리를 아는거 있으면 말해줄래?
: j-query 가 있어
내가 다운로드 받아서 내 폴더에 두고 사용하게 되자나! 내가 js폴더에다가 j-query 라이브러리 받았다고하자
내 사이트에서 내꺼 사용하는 사용자들이 제이쿼리 받아가자나
같은 라이브러리인데, 제이쿼리 쓰는대서 또 받지! 루트가 다르긴 하지만 걔 컴퓨터에는 제이쿼리 두개야 세개...네개...
이런식으로 많이 사용하는 라이브러리 개별적으로 받으니까 사용자 컴퓨터에 j-query 수천개있을 수 도 있어
그래서 cdn 에서 한번만 해!
이렇게 하면 cdn에서 요청하자나 이러면 한번만 받게 돼! 컨텐츠 요청 uri 단일화 해서 가능해
중요한게 있어 얘네만 믿고 링크 했는데,,, 회사가 망하면 제이쿼리 다 날라가버려! 그래서 얘를 쓰더라도, js에서 받아놓긴해야해! 받아놓고 링크는 cdn해!
cdn이 신뢰할수있고 속도가 빨라야해
그래서 요새 제이쿼리는 cdn에서 받고 vuw도 마찬가지야!
(3) 빌드하기
컴포넌트는 조심할게 헤더랑 푸터 잘라났자나, 그런데 얘들은 다 컴포넌트라서 어디 붙을지 몰라
build 하면 최대한 줄여서 이렇게 저장이 돼!
(4) App.vue 를 이용한 분리하기 2
1)
좌측에 했던 방식을 오른쪽에 어떻게 할까?
스크립트 두가지방식이 있어 <script setup> 방식이야
setup이 없으면
다음과 같이 기존방식대로 하면 돼!
<script>
export default{
data(){
return{
x:1,
y:2,
test : "hello"
};
}
}
</script>
<template>
<div th:insert="~{inc/footer}"></div>
<header class="header fixed-header" th:fragment="header">
<div>
<h1 class="header-title"><a href="/index.html"><img class="logo" src="/image/logo-w.png" alt="알랜드"></a></h1>
<ul class="main-menu d-none d-inline-flex-sm">
<li><a class="" href="/menu/list.html">카페메뉴 <span v-text="test"></span></a></li>
<li><a class="" href="/notice/list.html">공지사항</a></li>
<li><a class="" href="/user/login.html">로그인</a></li>
</ul>
<div class="d-none-sm"><a class="icon icon-menu icon-white" href="?m=on">메뉴버튼</a></div>
</div>
</header>v-text 를 넣어주는 방식이야
컴포넌트 단위에서 다른곳 안보고 export하는 내용만 노출되고 html이 같이 있는데 뭔가 문자열 같지않다.
2) header 의 경우
우리가 한거는 지금 전체를 잘라버린거야!
이제부터는 좀 더 반복되는 느낌들거야 직접해봐!
App.vue 를 보면 어때? 너무크지? 잘라서 만들어보자! 자른녀석 간에 서로 영향을 주면안돼! (고립화)
<Header.vue>
<template>
<div th:insert="~{inc/footer}"></div>
<header class="header fixed-header" th:fragment="header">
<div>
<h1 class="header-title"><a href="/index.html"><img class="logo" src="/image/logo-w.png" alt="알랜드"></a></h1>
<ul class="main-menu d-none d-inline-flex-sm">
<li><a class="" href="/menu/list.html">카페메뉴 </a></li>
<li><a class="" href="/notice/list.html">공지사항</a></li>
<li><a class="" href="/user/login.html">로그인</a></li>
</ul>
<div class="d-none-sm"><a class="icon icon-menu icon-white" href="?m=on">메뉴버튼</a></div>
</div>
</header>
</template>header 자르기
<App.vue>
<script>
import Header from './components/Header.vue';
export default{
components :{
Header
},
data(){
return{
x:1,
y:2,
test : "hello"
};
}
}
</script>
<template>
<Header/>
<!-- ---------------------------------------------------------------------- -->
<nav class="cafe">header 를 넣어주고 별칭을 설정해서 가능해!
3) footer 의 경우
<template>
<footer class="footer">
<h2>알랜드(Rland)</h2>
<div>
copyright @ rland.co.kr 2022-2022 All Right Reservved. Contact admin@rland.co.kr for more information
</div>
</footer>
</template><script>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
export default{
components :{
Header,
Footer
},
data(){
return{
x:1,
y:2,
test : "hello"
};
}
}
</script>
1. 보충
(1) 싱글파일컴포넌트
싱글파일 컴포넌트란 .vue 확장자를 가진 다양한 것들을 하나의 파일로 묶어낸 특수한 파일형식이다.
사용하는 이유는 모듈화된 컴포넌트를 이용하기 위해서이다.
2. 회고
1) 프론트엔드 개발을 위한 다양한 개발툴을 알게되고, 복잡한 것들이 손쉽게 합쳐지고 간소화 되는것이 신기하다 얼마전 봤던 영상에서 복잡했던 것들이 자동화된다고 했는데 그것이 무슨말인지 알게되었다
2) Vue 가 생각보다 이용방식이 다양해서 신기핟.
'배움 __IL > TIL 1기' 카테고리의 다른 글
| TIL : 87번째- 230410 [4-2-월] (0) | 2023.04.10 |
|---|---|
| TIL : 86번째- 230407 [4-1-금] (0) | 2023.04.07 |
| TIL : 82번째- 230403 [4-1-월] (0) | 2023.04.03 |
| TIL : 81번째- 230331 [3-4-금] (0) | 2023.03.31 |
| TIL : 80번째- 230330 [3-4-목] (0) | 2023.03.30 |