전체 글
-
[HTML] canvas 모바일에서 그리기HTML 2023. 4. 11. 15:17
보통 html canvas로 그림 그리기 같은 기능을 구현 할 때 'mousedown' 'mousemove' 'mouseup' 이벤트를 사용한다. 하지만 모바일 기기에서는 마우스 이벤트와는 다르게 터치 이벤트를 사용해야 한다. touchstart touchmove touchend 이때 우리는 보통 터치 이벤트로 스크롤을 하는데 캔버스에서 터치 이벤트가 발생하면 같이 스크롤이 되는 경우가 있다. 이때 canvas의 touchmove 이벤트가 발생하였을 때 e.preventDefault()를 하게 되면 스크롤이 되지 않아 문제를 해결할 수 있다. e.preventDefault()
-
한줄기록etc. 2023. 4. 7. 18:00
[HTML] Open Graph (오픈그래프) 태그 사용시 이미지 경로는 정적 경로를 사용해야 적용이 되었다 [Next.js] Next.js 프로젝트를 github-pages에 배포하려면 설정해야 할 게 많았다... vercel로 하니 한 번에 됨 [JSON] undefined는 JSON에서 유효한 값이 아니다. (큰따옴표O, 작은따옴표X) [Figma] 피그마에서 텍스트 작성 시 마지막에 글자가 두 번 반복하는 현상을 이전 버전 Microsoft 입력기로 호환하니 해결됨 [JavaScript] let과 const로 전역 변수를 선언해도 전역객체의 프로퍼티가 아니다. window.foo와 같이 접근할 수 없다. [JavaScript] hasOwnProperty 메소드는 상속받은 속성을 제외하고, 객체 자..
-
ideal idea 회고Project 2023. 4. 3. 14:50
ideal idea ideal idea는 최대 4명의 사용자들이 실시간으로 캔버스를 공유하며 이상적인 아이디어를 창출할 수 있는 서비스이다. 이 프로젝트에 대해 생각하게 된 계기는 친구들과 공모전을 준비할 때였다. 함께 스토리보드를 작성하기로 하여 이 프로젝트처럼 실시간으로 함께 그림을 그릴 수 있는 사이트를 찾아보니 아래에 있는 Aggie라는 사이트를 찾아 함께 작성하였다. Aggie.io by Magma Draw a picture together with your friends in real-time over the internet in your browser aggie.io 사이트를 실제로 이용하면서 실시간 웹 애플리케이션으로 메시지를 보내 채팅을 만드는 예제들을 몇 번 보았지만 이렇게 그림을 함께..
-
[React] framer-motion staggerChildren 사용React 2023. 3. 29. 15:28
framer-motion의 staggerChildren은 variants를 사용할시 자식 컴포넌트 애니메이션의 시차를 둘 수 있다. 예를 들어 stargeChildren이 0.01이면 첫 번째 자식이 0초, 두 번째 자식이 0.01, 세 번째 자식이 0.02 지연된다. const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( ) 나의 경우 서버에서 받아온 데이터를 map으로 돌려 각 아이템이 각각 0.5씩 간격을 두고 애니메이션이 되길 바랬지만 적용이..
-
[HTML] canvas 캔버스 도형 그리기 (사각형, 원)HTML 2023. 3. 25. 17:04
html canvas를 이용하여 드로잉 애플리케이션을 구현하던 중 도형 그리기 기능을 추가하고 싶었다. (도형 중 사각형을 위주로 설명한다.) canvas에서 사각형을 그리는 방법은 다음과 같다. const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillRect(x, y, width, height); // 채워진 사각형 ctx.strokeRect(x, y, width, height); // 윤곽선만 있는 사각형 하지만 우리가 원하는 건 캔버스 안에서 드래그를 통해 도형을 그리는 것이다. 이를 위해 캔버스에 이벤트로 mousedown, mousemove, mouseup 을 사용한다. moused..
-
[Javascipt] Clipboard API 사용JavaScript 2023. 3. 4. 17:50
갈틱폰 사이트를 보면 방 입장시 브라우저 표시줄의 주소가 깔끔하다는 것을 볼 수 있다. 로비에서 초대 버튼을 누르면 아래와 같이 쿼리스트링을 통해 채널번호를 명시해둔 걸 볼 수 있다. 초대 링크를 붙여넣기 하면 /lobby로 이동하게 된다. (생각해보니 방송 스트리밍 시 주소창을 보고 방의 링크를 알 수 있는 상황이 생길 수 있는 듯) // 초대 링크 https://garticphone.com/ko/?c=채널번호 // 입장시 https://garticphone.com/ko/lobby 나는 Next.js를 사용하였기에 useRouter의 push와 replace 메소드 두번째 인수인 as를 통해 브라우저 URL 표시줄에 표시할 경로를 명시할 수 있어 /room에 입장하면 useEffect를 통해 표시줄에는..