개인코딩개발공장

보호되어 있는 글입니다.

문제점 설명 : gogo1 이렇게 만드는건 이미 배웠고 정상적으로 작동된다. 하지만 내가 원하는 기능은 메서드 안에서 라우터를 조정하는것이다.. 조건에따라 다른 라우터를 연결하는 버튼을 만들고 싶어서였다. gogo2 여긴 템플릿 const test = ()=>{ router.push({ name: 'test' }) } 이건 메서드.. this.$router.push~ self 머시기 다 써봤는데 안되더라. 구글링 졸라게 해보니 답이나온다. 먼저 import { useRouter, useRoute } from 'vue-router' 이렇게 라우터를 임포트해주고 const router = useRouter(); const route = useRoute(); 이렇게 변수지정을 해준다. 그다음 메서드에서 con..

## 스위트 얼러트 https://sweetalert2.github.io/ SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 예쁘게 alert띄워주는거.. ## 섬머노트 https://summernote.org/ 글쓰기 ui ## 아이콘 부트스트랩은 폰트어썸을 쓰고있음. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles..

# form-select https://getbootstrap.com/docs/5.2/forms/select/ Open this select menu One Two Three 셀렉트창. #인풋(이메일) Email address # 칼라픽커 Color picker #디테일 리스트 Datalist example # range Example range 그냥 졸라 많다. 걍 필요한거 찾아서 쓰자..

const getByteLengthOfString = function (s, b, i, c) { for (b = i = 0; (c = s.charCodeAt(i++)); b += c >> 11 ? 3 : c >> 7 ? 2 : 1); return b; }; const test = "테스트ddididi"; console.log("length : ", getByteLengthOfString(test), "Bytes"); 한글은 한글자당 약 3바이트임 이거 실행하면 test 스트링 용량 알려줌.

https://getbootstrap.com/docs/5.2/content/typography/ https://getbootstrap.com/docs/5.2/content/images/ Typography Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more. getbootstrap.com https://getbootstrap.com/docs/5.2/content/tables/ Typography Documentation and examples for Bootstrap typography, including global settings, heading..

https://getbootstrap.com/docs/5.2/layout/grid/ 헤더에~ 바디태그 하단에 # 기본 구조 1 2 3 먼저 컨테이너로 감싸고 그다음 로우, 다음에 컬럼이 들어감. ## 그리드 시스템 # 컬럼 비율 컬럼 총 합은 12이고 화면 배열을 여기서 정한다. 예제코드는 4, 4, 4로 나눴지만 1,5,6이렇게 해도되고.. 걍 12가 한 로우가 되는거임. 12를 넘어가면 다음 로우로 설정됨. 이렇게 12를 넘기면 이런식으로.. # 컬럼 크기 비율 md로 설정하면 768px이하일때는 재배열이 된다. 768은 보통 모바일 기준. 보통 sm md lg를 가장 많이 씀. #off-set-md-4 offset-md-4를 주게되면 현재태그 앞에 블럭에 4개짜리 빈블럭을 넣는 개념임.(요기 좀 헷..

const test =()=>{ const error=()=>{ console.log('에러야~~') } const success=(position)=>{ const latitude = position.coords.latitude; const longitude = position.coords.longitude; console.log(latitude) console.log(longitude) console.log('성공') } navigator.geolocation.getCurrentPosition(success, error) } 이게 걍 단순하게 쓴거고.. latitude와 longitude를 구해준다. 저 getCurrentPosition콜백에 success error함수 두개를 파라미터로 넣으면 su..

참고로 vuejs에서 만들었기때문에 일반적인 html, js의 페이지에선 코드가 살짝 다를 수 있다. 먼저 템플릿 복사방법에는 두가지가 있는데 둘다쓴다. #1 span태그 복사 여긴 span태그 복사야~ Copy1 이 코드의 메서드는 이렇다. const copy1 = () => { let copyText = document.getElementById("span").innerHTML; navigator.clipboard.writeText(copyText).then( console.log('복사완료') ) } 먼저 span태그안에있는 값을 변수로 지정해주고 밑에 프로미스에 담으면 된다. #2 input값 복사 Copy2 메서드는 const copy2 = () => { let copyText = documen..

# children만들기 { path: "/detail/:index", component: Detail, children: [ { path: "author", component : Author }, { path: "comment", component : Comment }, ] }, 이렇게 칠드런 컴포넌트를 써주면 됨. author은 detail/:index/author으로 연결이 되는거임. 물론 import해줘야함. # detail.vue에서 으로 갖다쓰면됨. 연결은 {{posts[$route.params.index].title}} 이렇게 해줬음. ## router함수 # push함수 여기서 제목을 클릭하면 detail/~/author이라는 라우터를 기본 주소에 붙여준다는거임. 페이지 이동되는거. # g..