https://v3-docs.vuejs-korea.org/guide/essentials/template-syntax.html#directives 템플릿 문법 | Vue.js v3-docs.vuejs-korea.org ~~ Vue 공식 홈페이지 정리 ~~ 텍스트 보간법(Interpolation) Vue 에서 Interpolation 이란 ? {{ }}을 사용하여 JavaScript 데이터를 HTML에 삽입하는 방식 사용 예시 ) {{ name }} # HTML 출력 이중 중괄호는 데이터를 HTML 이 아닌 일반 텍스트로 해석함 ! -> 실제 HTML 을 출력하려면 `v-html` 디렉티브를 사용 디렉티브 Directive : Vue에서 DOM 요소에 특수한 반응형 동작..
2025.04.02 - [Frontend] - ES 모듈이란? 기본 ES 모듈 방식과 Vite 번들링 방식 차이 js 파일을 여러개로 나누고 필요한 것만 가져다 쓸 수 있도록 도와주는 기능 ! # ES 모듈" data-og-host="megak.tistory.com" data-og-source-url="https://megak.tistory.com/321" data-og-url="https://megak.tistory.com/321" data-og-image="https://scrap.kakaocdn.net/dn/TS3I4/hyYCkjUYz2/vAyC3h9Jb8r5TyylDMKiTK/img.png?width=800&height=800&face=0_0_800_800,https://scrap.kakaoc..
Vue를 인스톨하면 vite 가 기본설정으로 vite.config.js 파일이 자동 생성된다. 아래 코드에서 port 를 임의지정해주기 위해서 server 구조만 추가로 작성하였고 나머지는 기본설정에 포함된다 vite.config.js 설정을 기반으로 Vite의 번들링 과정을 알아보자 !! import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/export default defineConfig({ plugins..
해당글은 Vue 공식문서를 기반으로 작성되었으며 출처는 하단에 존재합니다. [ 개념 ] 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 표준 HTML, CSS 및 JavaScript 를 기반으로 구축컴포넌트 기반 프로그래밍 제공 [ 예시 ] import { createApp } from 'vue'createApp({ data() { return { count: 0 } }}).mount('#app') 숫자 세기: {{ count }} 예시로 볼 수 있는 Vue 의 주요특징 선언적 렌더링(Declarative Rendering):Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTM..
ES 모듈 # 개념 ES 모듈은 ECMAScript(자바스크립트 표준)에서 공식적으로 지원하는 모듈 시스템이다-> js 파일을 여러개로 나누고 필요한 것만 가져다 쓸 수 있도록 도와주는 기능 ! # ES 모듈의 특징 import 와 export 키워드를 사용해 모듈을 가져오거나 내보낼 수 있음브라우저에서 바로 실행할 수 있음 (번들링 없이 사용 가능) 기본적으로 비동기 로드(필요할 때 가져오는 방식) 지원 # 기본 ES 모듈 방식 사용 예시 export //math.jsexport function add(a,b) { return a+b;}export const c = 3;// test.jsexport function age(birth) { return birth+1;} import // mai..
Vue 를 공부하기에 앞서 모듈 번들러에 대해 알아보자 !! 번들링(Bundling) 이란 ? : 여러개의 파일(HTML, CSS, JS 등)을 하나의 파일로 묶어서 브라우저가 더 효율적으로 로드할 수 있도록 만드는 과정여기서 모듈 번들러의 역할이 번들링을 통해 JS 파일을 하나로 묶는 것임 ! 번들링하면 코드 최적화로 중복 제거 등을 통해 성능을 향상 시킬수 있음 모듈 번들러(Module Bundler) : 여러개의 Javascript 파일을 하나의 파일로 합쳐서 웹 브라우저에서 효율적으로 실행할 수 있도록 만들어주는 도구 여기서 Javascript 파일이 모듈에 해당함 웹 애플리케이션은 많은 JS 파일을 사용하는데, 브라우저가 대량의 파일을 한 번에 로드하면 속도가 느려질 수 있기 때문에..
문제 상황 springboot 프로젝트로 생성한 war 파일을 리눅스에서 실행하던 중 500 오류가 발생했다 최초 배포가 아닌, 수정사항 반영후 재 배포한 상태에서 갑자기 뜬 오류였고 이에 대한 해결과정을 다뤄보고자 한다. 내용 : WARN 10:55:01.827 [main] org.apache.tomcat.util.scan.StandardJarScanner[log:175] - Failed to scan JAR [war:file:/home/folder/project.war*/WEB-INF/lib/spring-security-taglibs-5.2.0.RELEASE.jar] from /WEB-INF/lib java.io.IOException: Unable to open root Jar file 'war..
Quartz 란 ? -자바(Java) 기반의 오픈 소스 스케줄러 라이브러리-특정 작업(Job)을 정해진 시간(스케줄)에 맞춰 자동으로 실행해주는 도구- DB 연동 및 클러스터링 기능 제공 Quartz 에 대해서 공부하던 중, 클러스터링 기능을 제공한다는 것에 대한 이해가 되지 않았다. 애초에 클러스터링 개념에 대해 잘 알지못하는 것도 있었다. 📌 'Quartz 에서 클러스터링 기능을 제공한다'는 의미에 대해 알아보자 Clustering 의 일반적인 개념내가 기존에 클러스터링에 대해 알고 있던 개념은 다음과 같다( 정처기 공부할 때 배운내용임 ) 두 대이상의 서버를 하나의 서버처럼 운영하는 기술서비 이중화 및 공유 스토리지를 사용하여 서버의 고가용성을 제공함클러스터링 종류고가용성클러스터링하..