개인코딩개발공장

## 스위트 얼러트 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..

# 설치 npm install vue-router@4 # ./src/main.js에서 라우터 선언 import { createApp } from 'vue' import App from './App.vue' import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' import router from './router.js' createApp(App).use(router).mount('#app') # ./router.js파일만들고 내용 넣기 import { createWebHistory, createRouter } from "vue-router"; import List from './components/List.vue' import Main from ..

package.json에 "rules": { "vue/multi-word-component-names": "off" } 추가 그리고 재시작해야함.