본문 바로가기

Web Study124

노마드코더 JS로 그림 앱 만들기 - 2 그림판의 다양한 기능 추가하기 input 필드의 range 타입을 이용하여 브러쉬의 굵기 지정해주기 const lineWidth = document.querySelector('#line-width'); ctx.lineWidth = lineWidth.value; function onLineWidthChange(evt) { ctx.lineWidth = evt.target.value; } lineWidth.addEventListener('change', onLineWidthChange); 추가로 위처럼 굵기를 지정해주면, 선이 그려질때마다 같은 경로를 참조하고 있으므로 굵기가 변하는 버그가 생긴다. 이를 위해서 마우스가 Up 되거나 leave 될 때 컨텍스트를 beginPath() 해준다. 선의 색 바꿔주기 .. 2023. 6. 9.
노마드코더 JS로 그림 앱 만들기 - 1 초기 설정 // index.html app.js / index.html / styles.css 파일 생성 live sever 확장 프로그램 설치 ❗️ canvas 란? https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API Canvas API - Web APIs | MDN The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video p.. 2023. 6. 8.
GraphQL 란?? 근래 구직중인데... 우대사항에 GraphQL 이라는 말이 많이 보인다. 그래서 뭔가하고 서칭하면서 정리해보았다! GraphQL(GQL) 이란? 애플리케이션 프로그래밍 인터페이스(API) 를 위한 쿼리 언어, 페이스북에서 만들었다고 한다. 다만 쿼리 언어 중 하나인 SQL 과는 언어 구조 차이가 크므로 활용 측면에서도 차이가 크다고 한다. SQL 은 데이터베이스 시스템에서 저장된 데이터를 효율적으로 가져오는 것이 목적 -> 백엔드 시스템에서 사용 GQL 은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적 -> 클라이언트 시스템에서 사용 즉 GQL은 API를 빠르고 유연하게 개발자 친화적으로 만들기 위하여 설계되었다고 하며, GraphiQL 이라는 IDE내에 배포될 수 있다고 함 REST.. 2023. 5. 28.
React 로 Netlify 배포 해보기.. feat.Heroku 저번에 안되었던 문제를 드디어 알게되었다. 바로 프록시 서버는 개발 환경에서만 된다는 것이었다. 서버 구축하기 싫어서 우회하려고 했더니 결국은 서버를 만들게 되었다. CORS 오류가 자꾸나서 홈페이지 배포는 성공했지만 공공API를 읽어오지 못하는 것이었다. (이것 때문에 3시간을 헤매었다) + http 프로토콜로 제공됨.. 그래서 어떻게 해야하나 알아보다가 헤로쿠라는 사이트가 있다고 해서 사용해보기로 하였다. https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli The Heroku CLI | Heroku Dev Center Last updated May 02, 2023 The Heroku Command Line Interface .. 2023. 5. 23.

티스토리툴바