주간 랩업/[SSG] JAVA 기반 백엔드 개발 과정
[20주차] View 1 ~ 5 일차
hooooolly
2024. 10. 21. 09:26
지난 주로 Node.js 수업을 마치고 이번 주는 View 강의에 들어갔다.
2024/10/14
SSR (Server Side Rendering)
화면의 렌더링이 서버에서 이루어지는 아키텍처
SPA(Single Page Application)
하나의 페이지를 사용하는 애플리케이션
Ajax( 페이지 새로고침 없이 데이터가 교환되고 업데이트)
사용자와의 상호작용을 위해
사용자 중심 경험(User-centric Experience)을 제공하기 위해
프레임워크를 사용하면 일반 작업이나 공통 패턴을 추상화해서 제공하기 때문에 빠르고 정확하게 원하는 앱을 구현하고 운영 및 유지 보수가 가능하다.
Vue.js 란?
- 데이터를 보여주는 뷰(view)
- 데이터를 중개하는 뷰모델 (view-model)
- UI와 데이터 처리 로직의 상호 의존성을 줄이는 패턴인 MVVM 적용하여 뷰, 뷰모델, 모델을 독립적으로 모듈화 하여 재사용성을 높일 수 있는 애플리케이션을 설계할 수 있다.
- 뷰 어플리케이션을 만드는 방법 2가지
- CDN(Content Delivery Network)
HTML 기반에서 뷰 애플리케이션을 생성할 때 유용함
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- NPM(Node Package Manger)
npm create vue@latest
Vue의 최신 버전으로 뷰 프젝젝트를 설정하여 생성하겠다.
초기 프로젝트를 구성하는 것을 스캐폴딩 (뷰의 뼈대를 세운다.)
1. 뷰 어플리케이션의 기본 구조
- package.json
가장 중심이 되는 파일
뷰 app에서 사용되는 기본정보, 의존성 모듈정보, 스크립트 명령어 정보 저장되어 있다.
{
"name": "vue-project", //뷰 app 이름
"version": "0.0.0", //[major.minor.patch]
//major:하위 호환성이 없는 변경사항이 있을때 증가
//minor: 하위 호환성이 있는 기능이 추가되거나 변경될때 증가
//patch : 버그 나 작은 수정 사항이 있을때 증가
"private": true, //뷰 app의 공개 여부를 의미하는 논리형 값
"type": "module",
"scripts": { // 뷰 app에서 빌드하거나 실행할 수 있는 명령어를 등록 부분: npm run dev
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": { //뷰 app 을 실행할때 필요한 의존성 모듈을 정의하는 부분
"vue": "^3.5.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.4", //뷰 app 개발할때 필요한 의존성 모듈을 정의한 부분 npm install 패키지명 [--save, --save-dev]
"vite": "^5.4.8"
}
}
====================================
- index.HTML
npm run dev 명령어를 입력하면 개발 서버가 구동이 된다.
개발 서버가 구동이 되면서 가장 먼저 index.html 을 서버에 load 한다.
- main.js
=====================================
- App.vue
확장자가 vue인 파일을 뷰에서는 SFC(Single File Component), 컴포넌트(Component)
뷰 app은 컴포넌트들을 여러개 생성하면서 어플리케이션을 만든다.
App.vue 는 이들의 루트(root) 컴포넌트이다. (최초로 진입하는 가장 상위에 있는 컴포넌트)
<script></script>
<template></template>
<style></style>
태그로 영역을 구분한다.
2. 뷰 어플리케이션 인스턴스
- 뷰 패키지의 구조와 기능을 뷰 애플리케이션에서 사용할 수 있게 하는 진입점 역할을 한다.
- 뷰의 근간은 자바스크립트이다. (객체지향언어)
- 뷰는 SFC 기본구조 : App.vue 가 SFC이다. (인스턴스의 구성요소의 설정 정보)
- 인스턴스를 생성할 때 SFC 파일을 createApp()함수의 매개변수로 전달하면 SFC 파일의 설정 정보를 가져와서 인스턴스를 생성한다.
<script></script> 선택가능
: SFC 파일에서 사용할 로직을 자바스크립트로 작성한다.
문법 규칙을 지켜서 코드 구성해야한다.
옵션스 API를 지켜서 작성해야 한다.
<template> 1개 이상 반드시 필요
HTML 코드 작성 영역.
<style></style> 선택
<template></template>영역에서 작성한 구성 요소에 대해 CSS 스타일을 적용하기 위한 영역
3. 디렉티브 사용하기
<script></script> 태그 영역에서 정의한 data 옵션 속성을 <template></template>태그 영역에서
사용할 수 있게 디렉티브 를 사용한다.
v- 접두사 로 시작하고 뷰에서만 사용하는 문법이다.
(1) v-html 디렉티브는 데이터에 포함된 HTML태그를 인식해서 렌더링하므로
XSS(Cross-Site Scripting) 공격에 취약하여, 사용자가 입력한 데이터를 출력할때는 사용하지 말것
(2) v-text
(3) v-pre
컴파일할때 <template></template>영역을 건너뛰게 하는 디렉디브이다.
뷰는 SFC파일의 template 태그를 런타임 이나 빌드 과정에서 컴파일한다.
초기 랜더링 성능 향상을 위해 SFC 파일의 template태그 영역에 뷰 문법이
사용되지 않으면 컴파일 할 필요가 없으므로 v-pre 디렉티브를 추가해 컴파일을 스킵한다.
(4) v-bind
HTML 태그의 콘텐츠가 아니라 속성에 데이터를 연결하고 싶을때 v-bind를 사용해야 한다.
v-bind 디렉티브는 항상 HTML 속성앞에 : 을 붙여서 표시한다.
HTML 속성과 데이터를 연결할 수 있다.
(5) v-if/v-else-if/v-else
template 태그 영역안에서 조건부 렌더링 기능을 구현할때 사용하는 디렉티브이다.
조건에 맞지 않는 요소는 아예 렌더링하지 않는다. 조건이 자주 변경되지 않을때, v-if 유리한다.
(6) v-show
조건과 상관없이 무조건 랜더링하고 CSS display속성을 none으로 셋팅하여 화면에서만 감춘다.
요소를 다시 그려야 하는 부담이 없으므로 조건이 자주 변경되는 경우에 사용하면 유리하다.
(7) v-cloak : CDN 방식으로 렌더링할 경우 뷰 적용을 인위적으로 늦추기 위해 setTimeout() 메서드를 이용해서 delay를 지정한다.
(8) v-for :뷰에서 반복적으로 렌더링하는 HTML 요소를 생성하는 사용한다.
v-for="값 in 배열" key="고유값"
v-for="(값 ,인덱스) in 배열" key="고유값"
2024/10/15
자바스크립트에서 이벤트를 다룰때
documnet객체의 여러 속성과 메서드를 조합해서 사용한다.
이벤트는 사용자와 상호작용해서 발생하는 사건
(마우스를 클릭,더블클릭,드래그앱드롭,키보드 )
1. v-on 디렉티브 : methods 옵션 속성으로 이벤트 연결
이벤트타입(click,keyup,keydown,doubleclick)
1-1 이벤트 핸들러에 이벤트 객체를 전달하지 않으면 이벤트 객체를 이벤트 핸들러가 처리하지 못한다.
이벤트 객체와 값을 함께 사용하려면 $event 와 값을 함께 넘겨주어야 한다.
1-2. modifier 는 이벤트 처리 방식을 제어하는데 사용하는 기능
modifier 를 사용하면 DOM이벤트 동작을 변경하거나 기능을 추가할 수 있다.
(예제) keyup 이벤트로 enter 키(숫자 13) 입력을 확인하면 별도의 동작을 취하도록 코드 작성
1-3. 뷰에서 이벤트와 함께 이해해야 하는 개념 : 반응성(reactivity)
반응성(reactivity) : 데이터의 변화 감지하고 자동으로 화면UI를 업데이트 하는 기능
뷰에서는 자체적으로 반응성 시스템을 사용해서 변화를 감지하도록 구성되어 있어,
우리가 반응성 시스템을 이용하여 구현해야 한다.
뷰의 반응성시스템
뷰 어플리케이션은 값이 바뀌면 이를 감지하고 화면을 렌더링한다.
이 과정에서 웹 브라우저는 새로고침이 발생하지 않는다.
이는 뷰의 반응성 때문에 변화된 값을 감지하고 해당값으로 인해 변경되 부분만 업데이트한다.
2. v-once 디렉티브 : 경우에 따라 값이 변경되어도 화면을 업데이트 하지 않을때 사용 (정적디렉티브)
3. v-memo : 렌더링 결과 저장 Vue3.2 이상에서만 지원
메모이제이션(memoization)
이전에 계산된 결과를 저장해 중복 계산을 피하고 실행속도를 향상시킬때 사용하는 프로그래밍 기술
<template></template> 태그에서 반복적으로 렌더링되는 요소에 v-memo
4. 폼(form) : 사용자로부터 데이터를 입력받는 요소들의 그룹이며 서버로 전송하기 위해 사용한다.
프론트엔드에서 서버로 데이터를 전송하는 방법 2가지
1. form 태그의 action 속성에 지정된 경로롤 전송하여 처리하는 방법
- <form action="/login_process"></form>
2. 입력값을 자바스크립트로 가져와서 AJAX(Asynchronous JavaScript And XML) 사용하여 전송하는 방법
<form id="loginForm">
<input type="text" id="id"/>
<input type="password" id="pwd"/>
<button type="submit"></button>
</form>
<script>
document.getElementById("loginForm").addEventListener('submit',function(event) {
event.preventDefault(); //폼 전송 이벤트 취소
//자바스크립트로 사용자로부터 입력받은 값을 받아온다.
const id = document.getElementById("id").value;
const password = document.getElementById("pwd").value;
// 사용자 입력 데이터를 서버에 전송 하기 위한 AJAX 요청 만들기
const xhr = new XMLHttpRequest();
xhr.open('POST','/login_process',true);
//AJAX 응답 설정하기
xhr.onreadystatechange = function () {
if(xhr.readState === XMLHttpRequest.DONE){
if(xhr.status === 200){
const respone = xhr.responeText;
console.log(respone);
}
else {
console.error('Request failed' + xhr.status);
}
}
};
//데이터 전송 준비하기
const formData = new formData();
formData.append('id',id);
formData.append('password',pwd);
xhr.send(formData);
} );
</script>
form1.html 과 form2.html 의 차이
form2.html(AJAX 기술 적용 )
==> 사용자 입력 데이터를 전송하면서 페이지를 이동하지 않아도 되어서 데이터를 전송한 후,
처리 방법의 자유도가 높다.
5. v-model 디렉티브로 폼 요소를 다룬다.
사용자가 입력한 요소의 값을 가져오는 것은 폼의 가장 기본적인 방법이다.
뷰에서는 입력한 요소의 값을 가져올때 v-model을 디렉티브를 이용한다.
<script></script> 태그 영역에 정의한 데이터 속성과 <template></template> 태그 영역에서
HTML 요소가 양방향으로 서로 연결되어 데이터 속성의 값을 자동으로 업데이트 한다.
이를 양방향 데이터 바인딩이라고 한다.
6. v-model 사용시 주의사항
한 줄 입력 요소에 텍스트를 입력하면 v-model 디렉티브에 바인딩한 message 데이터 속성의
값이 실시간 변경
한글이나 한자처럼 글자를 조합해서 단어를 만드는 문자는 IME(input Method Editor)를
사용하는데 딜레이가 되는 문제가 발생한다.
이 문제를 해결하기 위해 이벤트 수동으로 처리(데이터를 업데이트)해 줘야 한다.
실시간으로 글자 수를 확인해야 하는 기능 구현 시에는 v-model 을 사용할 수 없다.
7. v-on 디렉티브와 이벤트 타입, 폼 요소와 연합하여 수동으로 처리해 보겠습니다.
- input 이벤트 처리
- submit 이벤트 처리
<form></form> 태그에 사용한 폼 요소의 데이터를 서버로 전송하는 시점에서 발생하는 이벤트
8. computed 속성
옵션스 API 에서 제공하는 속성중 하나
컴포넌트에서 자주 사용하는 데이터를 캐시(cache, 데이터를 메모리에 임시로 저장하는 것)
애플리케이션 성능을 향상시킬때 사용
9. watch(감시자) 속성
옵션스 API 에서 제공하는 속성중 하나 : 데이터의 변경을 감시하고, 변경이 감시될 때마다 특정 동작을 수행할 수 있다.
2024/10/16
뷰에서는 복잡한 구조를 보다 심플하고 유연하게 제공하기 위해
컴포넌트, 슬롯, 데이터 공유 기술을 제공하고 있다.
유연하고, 모듈화된 구조로 개발하고 관리하기 좋다. 코드의 재사용성과 유지보수성 향상
1. 컴포넌트
자바스크립트 기반 프레임워크에서의 컴포넌트는
어플리케이션을 구성하고 관리하는 방식
Vuejs 프레임워크는 컴포넌트 기반 아키텍처 이다.
특정 기능이나 작업을 독립적으로 수행하기 위한, 논리적으로 구분된 코드 단위
페이지 단위가 아니라 컴포넌트 단위로 설계하는 방식
- 장점
재사용성: 컴포넌트는 특정 기능이나 작업을 독립적으로 수행하는 단위이므로
같은 기능이나, 작업이 필요한 곳에 재사용할 수 있다.
독립성 : 컴포넌트는 독립적으로 작동할 수 있어야 한다. 다른 컴포넌트에 영향을 주지 않고
수정이나 교체를 할 수 있어야 한다.
모듈성 : 웹 애플리케이션을 개별 단위로 구분하기 때문에 복잡성을 줄일 수 있다.
확장성 : 컴포넌트에서 구성 요소를 추가하거나 수정하여 새로운 동작이나 기능을 제공할 수 있다.
캡슐화 : 컴포넌트는 내부의 복잡성을 숨기고, 단순하게 기능만 사용할 수 있는 인터페이스를 제공한다.
컴포넌트의 내부 로직이나 상태 처리 로직을 알지 못해도 컴포넌트를 이용하여
화면을 구성할 수 있다.
컴포넌트 네이밍 컨벤션 - (두 단어 이상으로 조합하는 파스칼 케이스를 권장)
지불기능 - PaymentList, UserInfo
2. component 1개를 생성했다. : FirstChild.vue
만든 컴포넌트를 뷰에서 사용하려면 컴포넌트 등록이 필요하다.
컴포넌트 등록방법 2가지
- 전역(global) 등록
컴포넌트를 뷰 app의 모든 곳에서 사용 할 수 있다.
src/main.js 에 등록한다.
- 지역(local) 등록
src/App.vue
3. 라이플 사이클 훅 (hook)
Vuejs 프레임워크에서
컴포넌트는 생성되고 파괴될때까지 여러 단계를 거치면서 특정 기능과 역할을 하는 함수를
호출할 수 있도록 설계되어 있다.
특정 기능과 역할을 하는 함수를 뷰에서는 훅(hook) 이라고 한다.
컴포넌트에서 호출되는 훅을 lifecycle hook 이라고 한다.
(실습) 라이플사이클 훅 호출
App 컴포넌트의 beforeUpdate() 호출된 후 , 리렌더링과 패치과정이 거치면서
FirstChild 컴포넌트가 DOM에서 제거되는 과정을 확인하였다.
FirstChild 의 beforeMount(), unmounted() 훅이 호출되고, 이후 App 컴포넌트의 updated()
훅이 호출되면 컴포넌트는 다시 마운트 상태에 진입한다.
4. 템플릿 ref 속성
뷰에서도 문서객체(DOM)를 참조할때나, 컴포넌트를 참조할 때 사용하는 속성
뷰는 자바스크립트 기반 프레임워크
<script></script> 태그에서 <template></template> 태그에 사용된 HTML 태그의
문서 객체에 접근할때 document객체를 사용한다.
h1 태그의 innerText (h1 태그이다)
h1의 참조값을 얻으려면
컴포넌트가 마운트 될때, 어플리케이션 인스턴스의 $refs 객체 속성으로 DOM 참조가 저장됨
저장된 참조는 $refs 객체에 접근해서 사용할 수 있다.
주의 할점 : $refs로 DOM 에 대한 참조를 할때는 컴포넌트가 마운트 후에 접근해야 한다.
$refs의 참조 횟수 제한은 없다. 이름만 중복되지 않으면 됨
5. 컴포넌트에 속성과 이벤트 정의
컴포넌트에 속성과 이벤트를 뷰에 정의할 수 있는데
사용자 정의 속성, 사용자 정의 이벤트를 만들어서 적용할 수 있다.
6. 이벤트
<template></template>태그 영역세서 사용하는 HTML 태그에 v-on 디렉티브(@축약형)
사용하면 특정 이벤트를 연결할 수 있었다.
컴포넌트에게도 v-on 디렉티브로 이벤트를 사용할 수 있다.
컴포넌트에서 사용하는 이벤트 타입은 하위 컴포넌트에서 부모컨포넌트로 발신하는
이벤트를 수신하는 용도이기 때문에 사용자 정의 이벤트로 구현할 수 있다.
컴포넌트에서 이벤트 핸들러
부모 컴포넌트에서 사용자 정의 이벤트의 사용여부와 관계없이
모든 컴포넌트는 $emit() 내장 메서드를 사용하여 부모 컴포넌트로 이벤트를 발신할 수 있다.
무분별한 이벤트 발신을 막기 위해서
옵션스API emits속성을 사용해서 관리하도록 권장하고 있다.
emits: ['print-hello','login_process',.....],
부모 컴포넌트로 발신할 수 있는 이벤트 타입을 명시하여
뷰 app에서 자체적으로 검사할 수 있도록
7. 이벤트 발신 argument , paramater
$emit() 내장 메서드는 부모 컴포넌트로 이벤트를 발신,
첫번째 인자로 부모컴포넌트 이벤트 명시(필수)
두번째 인자로 값을 지정하면 부모컴포넌트 이벤트 매개변수로 값을 전달할 수 있다.
8. 컴포넌트 구분 없이 모든 컴포넌트에 데이터를 공유하고 싶으면
App-Level provide 기능을 사용해야 한다.
main.js 파일에서 provide 기능을 사용하라는 의미임
2024/10/17
2. 컴포넌트의 데이터 참조방법 (ref)
부모컴포넌트와 자식컴포넌트는 서로의 컴포넌트에서 정의된
data,computed,methods 옵션 속성에 접근할 수 있다.
ref 속성으로 컴포넌트의 참조를 생성하여 접근한다.
3. 컴포넌트 슬롯(slot)
컴포넌트(vue)를 재사용할 수 있는 구성 요소로 생성해 주는 도구
슬롯은 템플릿 조각을 자식 컴포넌트에 전달하고
자식 컴포넌트가 자체 템플릿 내에서
전달받은 템플릿 조각을 렌더링 할 수 있게 해준다.
2024/10/18
지금까지 우리가 기본 문법의 대부분 Vue2에서 사용하는 옵션스API 방법이었다.
요구하는 기능이 복잡해지고 다양한 로직을 유연하고 조직적으로 구성하고 관리하기 위한 방법
으로 Vue3에서는 컴포지션 API를 제공한다.
함수 기반 접근 방식 제공하여 개발자가 기능별로 코드를 구성할 수 있게 지원한다.
옵션스 API : data, computed, methods,lifecycle hook 포함한 객체 기반 옵션 속성으로 구성된 API
레거시(legacy) 시스템 : 현재 유지되고 있는 시스템
컴포지션 API는 옵션스 API의 대체가 아닌 확장의 목적으로 도입됨
- setup() 훅(hook)
내에서 Vue3에서 추가된 컴포지션API 문법 사용이 가능하다.
설탕문법(sugur syntax) 형태의 <script setup></script>
1. 뷰에서는 컴포넌트 전반에서 사용하는 데이터(값) 정의 방법을 알아야한다.
옵션스API 에서는 반응형 데이터를 data옵션 객체를 이용하여 데이터 속성을 정의하였다.
컴포지션API에서는 ref(), reactive() 함수를 사용한다.
- ref()
어떤 값을 사용해 반응형 데이터를 정의할 것인지
이때 사용하는 값의 자료형은 숫자, 기본자료형, 참조 자료형 구분없이 사용가능 (내부 데이터까지 반응성을 제공하지 않는다.)
- 참조자료형에 대한 반응성을 제공하기 위해서는 reactive()
값 자체를 반응형으로 만들어 리턴한다.
2. 옵션스 API에서는 template 태그의 DOM 요소에 접근하려면 $refs 전역 속성을 사용해야 한다.
컴포지션 API에서는 ref() 함수로 생성한 반응형 데이터를
HTML 태그의 ref 속성의 값으로 지정해서 DOM 요소를 참조할 수 있다.
8 .뷰 라우터를 이용한 라우팅 기능
웹브라우저에서 사용자가 요청한 URL(도메인)에 따라 서버로부터
해당 서비스를 처리한 페이지를 화면에 렌더링한다. (SSR방식)
현재 대부분의 웹서비스는 SPA: 싱글페이지 어플리케이션 방식을 채택하고 있다.
첫 페이지 로딩 시 서버로부터 필요한 모든 자원을
한번에 불러온 뒤, 사용자와 상호작용에 따라 동적으로 화면을 갱신하는 방식임
사용자의 URL 요청에 따라 다른 페이지를 보여주는 기능이 필요하다.
뷰라우터을 제공하여 브라우저의 URL 과 어플리케이션의 뷰를 연결해 준다.
SPA 에서 URL의 변화에 따라 적절한 컴포넌트를 화면에 렌더링하도록 도와주는 기능
1. 기본 원리
2. 다양한 라우팅 기법
3. 동적 라우트 매칭 방법
4. 중첩 라우트
5. 내비게이션
vue 동작순서
1. 뷰라우터 라이브러리 설치 : npm install vue-router@4
2. 라우팅 컴포넌트 생성 src/views/view 컴포넌트
3. 라우터 인스턴스 생성 src/router/index.js
4. 라우터 인스턴스 등록 src/main.js 파일에 등록합니다.
9. 동적 경로 매칭
URL이 ./views/UserView/ => /user/jane id세그먼트값이 jane 사용자 정보를 UserView 컴포넌트에 보여주려한다.