spring 프로젝트를 만든 후 build.gradle에 추가해준다. plugins { id 'java' id 'org.springframework.boot' version '3.2.5' id 'io.spring.dependency-management' version '1.1.4' id "com.ewerk.gradle.plugins.querydsl" version "1.0.10"} //Querydsl 추가 implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt:${dependencyManagement.importedProperties['querydsl.version']}:ja..
작업하던 App.vue 파일 그대로 올리는게 아니라build용 파일을 생성하신 후 올려야 한다.왜냐고요? 웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있습니다. 브라우저는 .vue파일그런거 읽을 줄 모름 npm run buildVue 프로젝트 폴더 내에 dist 라는 폴더가 하나 생성된다. 깃 허브에 내아이디.github.io 라는 레퍼지토리를 만든다. vue build를 해서 만들어진 작고 소중한 dist폴더 내부의 모든 파일을 넣어준다. 이제 10분 뒤 정도면 https://내아이디.github.io 로 들어가면 사이트가 보인다.
const routes = [ { path: "/", component: Home, }, { path: "/list", component: List, }, { path: "/detail/:id*", component: Detail, children: [ { path: "author", component: Author.vue }, { path: "comment", component: Conmment.vue } ] }]; /detail/0/author 형식으로 사용이 가능하며, 컴포넌트는 임폴트해서 자리에 넣어주면 된다. 페이지 안에서 컴포넌트를 불러올 때에 사용한다. ..
vue3 기준 router 설치npm install vue-router@4 설정을 위해 router.js 를 만든다. (vue-router 만든 사람이 이렇게 쓰라고 했음)import { createWebHistory, createRouter } from "vue-router";const routes = [ { path: "/경로", component: import해온 컴포넌트, }];const router = createRouter({ history: createWebHistory(), routes,});export default router; 예를 든다면const routes = [ { path: "/list", component: List, }]; 후에 main.js..
일단 설치 명령어는 언제든 바뀔 수 있다. 홈페이지를 확인하자 https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com 2024/05/06 일자 명령어npm i bootstrap@5.3.3 main.js 위에 해당 importimport 'bootstrap'import 'bootstrap/dist/css/bootstrap.mi..
create 단계 : 데이터만 존재하는 단계mount 단계 : 컴포넌트 사이에 있던걸 실제 html 바꿔줌컴포넌트 생성 : index.html에 장착update 단계 : data가 변하면 html이 실시간 재렌더링 됩니다.unmount단계 : 컴포넌트 삭제되면 실시간 재렌더링 이 단계들의 중간마다LifeCycle hook을 걸어서 사용 될 코드를 작성할 수 있다. mounted(){ //mount되고 나서 //setTimeout(function(){ // 바깥의 this를 잘 못가져옴 setTimeout(()=>{ this.showDiscount = false; },2000); }, mounted(){ setInterval(()=>{ //1초마..
priceSort(){ this.원룸들.sort(function(a,b){ return a.price - b.price }); //[3,5,2].sort(); //2,3,5 이건 문자순 정렬임 /*[3,5,2].sort(function(a,b){ return a-b })*/ //숫자 순 정렬 }다음 과 같이 원룸들.sort(function(a,b) 를 입력했는데 a는 이전 원룸, b는 다음 원룸으로 된다. 이 점을 이요해서a.price처럼 값을 꺼내 쓸 수 있다.. 되돌리기를 사용하고 싶다면 원래의 데이터를 하나더 만들어 state에 두는 방식으로 사용한다. sortBack(){ //this.원룸들 = this.원룸..
.start{ opacity : 0; transition: all 1s;}.end{ opacity : 1;}위의 코드를 보면 :class 라는 속성이 있다 :를 이용해 v-bind 상태로 사용할 수 있는데 end 라는 클래스가 true면 동작하게 끔사용할 수 있는 것이다. vue 에서는 transition을 쉽게 사용할 수 있는 태그를 제공한다. 태그의 name 속성은 편한데로 작명하면 된다.여기에서는 fade로 작명했다..fade-enter-from{/*시작*/ opacity:0;}.fade-enter-active{ /*transition*/ transition : all 1s;}.fade-enter-to{/*끝*/ opacity:1;}3개의 정해진 클래스를 css해야한다. 이건 룰이기에..
- Total
- Today
- Yesterday
- thymleaf
- React
- HTTP
- hypertexttransferprotocol
- 스프링부트
- 스프링공부
- 리터럴
- JPA
- BindingResult
- 항해플러스
- 컨트
- 예외처리
- ArgumentResolver
- jpa api
- rejectValue
- exception
- 백엔드 개발자 공부
- SpringBoot
- 로그인
- filter
- react실행
- Java
- 향해플러스백엔드
- 백엔드 개발자 역량
- 향해99
- 인터셉터
- reject
- 향해플러스
- Intercepter
- 항해99
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |