공부하는 김쨔뿌

제목은 대충 서치하기 편하게 넣어놨는데 뭔 소리냐면 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..

전제상황 크롬 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%, 뷰포트 사이즈..

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..