일단 설치 명령어는 언제든 바뀔 수 있다. 홈페이지를 확인하자 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해야한다. 이건 룰이기에..
vue.js에서 $event는 javascript의 eventListener같은 존재이다. 클릭,체인지 등의 이벤트를 만들때에 이벤트요소 이다. function안의 e와 같은 일을 한다고 보면 된다. $event.target.value 라고 입력하면, input에 입력한 값이 된다. 이렇게하면 month에 값을 넣을 수 있다. v-model은 input에 입력한 값을 month에 넣어주세요.라는 명령어 이다.(축약버전) 123 1124 11 다양한 방식으로 가능하다. 참고로 v-model로 들어가는 값은 모두 문자로 들어가게 된다. {{ month }} 개월 선택함 {{ 원룸들[누른거].pri..
자식에서는 부모의 state를 변경할 수 없다 (read-only)그래서 custom event를 통해 수정해달라는 메세지를 보내야 한다. vue에서 지원하는 변수가 있는데 $가 붙은 변수이다. $emit('작명',데이터) 형식으로 보내는데 데이터를 보내지 않으려면 $emit('작명')으로도 충분하다. 하위컴포넌트(자식) {{ 원룸.title }}이렇게 작명해서 메세지를 보내면 이렇게 작명한 메세지를 이벤트로 발생시킬 수 있다. 이게 자식이 부모의 state를 변경하는 방식이며,이것은 Custom Event 작성 방식으로 볼 수 있다. 만약$emit('작명',데이터)로 데이터도 보내서 사용해야 한다면 $event 해당 값을 사용할 수 있다. ..
{{ 원룸.title }} {{ 원룸.price }}원 for문으로 이렇게 데이터를 뿌려줬다. 클릭할 때마다 상세내용이 나오면 좋겠는데 클릭한 컨텐츠가 보이면 좋겠다. export default { name: 'App', data(){ return { 누른거 : 0,'누른거'라는 state를 만들고 클릭하면 '누른거'에 id 값을 넣을 것이다. 그럼 모달창에서는 이렇게 보이면 된다. {{ 원룸들[누른거].title }} {{ 원룸들[누른거].content }} 닫기 안녕하세요1 안녕하세요2 안녕하세요3 else는 바로 위가 참이 아니면 대신 작동한다.
- Total
- Today
- Yesterday
- thymleaf
- 예외처리
- 항해플러스
- jpa api
- reject
- 향해플러스
- 항해99
- React
- rejectValue
- filter
- hypertexttransferprotocol
- exception
- 스프링부트
- 로그인
- 백엔드 개발자 공부
- 컨트
- ArgumentResolver
- 백엔드 개발자 역량
- Java
- JPA
- 인터셉터
- 스프링공부
- HTTP
- react실행
- BindingResult
- Intercepter
- 리터럴
- 향해99
- SpringBoot
- 향해플러스백엔드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |