킹바구니 🦜

어느순간부터 무슨 프로젝트를 열든 커밋하는 영역에 저런 메세지와 동시에 수많은 변경 사항이 뜨기 시작했음. 도대체 무엇인가 깃을 깔았다가 다시 설치해야하나 그러면 기존에 커밋 잘만 하던것도 또 에러나면 짜증나는데 이러고 있었는데 방법은 간단했음. 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를 확인하고 있었어서 그랬음.

드래그 앤 드롭같이 인터렉션한 기능들은 제이쿼리를 빼놓고 하기엔 크로스 브라우징 등의 문제로 쉽지가 않음. 기본적으로 jquery와 jquery ui를 각각 추가해주고 작업하면 된다. 주로 쓸만한 것 위주로 정리함. https://api.jqueryui.com/draggable/ Draggable Widget | jQuery UI API Documentation Description: Allow elements to be moved using the mouse. Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which prov..

input으로 불러온 img를 canvas에 보여주려고 했는데 간헐적으로 이미지가 안나타나더라... 도대체 안될꺼면 아예 안되던가 되다 말다 하는건 또 뭐야라고 했는데 방법이 있었다. 1. onload로 체크 const img = new Image(); img.src = "어쩌고저쩌고"; img.onload = function() { ctx.drawImage(img, 10, 20, 0, 10) } 체크하라굿

단순하게 스크롤을 하단으로 두는 것은 문제없지만, 부모에 아무것도 없다가 append로 자식이 생겨 스크롤이 늘어나는 상황이라면, scrollTop()이나 getBoundingClientRect()등을 써도 자꾸 아무것도 없던 기본 height만 알려줘서 굉장히 난감할때가 있음. 1. 외쳐 제이쿼리 $(".parent").animate({ scrollTop: $(".parent").prop("scrollHeight") }, 500); 제이쿼리도 같이 쓰고 있어서 양쪽으로 찾아보다가 드디어 발견함.

crbug/1173575, non-JS module files deprecated. 이와 같은 에러가 뜨며 되지 않는다면 launch.json을 이렇게 바꿔주면 된다. 1. launch.json 파일 수정 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "localhost에 대해 Chrome 시작", // "url": "http://localhost:8080", // "webRoot": "${workspaceFolder}" "file": "${workspaceFolder}/index.html" } ] } url, webRoot는 주석처리하고 file 부분을 다음과 같이 써주면 된다.

failed to execute command: null/Error: spawnSync git ENOENT (이건 git bash안깔아서 생기는 오류) your current branch 'master' does not have any commits yet (이건 계정 한번 등록해야함) 아니 오픈소스 한번 받아서 보려는데 아무리 npm run start해도 안되길래 도대체 뭐지 하다가 생각해보니... 깃을 깔지 않았었다.... 1. git bash 설치 https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is..

할꺼 많다... 배울꺼 많다... 그래서 나중에 바로 꺼내서 보게 글쓴다... 일단 타입스크립트를 연습할 수 있는 사이트를 켜놓고 시작하자. 참고로 console.log()가 왜 안되지라고 한다면 상단에 있는 run을 눌러주면 나온다(run안눌러도 에러 잡아주길래 자동으로 run해주는줄 알았음). https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you eve..

canvas는 그림을 그리는데 사용되는 html 태그임. 단순 이미지가 아닌 그래프, 사진, 애니메이션 등을 구현할 수 있음. 이 포스팅에 기본적인 canvas 구현법을 정리해둠. 1. canvas에 width, height 설정하기 html 또는 js 둘중 하나로만 설정해야함. css로 설정하면 canvas 내에 도형을 그렸을때 렌더링이 이상하게 됨 (css 속성과 실제 width/height는 다른 개념이라서 깨지는것). const canvas = document.querySelector('canvas'); canvas.width = 500; canvas.height = 700; 2. canvas에 background 채우기 background 정도는 css로 해도 문제가 없지만 기본적으로 canva..

api를 날려서 데이터를 return받는 함수를 만들었고 이 함수의 실행값(=데이터)를 변수로 받으려했는데 자꾸 저렇게 뜬다면 await를 썼나 확인해주면 된다. 1. await 확인 const setInfo = async () => { const data = await getInfo(); // await 썼나 확인 }