javascript
-
[3~4일차] firebase Authentication를 이용한 OAuth 방식 로그인/로그아웃 구현 진행프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 9. 22:59
지난시간에는 대략 적인 재생화면 뼈대만 만들어봤었다. 이번에는 firebase에서 제공하는 인증(Authentication) 기능을 사용해 로그인/로그아웃 구현을 진행했다. firebase에는 OAuth 를 제공하는 업체의 로그인 기능을 손쉽게 사용할 수 있도록 구현해 두었다. (물론 네이버, 다음 같은 서비스는 제공되지 않는다) 인증을 구현한 이유는 확인되지 않은 사람이 URL을 알아내 접근하여 음악을 받을 수 있는 문제를 사전에 차단하기 위함이다. 로그인/로그아웃 구현에 참조한 소스는 아래와 같다. https://fireship.io/lessons/react-firebase-chat-app-tutorial/ React Firebase Chat App Learn the basics of React & ..
-
[1~2일차] 기술스택 선정 및 Material-UI 로 대략적인 화면 구성프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 7. 22:16
iPhone을 사용하는데 맥북은 없고, 앱스토어에서 앱을 받아쓰자니 믿음이 안가 웹앱 방식으로 개발해서 음악 재생 서비스를 만들겠다는 지극히 개인적인 목적으로 시작했다. 그런데 글을 쓰면서 개발을 진행해보니 귀차니즘이 어느정도 누그러지는 듯하다. 그래서 본격적인 개발 프로젝트에 대한 진척과 뻘짓을 기록하고자 카테고리를 따로 생성했다. 프로젝트 가능여부를 확인하기위해 react + firebase 서비스를 이용해 indexed DB를 활용한 테스트용 음악 재생 웹앱을 만들어 보았었다. 테스트 과정은 아래 포스트를 참조해주기 바란다. https://ddochea.tistory.com/86 [javascript] 브라우저의 indexedDB 및 WebSQL을 손쉽게 사용할 수 있는 localForage 라이브..
-
[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)..
-
[Javascript] 객체를 손쉽게 깊은 복사(Deep copy) 하는 라이브러리 fast-copy 소개Javascript & TypeScript 2021. 1. 26. 22:26
Java, .NET, javascript, python 등 개발에 사용하는 언어는 변수를 대입할때 기본적으로 얕은 복사(sallow copy)와 깊은 복사(deep copy)에 대한 개념이 존재한다. 얕은 복사와 깊은 복사에 대한 자세한 설명은 아래 링크로 접속해보기 바란다. https://velog.io/@th0566/Javascript-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC [Javascript] 얕은 복사, 깊은 복사 자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값 Number String Boolean Null Undefined 참조값 Object Symbol 원시값은 값을 복사 할 때 복사된..
-
[VSCode] NodeJS, Vue등 javascript 기반 프로젝트 간단하게 디버깅 모드 실행하기ETC 2021. 1. 23. 21:37
VSCode 에서 간단하게 디버깅하는 방법이다. Windows에서 테스트했다. VSCode에 한글 확장을 설치하지 않았으므로, 설명의 메뉴나 스크린샷은 모두 영어로 나온다. 1. Chrome 설치 (크로미움 엣지가 없을 경우) 크롬 기반의 브라우저로 디버깅이 되는 것 같다. 엣지만 설치된 환경에선 실패했다. lanuch.json 파일을 만들어서 적용한다면 가능할 수 있지만 "간단하게"가 주목적이므로 설정작업에 손 안대는 방법으로 진행하겠다. (님크없?) 2. 디버깅할 javacript 기반 프로젝트 열기 디버깅할 프로젝트 폴더를 VSCode로 연다. 3. javaScript Debug Terminal 실행 옆 메뉴란에 [Run] -> [javascript Debug Terminal] 을 선택하거나, VS..
-
[VueJS] Gridsome을 이용한 정적페이지 생성Javascript & TypeScript 2020. 8. 16. 18:26
Gridsome(길그리섬이 아니다.)은 VueJS 기반의 정적페이지 생성 도구이다. React의 Gatsby와 유사한 점이 많지만 gatsby와 달리 언급은 적은편이다. Vue 개발 커뮤니티에서 만든 vuepress도 존재하지만 문서작성에 최적화된 생성도구이다 보니 블로그 쪽은 그닥 이쁘지 않다. 반면 Gridsome은 Getsby처럼 Starter와 Plugin의 조합으로 여러 유형의 사이트 제작에 도움을 준다. Gridsome을 Cli 툴이다. 따라서 npm이나 yarn으로 grobal 설치를 해야한다. npm install --global @gridsome/cli 설치후엔 아래와 같은 명령어로 프로젝트를 생성할 수 있다. gridsome create {생성할 프로젝트명} 생성한 프로젝트 디렉토리로 ..