또치의 삽질 보관함 또치의 삽질 보관함

Javascript & TypeScript

• [SvelteKit] 스벨트킷 과 mdsvex를 이용한 마크다운(Markdown) 기반 사이트 개발 구현하기

  Javascript & TypeScript 2023. 12. 10. 13:35

  Sveltekit 과 mdsvex를 활용하여 마크다운(markdown)을 컨텐츠로 사용하는 나만의 문서기반 사이트를 개발할 때 좋은 프로젝트 구성 순서를 정리한다. 1. 프로젝트 생성 seveltkit 프로젝트 생성명령어를 통해 프로젝트를 생성한다. 본 예제에선 typescript 를 선택했는데, javascript 방식으로 선택해도 별 상관없다. npm create svelte@latest $ProjectName 2. mdsvex 설치 및 적용 svelte 에서 markdown 을 인식시키기 위해 mdsvex 라이브러리를 설치한다. npm i --save-dev mdsvex 설치 후 svelte.cofnig.js 파일을 열어 예시와 같이 수정한다. 주석으로 "추가 영역"이라 명시된 부분이다. impor..

  Read More
• [Javascript] reduce 함수를 통한 합산, 감산, 비교 예제 및 유의사항

  Javascript & TypeScript 2023. 12. 6. 22:07

  reduce는 배열형식의 데이터를 1개의 데이터로 합칠때 사용한다. 숫자형 배열에서 하나의 값으로 합치거나, 빼는 등의 연산을 간략히 수행할 수 있다. 아래는 숫자배열 내 모든 요소를 합산(Sum)하는 예제이다. [1,2,3].reduce((a,b) => a+b, 0) // 6을 반환한다. 비교도 가능하다. 다음은 큰 값(Max)을 구하는 예제이다. 일반적으론 Math.max(...[1,2,3]) 가 잘쓰인다. [1,2,3].reduce((a,b) => a>b? a : b) // 실행결과 3 문자 배열에선 각 요소를 하나의 문자열로 합쳐 출력하게 된다. 일반적으론 join을 더 많이 쓰게 되므로 문자형식의 배열에선 잘 쓰지 않는다. ['1','2','3'].reduce((a,b) => a+b, '0') ..

  Read More
• [Javascript] canvas에서 S펜, Stylus pen 으로 선 그릴 때 끊어짐 해결

  Javascript & TypeScript 2023. 9. 28. 09:42

  마우스로는 클릭 이벤트가 떨어질때까지 정상동작하지만, 펜이나 터치에선 선이 지속적으로 그려지지 않고 중단되는 현상이 있다면 canvas 에 touch-action: none 으로 적용하면 된다. 아래는 선그리기 예제소스 Pressure:

  Read More
• [Javascript] Mac용 사파리(Safari) 브라우저 및 iOS 브라우저에서 audio 재생 실패할 때 의외의 원인

  Javascript & TypeScript 2023. 9. 13. 23:36

  2021년 2월 React 찍먹 겸 안드로이드 -> 아이폰 변경 기념(?)으로 브라우저 기반의 mp3 player 를 개발하여 현재까지 잘 사용중이다. 해당 웹 개발 프로젝트는 아래 카테고리로 정리한 적 있었다. https://ddochea.tistory.com/category/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EA%B0%9C%EB%B0%9C/%EB%AE%A4%EC%A7%81%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4%20%EC%9B%B9%EC%95%B1 '프로젝트 개발/뮤직플레이어 웹앱' 카테고리의 글 목록 시간과 삽을 연성하여 뻘짓을 만드는 놀라움을 선보이는 곳 ddochea.tistory.com 지금은 Svelte에 꽂힌대다 Supabase..

  Read More
• [Javascript] 일부 Chrome 환경에서만 Uncaught DOMException: Blocked a frame with origin 오류 이슈

  Javascript & TypeScript 2023. 8. 23. 23:11

  일부 크롬 브라우저에서 아래와 같은 경고와 오류가 발생한다. 경고: document.domain mutation is ignored because the surrounding agent cluster is origin-keyed. 오류 : Uncaught DOMException: Blocked a frame with origin : “{도메인주소}” from accessing a cross-origin frame. 처음부터 개발하는 단계라면 postMessage를 사용하여 처리하는걸 권장하고 있다. 그러나 시간관계상 당장 수정이 불가능하다면 웹서버에 아래 헤더와 값을 추가해보자 Origin-Agent-Cluster: ?0 설정 시 window.originAgentCluster 값이 false가 된다. i..

  Read More
• [Javascript] navigator.clipboard.write 사용시 PC와 아이폰은 되지만 안드로이드만 실패할 경우

  Javascript & TypeScript 2023. 7. 3. 19:45

  아래와 같은 코드로 클립보드 문자를 복사하는 코드를 만드는 경우가 종종 있다. function copy() { const text = 'copy text'; navigator.clipboard.writeText(text); alert("복사되었습니다."); } test PC 브라우저와 아이폰에서 정상동작하여 별 생각 없이 썼는데, 안드로이드에선 클립보드 복사가 동작하지 않는다는 문의가 들어왔다. 원인은 Promise 처리를 제대로 안했기 때문이다. 코드를 다음과 같이 해결하면 된다. function copy() { const text = 'copy text'; navigator.clipboard.writeText(text).then(() => { alert("복사되었습니다."); }).catch((err..

  Read More
• [Svelte] Scrolling 되는 태그 엘리먼트에 대해 Scroll 값 구하기 예제

  Javascript & TypeScript 2023. 3. 1. 23:59

  svelte:window 와 같은 특수태그의 지원요소가 아닌 div 내부에 있는 스크롤링이 이동한 값을 구하려면 아래와 같이 작성하면 된다. y = el?.scrollTop ?? 0 }> ... 이하 중략 ... 별거 아닌 거 같은데 은근 해매게 되었다. -_-

  Read More
• [NodeJS] module is not defined in ES module scope

  Javascript & TypeScript 2023. 3. 1. 14:56

  모듈 스크립트 작성에 실수가 없다면 파일 확장자명을 확인하라. 구성한 프로젝트가 ES6+ 기반 모듈 문법을 사용한다면 commonjs 모듈 사용시 아래와 같은 오류를 만날 수 있다. [ReferenceError] module is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and 'C:\repos\ddochea0314.github.io\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs..

  Read More