킹바구니

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 썼나 확인 }

scrollTo은 element에 붙어있는 기본 메소드로 스크롤의 위치를 옮겨줌. 근데 이상하게 이동을 안해서 30분 동안 고생좀 하다가 찾아냄. 기본 기능 // 1. 좌표형 scrollTo(x좌표, y좌표) // 2. 옵션형 scrollTo({top: 250}) // y좌표 scrollTo({left: 250}) // x좌표 scrollTo({top: 250, behavior: "smooth"}) // 같이 쓰는 애니메이션(smooth, instant, auto) 이건 그냥 이렇게 쓴다고ㅇㅇ 1. 안먹힐때 const html = document.querySelector('html'); const div = document.querySelector('.page'); html.scrollTo({top: d..

작업하다보니 어느순간 tsconfig.json은 건들지도 않았는데 이름이 빨간색이고, 오류를 보아하니 '~~구성 파일에서 입력을 찾을 수 없습니다' 라고 떴음. 안그래도 다른 오류도 있어서 이거때문인가 싶었는데 찾아보니 별개였고 다행히도 이거는 껐다 켜주면 됐었음. 1. vscode 껐다 켜기 역시 콤퓨타는 때리거나 껐다 켜거나 ㅎㅅㅎ 여기 다른 방법도 있으니 참고 https://velog.io/@heony/tsconfig.json-input-error tsconfig.json 구성 파일에서 입력을 찾을 수 없습니다. tsconfig.json 파일에서 발생한 `구성 파일에서 입력을 찾을 수 없습니다.` 오류를 해결하기 위해 노력한 과정입니다. velog.io

사실 아직 이유는 모르겠음. 일단 utf8이 아닌 eur-kr? 뭐 이런 형식으로 보내서 그렇다는데 백엔드 파일에는 utf8이라고 충분히 써져있는거 같고.. 아무튼 몇가지 방법을 찾았는데 나는 다 안됐구 그냥 fetch로 받으니까 되서 그렇게 처리함(휴). 나중에 또 만날지 모르니 글정리 해둘겸 씀. 1. npm 라이브러리 설치 https://sulfurbottom.netlify.app/Javascript/Axios-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%97%90%EC%84%9C-%EC%9D%B8%EC%BD%94%EB%94%A9-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%EB%B2%95/ Axios 라이브러리에서 인코딩 문제 해결..

Uncaught TypeError: Cannot read properties of null (reading 'includes') 말그대로 중간에 비교하는 값이 null인게 하나 있어서 에러걸리는거임. 이씨 데이터가 많은데 그중에 하나가 슬쩍 null일때는 안보여서 뭐지뭐지 이럼ㅋㅋ

정확히 어떤 상황이라고 말하기 애매한데 아무튼 프로젝트에서 폰트를 바꾸면 iframe내 내용도 바뀐 폰트로 적용이 되어야하는 기능이 있었음. 나눔고딕/나눔명조만 있었는데 이상하게 명조는 잘 되는데 고딕이 안되더라.. Network에서도 폰트는 잘만 다운되고 있었고~~ 경로도 문제없었고~~ 오타도 없었고~~ 파일이 잘못되었나 싶어서 새로 고딕파일 받아서 해도 안되고~~ 1. ttf를 otf로 변경 잘되는 놈을 파보자 싶어서 보니까 opentype 어쩌고라고 되어있어서 혹시나 싶어서 나눔고딕 파일을 otf로 바꿔보았더니 잘된다!!!

Failed to construct 'Blob': The provided value cannot be converted to a sequence. 해석해도 뭔소린지 모를ㄹㅇ 암튼 blob 파라미터에 [] 이거 감싸서 제대로 넣었나 체크해보면 댐. // 에러 URL.createObjectURL(new Blob('../Images/plg2.jpg', { type: "text/css" })) // 올바른 URL.createObjectURL(new Blob(['../Images/plg2.jpg'], { type: "text/css" }))

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) = forEach를 쓰지않았나 확인 여러 데이터를 db에 저장해야하는데, 모두 다 완료되면 테이블을 한번만 reload해야하는 상황이 옴. 그래서 Promise.all을 활용하여 모든 요청이 완료된 이후 뭔가 동작하도록 했는데 자꾸 위와 같은 에러가 떠서 찾아보니 forEach문은 원래 return undefined을 하기때문에 다르게 쓰라고해서 map이나 다른걸로 사용했더니 에러가 사라짐. Promise.all( dataArray.map(async (data) => { return axios .post("/api/user/add", { userId: da..

1. 수학적으로 변경하기 function convertToPositive(num) { if (num < 0) { return num * -1 } } convertToPositive(-3) // 3 이건 또 생각을 못했네 수학적 사고 기르는 방법 업나.. 참고로 아래 방법보다 이게 더 빠르다고 한다. 2. 절대값 사용하기 function convertToPositive2(num) { if (num < 0) { return Math.abs(num) } } convertToPositive2(-3) // 3