Javascript & TypeScript
-
[NodeJS] 간단히 구현해 본 메일발송 예제Javascript & TypeScript 2021. 2. 27. 17:32
예전에 .NET 기반으로 메일발송 예제를 간단히 구현해본 적이 있었다. ddochea.tistory.com/78?category=568955 [.NET] 간략한 메일(Mail)발송 프로그램 예제 sendmail 이나 qmail 같은 메일서버를 구축하는 것이 아닌, 단 몇줄의 코드만으로도 메일발송전용 프로그램을 만들 수 있다. 위키백과에 소개된 것처럼 SMTP 프로토콜을 구현해서 발송하면 되는데, ddochea.tistory.com 이번엔 nodeJS 기반으로 구현해보았다. 닷넷때와 마찬가지로 실제 발송 메일계정이 존재하지 않아도 되는데, 이번엔 날짜 패키지인 moment를 제외하고 직접 구현했다. 물론 통신기능 구현 연습차 작업한 코드라서 실제 모듈로서 사용하기엔 부적합하다. const net = req..
-
[Javascript] moment로 audio 태그의 currentTime 및 duration 값을 mm:ss 형식으로 쉽게 표시하기Javascript & TypeScript 2021. 2. 13. 22:48
moment는 날짜/시간에 대한 다양한 포맷이나 계산을 쉽게 할 수 있도록 도와주는 javascript 모듈이다. 워낙 유명하기 때문에 더 이상의 설명은 필요없을 듯 하다. https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD" momen..
-
[React Hook] 상태 훅(State Hook)을 내부함수로 정의할 경우 유의사항Javascript & TypeScript 2021. 2. 12. 19:53
이 소스 자체가 올바르다고 보긴 어렵겠지만 나중에 또 뻘짓할수도 있는점을 대비해 정리한 글 useEffect(() => { console.log(`playIndexes : ${playIndexes}`); }, [playIndexes]); useEffect(() => { if(isSuffle) { setPlayIndexes(p => { const rndTargets = [...p.slice(0, currentPlayIdx), ...p.slice(currentPlayIdx + 1, p.length)].sort(p => Math.random() - Math.random()); const result = [...rndTargets.slice(0, currentPlayIdx), p[currentPlayIdx], ..
-
[React Hook] 상태 훅(State Hook)을 EventListener에 사용시 유의사항Javascript & TypeScript 2021. 2. 11. 16:06
개인프로젝트에서 HTMLAudioElement 를 선언하여 해당 객체에 이벤트 리스너를 심어 음악재생을 관리하는 기능을 구현하던 중 겪은 현상을 정리하고자 이 글을 작성하였다. 초기 소스는 아래와 같이 작성했다. function MusicPlayer() { const [totalTime, setTotalTime] = useState(1); // 초기값을 0으로 주면 바로 다음 음악재생 const [currentTime, setCurrentTime] = useState(0); const [audio] = useState(new Audio()); function init() { console.log(`init ${MusicPlayer.name}`); audio.addEventListener('timeupda..
-
[React Hook] 컴포넌트 내 Effect Hook(useEffect) 사용 개념정리Javascript & TypeScript 2021. 2. 11. 14:12
함수형 컴포넌트는 내부에 선언된 상태 훅(State Hook)의 변화나 렌더링 상황에 따라 함수형 컴포넌트 자체가 재 호출된다. 그래서 함수형 컴포넌트내에 단순히 변수를 선언하거나, 함수를 호출하면 의도한 결과가 제대로 수행되지 않을 수 있다. 아래 소스는 개인개발 프로젝트를 하면서 겪은 뻘짓 코드이다. audio 객체 및 init 함수의 동작이 원하는대로 수행되지 않아 고생했다. function MusicPlayer() { const audio = new Audio(); // 이렇게 선언할 경우 MusicPlayer 내 다른 state hook이 변경될때마다 매번 객체가 새로 생성됨. const [totalTime, setTotalTime] = useState(1); const [currentTime,..
-
[Javascript] React 웹 앱 Firebase에 호스팅하기Javascript & TypeScript 2021. 2. 4. 23:17
firebase + React를 이용해 스트리밍 음악 웹앱 개발 가능여부를 체크하기위한 프로젝트가 어느덧 막바지 단계에 들어왔다. 이전 포스트를 통해 진행했던 React 테스트 웹 페이지를 firebase에 호스팅 해 볼 차례이다. 지난시간 글은 아래 링크로 확인가능하다. https://ddochea.tistory.com/87 [javascript] blob으로 저장된 미디어파일 재생처리 지난 시간에 firebase storage에 저장된 음악파일을 blob 형식으로 받아 indexdDB에 저장하는 기능을 구현했었다. 해당내용은 아래 포스트를 통해 확인할 수 있다. https://ddochea.tistory.com/86 [javascript].. ddochea.tistory.com 이번시간엔 호스팅을 통..
-
[Javascript] blob으로 저장된 미디어파일 재생처리Javascript & TypeScript 2021. 2. 2. 21:48
지난 시간에 firebase storage에 저장된 음악파일을 blob 형식으로 받아 indexdDB에 저장하는 기능을 구현했었다. 해당내용은 아래 포스트를 통해 확인할 수 있다. https://ddochea.tistory.com/86 [javascript] 브라우저의 indexedDB 및 WebSQL을 손쉽게 사용할 수 있는 localForage 라이브러리 개인 프로젝트로 firebase + react + (필요에 따라 node 호스팅?)를 이용해 브라우저 기반 스트리밍 mp3 플레이어를 개발해보려고 하고 있다. 아직 본작업은 아니고 될지 안될지 따져보는 중이다. 음악 ddochea.tistory.com 파일을 받았으니 이번엔 재생을 다뤄볼 차례이다. blob 형식을 재생하는 방법은 의외로 쉽게 찾을 ..
-
[Javascript] 브라우저의 indexedDB 및 WebSQL을 손쉽게 사용할 수 있는 localForage 라이브러리Javascript & TypeScript 2021. 2. 1. 23:35
개인 프로젝트로 firebase + react + (필요에 따라 node 호스팅?)를 이용해 브라우저 기반 스트리밍 mp3 플레이어를 개발해보려고 하고 있다. 아직 본작업은 아니고 될지 안될지 따져보는 중이다. 음악 파일을 캐싱하고싶은데 localStorage에 저장하려니 크기제한이 있어 실패했다. indexedDB는 써본적이 없어 모질라 개발자 홈페이지에서 확인하던 중, indexedDB를 쉽게 사용할 수 있는 라이브러리를 소개하길래 한번 찾아가 보았다. localForage/localForage: 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API. (github.com)..