킹바구니

드래그 앤 드롭같이 인터렉션한 기능들은 제이쿼리를 빼놓고 하기엔 크로스 브라우징 등의 문제로 쉽지가 않음. 기본적으로 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..

https://start.spring.io/ 스프링 하는 사람들은 다들 스프링부트로 프로젝트를 만드는데, 그 스프링부트 프로젝트를 기본적으로 만들어주는 간편한 사이트임(공식) 1. 파일 받기 아주 빠르게 설정한다면 위에 노란색 박스 부분들만 선택하면 된다. 보통 gradle로 많이들 한다길래 gradle로 설정하고, 언어는 자바, 스프링부터 버전은 제일 최신(snapshot은 개발버전같은거라 패스), 자바 버전은 11을 쓰기때문에 11로 변경, 필요 라이브러리는 스프링웹과 타임리프 기본적으로 쓰니까 두개 추가. 그리고 하단에 generate 버튼을 누르면 된다. 2. 압축 해제 후 이클립스 실행 보통 공부한다고 강사껄 따라서 고대로 하다보면 이 위치에 workspace폴더가 있는데 C:\Users\본인컴..

하 진짜 아무리 방법을 읽어봐도 메뉴 이름도 보이지도 않고 안그래도 예전에 엄청 이리갔다 저리갔다 한게 기억나서 머리가 아파가지고 열받아 죽을라하다가 언어를 영어로 바꿔도 보고 하다가 겨우 찾아서 정리할겸 씀. how to delete facebook account 1. 로그인 후 우측 상단 프로필 - 설정 및 개인정보 클릭 login > click the profile an the top right section > click Settings & privacy 2. 설정 클릭 click Settings 3. 좌측 계정 센터 - 개인정보 클릭 click Personal details on Account center section at the top left. 4. 개인정보 클릭 계정센터에 들어와서 한번 ..

swiper의 webcomponent를 활용하여 슬라이드를 구현하고 있었는데 슬라이드 앞뒤이동 버튼 색만 변경하려고하는데 !important를 줘도 아무리 안먹어서 뒤져보다가 정리함. 1. injectStyles 활용 먼저 html태그 swiper-container에 ref를 설정해주고 init값을 false로 둬야함. 그리고 watch에 ref가 들어왔을때 위와 같은 코드를 넣어주고 initialize()를 해주면 잘 적용된다. 참고로 onMounted는 안먹히니께 주의! 이게 공식 설명서에 있긴한데 묘하게 빠진 부분이 있어서 안먹힌단말이지..