공부하는 김쨔뿌

제목은 대충 서치하기 편하게 넣어놨는데 뭔 소리냐면 vite를 사용해서 vue든 리액트는 프론트엔드에서 작업중이던걸 모바일 뷰로 확인하는 별거아닌 방법인데 원래는 걍 PC랑 모바일이랑 같은 와이파이인 상태에서 {와이파이 아이피 주소}:{포트(ex.3000)} 을 모바일에서 쳐주면 되는디 안되가지고 뭘까 싶어서 찾아보다가 저기 보면 Network: use --host to expose 라고 적혀있단말임? 찾아보니 보안문제때문에 개발자가 따로 네트워크 열어두는게 아니면 접근 못하게 Vite가 업데이트 됬던거.. 그래서 걍 원래 프로젝트 실행시키는 코드 맨 뒤에 --host 붙여주면 됨 예시) pnpm run dev 를 pnpm run dev --host 이러면 Network에 뜨는 주소 그대로 모바일에서 열..

선택한 element가 있는 스크롤 영역에서 해당 element로 스크롤 시켜주는것임. 예를 들어 html과 css가 아래와 같이 되어있을 때 ... .overflow{ width:100px; height:200px; overflow:scroll; } .overflow section{ width:100px; height:100px; } 부모태그인 div의 height보다 모든 section의 height 총합이 더 커서 스크롤이 생길거임. 특정 행동을 취하면 class가 hello인 섹션이 보이도록 스크롤을 이동시킬 때 사용하는 게 scrollIntoView임. 자바스크립트에서 아래와 같은 함수를 이용해 사용할 수 있음. const moveScroll = () => { const hello = docum..

빌어먹을 넉스트놈이 온갖 quill 관련 라이브러리를 거부해서 어제부터 죙일 뒤적뒤적하다가 vue-quill 깃허브에서 쓸 수 있다고 8일전에 올라왔길래 기억하는 용도로 링크 냉큼 가져옴.. 여기 안써놓으면 ㄷ나중에 또 검색하느라 하루를 보내겠지..... 준비물 - nuxt3 기본 템플릿, vue sfc를 써보기는 한 뇌 아래 링크 따라하면 됨 https://github.com/vueup/vue-quill/issues/161#issuecomment-1187359826 Nuxt 3 Support · Issue #161 · vueup/vue-quill Hello, Has anyone run the plugin innuxt 3? Is it possible? github.com - import { defineN..

나진짜이거때매몇시간몇일을날렸다. mdi 어케 쓰는지 몰라서 라이브러리 이것저것 설치하다가 결국 호환이 안맞거나 특정 아이콘들은 임포트가 안되어서 버렸음 근데 이게 알고보니 별루..안어렵던 것입니다? 각설하고 vue 3 에서 쓰는 것. 어렵지않읍니다. 우리는 https://materialdesignicons.com/ 의 아이콘을 써줄 것입니다. 이게 여러 커뮤니티에서 만들어진 구글의 메터리얼 디자인 가이드에 맞춰진 아이콘들의 모음입니다. 일단 설치합시다. vue는 3에 맞춰 대충 준비해주십쇼. npm install @mdi/font @mdi/js mdi font랑 js 둘 다 설치해야합니다. 저 가증스러운 사이트는 font만 설치하라하는데 막상 아이콘 클릭하면 mdi/js에서 임포트함. 쒸익..!! 그리고..

핵심 event.target.files URL.createObjectURL 프리뷰 만드는 방식이 어려울거라 여겼는데 생각보다 쉬워서 깜놀했땃쥐.. 굳이 vue 말고 다른 프레임워크에서도 비슷한 방식으로 하면 됨 input의 onchange 이벤트에서 event.target.files 로 파일객체들이 들어간 객체를 불러와주고 URL.createObjectURL(파일객체) 로 파일객체를 src에 넣을 주소로 바꿔준 뒤 img 태그의 src 를 업데이트 시켜주면 끝! 아래는 vue3 기준 script setup 쓸 때의 코드 + typescript 1개만 불러올 때 // import { ref } from 'vue'; const src = ref(); const addImage = (e: Event) => {..

전제상황 크롬 dev 툴에서 요소를 클릭했을 때 정상적으로 뜨고있으나 브라우저 화면은 흰색바탕 Quasar 를 깔아서 사용하고있고 "quasar.variables.scss" 라는 파일이 존재함 브라우저 사이즈에 따라 보였다가 안보임 원인 퀘이사가 미디어쿼리 중단점(특정 화면 사이즈에 따라 어떤 화면을 보여줄지에 대한 지점)을 기본적으로 설정해두었기 때문 해결방법 quasar.variables.scss 파일로 들어가서 아래의 코드를 넣어준다. $breakpoint-xs: 100% !default; $breakpoint-sm: 100% !default; $breakpoint-md: 100% !default; $breakpoint-lg: 100% !default; 이러면 모든 중단점이 100%, 뷰포트 사이즈..

사실 Vue3만을 위한 내용은 아니지만 Vue3기준이기에 다른 버전에선 안먹힐 수 있음. 겁나 간단한 내용들이고 공식문서에도 나오겠지만.. 나름 보기 편하게 정리. 진짜 금붕어 기억력 어뜨카냐 기본 사용법 전역적으로 적용된다. 언어 지정 원하는 언어를 설치한 뒤 lang="원하는 언어" 를 사용해서 scss, sass 등을 style 내에서 사용할 수 있다. 이건 template이나 script도 마찬가지. template에서는 lang을 pug로 설정한다던가 script에서는 ts를 넣으면 typescript로 사용할 수 있다. 범위 지정 scoped 이 코드가 적힌 파일 내의 요소에만 적용되는 스타일을 적을 수 있다. 기본적으로 자식요소에게 넘어가지 않는다. 하지만 아래와 같이 상위요소의 선택자를 가..

Type - 여러 형식의 타입을 지정해 줄 수 있다. // 타입 1개만 지정 type A = string; // 타입 여러개 지정 type B = string | number; // 객체형식 type C = { x:number; y:string; } // 사용 const alphabet = (a:A, b:B, c:C) => { console.log(a, b, c) } Interface - 객체 형태의 타입을 지정해준다. interface Hello { good:string; bad:string; } const hi = (hello:Hello) => { console.log(hello.good); console.log(hello.bad); } hi({good:"good to see you", bad:"wt..

*에러메세지 그대로..기록 파파고 돌리면 원인 알 수 있는거 * 여기 있는 걸로 검색해서 들어오셨다면 파파고 먼저 돌리는 습관을 가져봅쉬다 Image elements must have an alt prop, either with meaningful text, or an empty string for decorative images. - 에 alt를 안넣어서 뜨는 것. 이거 왜 넣냐면 예를 들어 시각장애인이 프로그램으로 html을 긁어서 들을 때 이미지는 alt 태그의 내용을 읽거나 이미지가 깨졌을 때 이 이미지가 어떤 이미지인지 비장애인에게도 알려줄 수 있음!! 만약 html 에 이미지 태그가 아니라 svg로 버튼을 만들었다면 버튼 안에 텍스트로 이게 무슨 버튼인지 적어주는게 좋음. 별 의미없는 배경이면..

github깃허브에 있는 브랜치에서 새로운 브랜치로 pull 했으나 기존에 merge병합했던 커밋들이 unpublished 상태로 계속해서 중복적으로 뜰 때.. 분명 push 하고 병합한 커밋들인데 push 할때마다 이미 병합된 커밋들이 중복되어 올라갈때 = 로컬에서 지금 사용중인 브랜치를 삭제. 이미 커밋한 것들이 있다면 이번까지만..커밋 중복을 견디고 push 후 병합. 그리고 브랜치를 삭제한 뒤 git branch 브랜치명 origin/깃허브브랜치명 text-overflow:ellipsis not working. "..." 안들어갈때 = 일단 한 줄이라면, 부모태그의 display가 flex거나 grid 인지 확인. 맞다면 min-width:0; 을 기입해준다. 그냥 block 이거나 min-wid..