이번 포스트에서는 Vue의 공식 라우터인 vue router에 대해서 살펴보자. SPA는 서버에 요청 시마다 웹 페이지를 새로 받아오지 않고 최초의 요청에서 전체를 받아온 후 보이는 컴포넌트만 교체하는 형식이다. 따라서 기본적으로 한 페이지이기 때문에 페이지 이동이라는 개념이 없다. 단지 컴포넌트의 교체만 존재할 뿐이다. router란 컴포넌트를 교체하면서 마치 페이지가 이동하는 것처럼 만들어주는 역할을 수행하는 라이브러리다.  vue router 기본 vue router 특징vue router는 Vue에서 라우팅 기능을 지원하는 공식 라이브러리이다.https://v3.router.vuejs.org/kr/ Vue Router v3.router.vuejs.org다음은 vue router의 주요 기능이다.중..

이번 포스트에서는 Spring Legacy Project를 SpringBoot로 변경하는 과정을 살펴보자. 기본 설정 빈 스켄과 자동 설정 SpringBoot를 하면서 처음 살펴볼 녀석은 당연히 main 메서드가 작성된 @SpringBootApplication이다. @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Inherited @SpringBootConfiguration @EnableAutoConfiguration @ComponentScan(excludeFilters = { @Filter(type = FilterType.CUSTOM, classes = TypeExcludeFilter.class), @Filter(ty..

이번 포스트에서는 axios 관련 객체에 대해서 좀 더 살펴보자.  axios 관련 객체 axios instance제공된 axios 객체를 이용하면 zero base에서 모든 설정을 해줘야 한다. 만약 우리 프로젝트에서는 "요청하는 서버(url)가 한정되고 최대한 응답을 기다리는 시간을 1초만 준다"라고 가정해보자. 요청마다 이런 설정을 반복해야 한다면 매우 귀찮은 일이 될 것이다.axios는 create 라는 함수를 이용하면 공통설정이 완료된 새로운 Axios 인스턴스를 만들 수 있다.이를 위해 src/plugins/axios.js 파일을 만들고 아래와 같이 작성해보자.import axios from "axios"const aiPlaceHolder = axios.create({ baseURL:"h..

이번 포스트에서는 ajax 처리를 위한 axios라는 것에 대해 살펴보자.  axios axios란?axios는 내부적으로 XMLHttpRequest객체를 이용한 비동기 처리 라이브러리이다. axios를 fetch api와 마찬가지로 Promise 기반이라 fetch api를 써본 경험이 있다면 전혀 어렵지 않게 사용 가능하다.https://goodteacher.tistory.com/540 [javascript]fetch api이번 포스트에서는 fetch api에 대해서 살펴보자. fetch는 '가져오다'라는 뜻으로 Request나 Response와 같은 객체를 이용해서 HTTP 파이프라인을 구성하는 요소를 조작하고 원격지에서 정보를 가져오기goodteacher.tistory.com 설치npm 기반으로 ..

이번 포스트에서는 vite의 환경 변수에 대해 살펴보자 환경 변수 import.meta.env Vite의 환경변수는 import.meta.env 객체로 관리된다. (import.meta는 import된 모듈의 context 정보를 가져오기 위한 객체이다. ) import.meta.env.MODE: 현재 앱이 동작하는 모드(run build는 development 모드, build는 production 모드) import.meta.env.BASE_URL: 앱이 실행되는 기본 URL로 기본 값은 / import.meta.env.PROD: 앱이 현재 production 모드인지 boolean으로 반환 import.meta.env.DEV: 앱이 현재 development 모드인지 boolean으로 반환 impo..

이번 포스트에서는 @Transactional의 다른 속성들에 대해 살펴보자.@Target({ElementType.TYPE, ElementType.METHOD})@Retention(RetentionPolicy.RUNTIME)@Inherited@Documentedpublic @interface Transactional { Propagation propagation() default Propagation.REQUIRED; Isolation isolation() default Isolation.DEFAULT; int timeout() default TransactionDefinition.TIMEOUT_DEFAULT; boolean readOnly() default false; Class[] rollbackFor..

이번 포스트에서는 Spring Boot에서 단위테스트를 위한 H2 설정법에 대해 살펴보자. H2 Database 설정 h2의 모드 h2는 크게 3가지 모드로 사용할 수 있다. https://www.h2database.com/html/cheatSheet.html H2 Database Engine Using H2 Documentation Reference: SQL grammar, functions, data types, tools, API Features: fulltext search, encryption, read-only (zip/jar), CSV, auto-reconnect, triggers, user functions Embedded jdbc:h2:~/test 'test' in the user hom..

이번 포스트에서는 @Transactional의 속성들에 대해서 좀 깊게 살펴보자.@Target({ElementType.TYPE, ElementType.METHOD})@Retention(RetentionPolicy.RUNTIME)@Inherited@Documentedpublic @interface Transactional { Propagation propagation() default Propagation.REQUIRED; Isolation isolation() default Isolation.DEFAULT; int timeout() default TransactionDefinition.TIMEOUT_DEFAULT; boolean readOnly() default false; Class[] rollback..