javascript
-
[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..
-
[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') ..
-
[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..
-
[Svelte] 스벨트에서의 event capture와 bubblingJavascript & TypeScript 2022. 12. 17. 13:26
아래코드는 버튼 click 시 stopPropagation에 의해 button 이벤트만 실행된다. handleClick('div')}> handleClick('button')}> Click me 버튼을 눌렀을 때, 버튼 event 가 아닌, div의 click 이벤트가 동작하게 처리하려면 아래와 같이 수정해야 한다. handleClick('div')}> handleClick('button')}> Click me 링크 Events / Event modifiers • Svelte Tutorial developer.mozilla.org / 이벤트 버블링과 캡쳐
-
[React] ffmpeg.wasm 메모리 누수 문제 해결Javascript & TypeScript 2021. 5. 8. 16:11
몇칠 전 ffmpeg.wasm 패키지를 소개했던 적이 있다. (ddochea.tistory.com/147) 웹 클라이언트만으로 미디어 파일에 대한 인코딩/디코딩 기술을 사용할 수 있다는 장점과 함께, memory leak이 발생하고 있는 이슈가 있어, 실제 서비스 개발에 도입하기엔 무리가 있을 것 같다고 했었다. 그리고 나서 오늘 좀 더 확인해보는 시간을 가졌는데, thread 관련 문제가 있는건 맞지만, 메모리 부분은 내가 코딩을 잘못해서 생긴 것을 깨닫게 되었다. 이 문제는 내가 만든 예제 뿐만 아니라, 공식사이트에 소개하고 있는 React 예제도 같은 문제가 있다. 아래 코드 공식사이트 예제 코드이다. import React, { useState } from 'react'; import { crea..
-
[Javascript] 브라우저에서 사용하는 인코딩 및 디코딩 패키지 ffmpeg.wasm 소개Javascript & TypeScript 2021. 5. 5. 18:10
미디어파일을 인코딩/디코딩 하는 작업을 구현하는 프로그래머라면 ffmpeg란 오픈소스 툴을 들어본적이 있을 것이다. 카카오 팟플레이어 곰플레이어 등, 상당수의 미디어 플레이어나 인코딩 프로그램에 직/간접적으로 사용되는만큼 파급력이 높다. CLI 명령어 기반이라 이를 편히 사용할 수 있는 UI 기반 툴도 많이 나와있다. 그러나 특성상 웹에서 사용은 어려웠다. 물론 호스팅을 통해 미디어파일을 인코딩/디코딩 서비스를 제공하는 웹사이트도 심심찮게 볼 수 있었겠지만, 어디까지나 내 미디어파일이 웹서버에 업로드되어 처리한 후, 결과를 내려받는 형식이기 때문에 함부로 이용하면 소중한 지적재산권(?)을 내 손으로 넘겨주는 꼴이 될 수 있다. 이와 같은 불상사를 방지할 수 있는 패키지. ffmpeg.wasm를 소개한다...
-
[Javascript Event] Drop 이벤트에 preventDefault, stopPropagation를 적용해도 동작하지 않는 현상 해결Javascript & TypeScript 2021. 4. 27. 23:12
React 프로젝트에서 파일을 Drag & Drop 하기 위한 기능을 구현하고 있었다. React를 대상으로한 Drag & Drop 컴포넌트가 오픈소스상에 많이 존재하긴 하지만, 간단한 기능 구현마저 라이브러리로 도배해야할까 싶어 직접 구현하고 있다. (결국 진행이 간단치 않게 되었다. 🤣) 소스코드는 아래와 같다. import React, { useState, useRef, useEffect, useCallback } from "react"; import { Container, createStyles, Grid, makeStyles, Paper, Theme, } from "@material-ui/core"; const useGridStyles = makeStyles((theme: Theme) => cr..