[SpringBoot+Nginx+vite]유틸 사이트를 만들어봤습니다.feat.핫딜 모음

유틸 사이트로 이동 웹사이트 개설 나의 블로그의 접속자 수는 처참하지만 내가 블로그를 시작하면서생각했던 계획은 내 스스로 간단하게 웹페이지를 개발하고그 개발 과정에서 알게된 것들 혹은 사람들이 찾을만한 내용들을 글을 포스팅 하는거였다. 그렇게해서 시작하게 된게 유틸 사이트이다.유틸 사이트는 먼저 나도 쓰기 유용한 기능들을 모은 사이트이다.그래서 먼저 무얼 만들어볼까 고민하다가 핫딜 정보를 모으는 기능부터 만들었다.특별한거 없이 4곳의 사이트에서 … Read more

[Vue] Vite Router(페이지이동) 적용

Router 추가 및 설정 Vue에서 페이지를 이동할때 Router 를 사용한다.Router 를 사용하기 위해서는 당연히 Router 의존성이 필요하므로 추가해주자. 템플릿들을 적용하려다 보면 import 경로에 @가 들어가있는걸 볼 수 있는데이는 src 경로를 뜻한다. 설정에서 src 경로를 설정해주어야 한다.vite.config.js 파일에 alias 를 추가해주자. 페이지 생성 이제 가장 먼저 보일 Home.vue 를 생성하자.src 밑에 views 디렉토리를 생성해서 Home.vue 를 … Read more

[Vue] Vite로 프로젝트 시작하기

vite

프로젝트 생성하기 시작하기에 앞서 Vite 는 Node 18 이상 설치 되어있어야 한다.터미널(cmd) 에서 프로젝트가 생성되길 원하는 경로에서 명령어를 실행한다.[my-app] 이란 이름으로 Vite 프로젝트를 생성하였다. 명령어 실행 후 프로젝트를 생성에 관련된 몇가지 질문이 나온다. Framework 는 Vue로 선택한다. Typescript를 주로 하기도 하지만 Typescript로 하면 귀찮은 면도 있어서…Javascript 로 선택하였다. 터미널 명령어를 쳤던 경로에 프로젝트가 생성되어있는 것을 … Read more

[Vue] Vue는 뭐고 Vite는 뭐야

vite

Vite 란? Vite(바이트)는 Vue의 빌드 도구이다.Vite 는 프랑스어로 빠르다 라는 뜻인 vitesse 에서 영감을 받아 명명했다고 한다.Vite는 프론트엔드 개발에 사용되는 모듈번들러 이다. Module Bundler(모듈번들러) 란? 모듈 번들러는 프론트엔드 개발에 사용되는 도구로 여러 개의 모듈화된 자바스크립트 파일 및다른 종류의 파일들을 하나로 묶어주는 역할을 한다. 모듈 번들러 없이 import, export 같은 모듈화 문법을 사용하면 에러가 발생한다.이러한 모듈화 … Read more