FrontEnd

[Vue.js] Vue Bootstrap b-table: 테이블 값에 링크 넣기, column명 변경

1. b-table 만들기 b-table이 없다면 v-for를 사용해서 배열의 객체를 하나씩 tr, td를 지정해 만들어야 했다. b-table은 배열 객체만 item으로 넣어주면 알아서 테이블을 생성한다. https://bootstrap-vue.org/docs/components/table#table [BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org](https://bootstrap-vue.org/docs/components/table#table) items에 table에 넣을 배열의 이름을 넣어주면 된다. 결과 사진 2. 테이블 특정 값에 링크 넣기 - 상세 정보로 이동 기존 테이블은 id를 누르면..

[Vue.js] Vue Template Syntax 뷰 템플릿 문법

Vue Template Syntax Template Syntax Vue.js는 렌더링된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문 사용 MVVM Model : JS Object Vew: DOM View Model: 뷰 인스턴스 → 인스턴스 생성 보간법 Interpolation 보간: 변수에 할당된 값이 문자열에 들어가 대체되어 출력 Text(문자열) 데이터 바인딩의 가장 기본 형태 “Mustache” 구문: (이중 중괄호)을 사용 -> 텍스트 보관 Mustache 태그는 데이터 객체의 msg 속성 값으로 대체 (해당 값이 변경되면 갱신) Interpolation (보간법) - Raw HTML 이중 중괄호는 일반 텍스트로 해석 실제 HTML을 출력하기 ..

[자바스크립트] 비동기 처리 방식, 콜백 함수, Promise

목차 CallBack 함수와 Promise [https://bigtop.tistory.com/35] [https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/] 비동기 처리 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행 function asyncTest(duration) { setTimeout(() => { // 이 작업을 console.log(duration) }, duration); // duration 경과하면 수행 } asyncTest(2000); asyncTest(1000); //1000 //2000 setTimeout 함수는 duration이 경과하면 작..

[HTML/CSS] 표 table 셀 합치기(병합), 경계선 넣기

이렇게 생긴 표를 만들어보려고 한다 먼저 전체 코드~ 날짜 항목 금액 0801 햄버거 10000 카페 5000 0802 다이소 3000 총합 18000 1. table 기본 table은 태그를 이용한다. : 머리글의 집합, : 표의 본문, 바닥글의 집합을 의미한다. 내용을 담을 때 필요한 은 행을 는 머리글을, 는 데이터 값을 의미한다. 2. 셀 합치기 셀 합치기는 rowspan과 colspan을 사용하면 된다. rowspan은 row를 차지하는 위치, 즉 열을 몇 칸 합칠지를 의미한다. rowspan이 2라면 세로로 두 줄을 차지하는 칸을 의미한다. 반대로 colspan은 col을 차지하는 위치, 즉 몇 행을 합칠지를 의미한다. colspan이 2라면 가로로 두 줄을 차지하는 칸을 의미한다. 사진에서 ..