킹바구니

하루는 작업하다보니 특정 부분만 폰트가 기본인 맑은 고딕으로 되어있는 것 같아 확인을 해보니, 신기하게도 진짜 커스텀으로 넣은 폰트가 적용되지 않았더라. 안될꺼면 다 안되던가.. 특정 줄은 안되거나 같은 p태그 안에서 span안에 든 것만 안된다거나 하는 페이지가 있어서 당황했는데 이럴때는 이렇게 css를 바꿔주면 된다. 1. font-display 추가 @font-face { font-family: "Pretendard-Regular"; src: url("/src/fonts/Pretendard-Regular.woff"); font-weight: 400; font-style: normal; font-display: auto; } 참고로 auto값은 커스텀 글꼴이 로드되기 전에는 화면에서 글자를 숨겨놓고,..

어쩌다보니 이렇게 생긴 얘를 scss로 선택했어야 했는데 어떻게 처리하지 했는데 그냥 두개 이어서 쓰면 되더라. i { &[data-idx="0"][data-id=""1"] { // 원하는 scss 작성 } }

어쩌다보니 위 움짤처럼 화면이 resize가 될때마다 html가 통으로 줄어들게 만들어야하는 때가 있었음. 이럴때는 window 가로길이 대비 html 가로 길이 어쩌고 하면서 scale로 처리를 해주는데, 여기서 문제가 바로 jquery drag를 쓸 때임. 예를들어 기본화면을 1920x1080으로 작업했다고 한다면, scale처리가 된 화면에서 1920이 아닌 다른 크기일 경우 위와 같은 요상한 문제가 생김. 드래그 왜저래... 아무튼 이때 드래그만 해결하는 방법은 이곳에서 확인하면 된다. 아니면 애초에 이런 문제가 안생기도록 처리하는 방법이 있는데 바로 iframe처리를 하는 것임. 먼저 fakeIndex.html를 하나 만들어서 이렇게 내용을 써주고, scale되는 함수도 써줌. 그리고 온갖 작업..

scale을 썼을 때, 예를들어 화면을 1280x720으로 작업하고 그보다 작든 크든 scale로 줄이고 키우고 하면 보통은 문제가 없는데, 좌표 기준이 달라져서 그런지 canvas나 drag는 묘하게 이상하게 된다. 예를들어 canvas로 줄긋기를 구현했는데 줄이 이상한 곳에서 그어진다거나, drag같은 경우 드래그 자체는 문제없지만 약간 틀어진 곳에 놔야 놔진다거나 마우스 움직이는거에 비해 잡은 아이템이 느리게 움직인다거나... 암튼 이런거 때문에 짜증났는데 다행히 글이 있었다. 참고로 관련 문제가 생긴다면 이글도 참고 1. 좌표 설정 var click = { x: 0, y: 0 }; $('.draggable').draggable({ start: function(event) { click.x = ev..

콘솔에는 array처럼 [ ] 형태로 나오는데 왜 find, reduce 등이 안될까 싶다면 결론은 배열이 아니고 노드리스트형이기 때문임. 쓰고 싶다면 아래와 같이 배열화 해주면 된다. 1. Array.from 사용 // list 변수가 nodeList인 경우 const currentEl = (Array.from(list)).find((el) => el.classList.contains('current')); 아님 ... 쓰던가

특화된 드래그/회전 기능 등을 제공하는 라이브러리임. 화면에 뭔가 드래그&돌아가는걸 구현했어야해서 이걸 캔버스로 해야하나 싶었는데 다행히 라이브러리가 있었다. 참고로 보니까 한국인이신듯?? 아무튼 어떤 요소를 드래그나 회전을 열심히 하다가 reset버튼을 눌렀을 때 원래대로 돌아가게 하고 싶다면 아래와 같이 설정하면 된다. https://daybrush.com/moveable/ Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Moveable is Draggable! Resizable! Scalable! Rotatable! Warpable! daybrush.com 1. reset하기 const reset = () => ..

참고로 타입스크립트 뭔가 확확 변하는건지 2년전 다른 사람 포스팅에서 이건 안된다 했던거 지금 다 되서 당황함. (해당 포스팅은 언제든지 내용 수정/추가 될 수 있음) 1. type function log(user: {username: string, age: number, phone?: string, id: string, gender: string}) { console.log(user.username); } 이 함수는 user라는 객체를 받아서 그 안에 있는 value를 알려주는데 이렇게 쓰면 너무 길어서 가독성 떨어짐. type User = { username: string; age: number; phone?: string; readonly id: string; // 읽기 전용 gender?: str..

한 이삼년전에 포폴 만든다고 좀 떠먹어봤는데 그때랑 많이 바뀐 것 같다. 아무튼 2023년 버전으로 아주 빠르게 정리 한번 가겠음. 1. 설치 // next.js 활용 npx create-next-app // vite 활용 npm create vite@latest https://react.dev/learn/start-a-new-react-project Start a New React Project – React The library for web and native user interfaces react.dev 기본적으로 node.js를 설치하고, IDE로 원하는 폴더를 만들어 들어간 뒤, 터미널에 둘 중 아무거나 입력하면 됨. 과거와 다르게 리액트 자체만을 설치하는 방법 보다는 이렇게 다른 친구들과 함..

어느순간부터 무슨 프로젝트를 열든 커밋하는 영역에 저런 메세지와 동시에 수많은 변경 사항이 뜨기 시작했음. 도대체 무엇인가 깃을 깔았다가 다시 설치해야하나 그러면 기존에 커밋 잘만 하던것도 또 에러나면 짜증나는데 이러고 있었는데 방법은 간단했음. 1. .git 폴더 삭제 C:\Users\본인이_설정한_컴퓨터_이름 나같은 경우 이곳에 있었는데 .git 폴더를 삭제해주면 더이상 저런 메세지가 뜨지 않음(숨김처리 되어있을 수 있기 때문에 풀고 진행하면 됨). 해당 폴더는 깃 초기화하면 다시 깔 수 있다나뭐라나 하니까 뭐 다시하면 됨.

분명히 화면에는 뜨는데 왜 0으로 나올까.. css에서 height를 auto로 하거나 따로 안쓰고 padding등으로 잡혀있는거면 getBoundingClientRect로 안잡히는건가.. 온갖 생각을 하던때가 있잖슴~~~~~~~ 1. display 확인 const el = document.querySelector('.div'); if (window.getComputedStyle(el).display != "none") { console.dir(el.getBoundingClientRect()); } none으로 되어있으면 안뜨니까 체크 먼저 해주기. 나같은 경우는 알고보니 2번째 element를 확인했어야했는데 display none상태인 첫번째 element를 확인하고 있었어서 그랬음.