컴퓨터이야기15 PC에서 유튜브뮤직 앱처럼 쓰기 유튜브 프리미엄을 이용하면 유튜브 뮤직도 이용이 가능하다.아이폰이나 안드로이드에서는 간단하게 앱을 다운받아 사용하면 되지만, PC에서는 사이트에 매번 직접 들어가야하는 번거로움이 있다.이러한 번거로움을 해소하기위해 유튜브 뮤직은 PWA 형태로 제작되어 PC에서도 모바일 애플리케이션 처럼, 앱 형태로 이용할 수가 있다. 맥에서 유튜브 뮤직 앱 설치하기 1. 먼저 크롬 브라우저에서 https://music.youtube.com/에 접속한다.2. 브라우저의 주소창에 우측에 십자 모양 아이콘(+)이 표시되는데 해당 아이콘을 클릭한다. 3. 아이콘을 클릭하면 "앱을 설치하시겠습니까?"라는 다이얼로그가 표시되는데, 설치 버튼을 누른다. 4. 설치가 완료되면 맥의 런치패드에 유튜브 뮤직 애플리케이션이 설치된 것을 볼.. 2020. 2. 9. Webpack, Babel, React 시작하기 원문 : Tutorial: How to set up React, Webpack 3, and Babel, in 2017 Webpack, Babel, React 시작하기 리액트는 대부분 SPA(Single Page Application)를 만들기 위해 사용됩니다. 그러나 Webpack과 Babel를 이용하여 웹사이트에 적용할 수 있습니다. 대부분의 초보자들이 Webpack과 React를 접목시키는 방법을 모르기에 간단한 튜토리얼을 준비 했습니다. 무엇을 배울 수 있나요? Webpack을 설치하고 설정하는 법 Babel을 설치하고 설정하는 법 React를 설치하는 법 컨테이너 컴포넌트와 프리젠테이션 컴포넌트를 작성하는 법 번들된 파일을 HTML 페이지에 포함하는 법 Webpack Dev Server를 설치하고.. 2018. 1. 9. React 시작하기 #3 React에서 사용하는 ECMAScript6 (ES6) 문법 1. Block scoped variables ES6에서 새로 등장한 변수 형태는 let과 const이다. let은 기존의 var를 대체하는 block varibale 이고, const는 상수로써 한번 선언이 되면 값을 변경 할 수 없다. 이들 두 변수는 block scope 내부에서만 존재하며, 임시사각지대인 TDZ가 존재한다. TDZ (Temporal Dead Zone) 임시사각지대, block scope 내에서는 지역변수/상수에 대한 hoisting이 이뤄지기는 하나, 선언된 위치 이전까지는 해당 변수/상수를 인식하지 못한다. 즉, hoisting은 하지만 var 처럼 undefined로 값을 초기화 시키지는 않는다. { let a = 1.. 2017. 5. 7. React 시작하기 #2 Webpack Tutorial 참조하여 나름대로 번역 및 정리해 보았습니다 :D 대체 webpack을 왜 사용할까? 현실적으로 webpack을 사용하는 이유는 아래와 같다. .js 파일들을 하나로 bundle할 수 있다. Frontend 코드에 npm 패키지를 사용할 수 있다. babel을 사용하여 ES6/ES7 자바스크립트 코드를 작성할 수 있다. 코드를 Minify하고 Optimize 할 수 있다. LESS나 SCSS를 CSS 형태로 변환할 수 있다. Hot Moudle Replacement(HMR)를 사용할 수 있다. 자바스크립트에 모든 유형의 파일을 포함할 수 있다. 엄청나게 많은 고급 기능들이 있다. 왜 이러한 기능이 필요할까? js 파일 번들 : 자바스크립트들 모듈 형태로 작성이 가능하다. 때.. 2017. 5. 7. React 시작하기 #1 본 포스팅은 Guide 문서가 아니라 제가 공부하고 이해했던 것들을 끄적이는 글 입니다 :D 들어가기에 앞서 국내 Front-end 시장에서 Front-end 개발자들이 알아야하는 녀석들이라 함은 Angular2와 React 이 두 녀석들 일 것이다. 물론 js에 대한 이해도는 기본적으로 깔려있다는 전재겠지? 개인적인 의견이니.. 아무튼 Angular2는 GOOGLE에서 만든 Framework이고 React는 Facebook에서 만든 Library이다. 그런데 Framework는 무엇이고 Library는 무엇일까? 사전적인 의미는 다음과 같다. Framework : 뼈대, 틀Library : 도서관, 서재 사전적 의미를 토대로 내 나름대로 해석해보자면 Framework는 대부분의 기능을 제공해주지만 틀 .. 2017. 4. 16. 구글 크롬 구버전 설치 및 업데이트 막기! 크롬을 사용하다 보면 자동적으로 업데이트가 되는데, 되던 기능이 안되거나 하는 불편한 점이 있습니다. 저도 갑자기 되던 기능이 되지않아서 업데이트를 막는 방법을 찾다가 랜섬웨어도 걸릴뻔 하고 아주 큰 곤욕을 치뤘네요^^; 포스팅을 작성하는 날 기준(2016/12/06) 크롬 최신 버전은 55로 알고있는데요. 첨부파일에 구버전 46버전 업로드 해 놓았습니다. 일단 크롬을 삭제하시기 전에 북마크등을 백업해 놓으시고 삭제를 추천해 드립니다. 기존 크롬을 삭제하신 뒤 구버전을 재설치 합니다. 그리고 난 뒤 아래의 방법을 따라하시면 됩니다. Windows OS에만 적용 됩니다. 구글 크롬 업데이트 막기 첫번째 1. Window Key + R을 눌러 실행 박스를 띄운다. (또는 시작-> 실행) 2. msconfig.. 2016. 12. 6. 자바스크립트 속도 향상 TIP #타입형변환을 쓰게 하지 말아라 - 한번 선언된 변수의 타입을 유지하는 게 좋다. #오브젝트를 재구조하지 말아라 - delete 연산을 사용하는 것 보단 null값을 넣어 주는게 더 빠르다. #속성을 나중에 추가하지 말아라 #String 연산시 + 대신 += / join 연산을 사용하라. #현재 Scope보다 높거나/전역 변수의 접근을 하지마라. #jQuery가 항상 필요하진 않다. $('input').keyup(function() { if($(this).val() === 'blah') { ... } }); 보다 $('input').keyup(function() { if(this.value === 'blah') { ... } }); 이런 식으로 사용하는게 속도향상에 도움을 준다. 원문 : https://.. 2015. 2. 9. [안드로이드] 블루투스 장치목록 가져오기, 장치 연결/해제 이벤트 받기 안드로이드 장치에서 블루투스 장치목록 가져오기, 장치 연결/해제 이벤트 받기 먼저 AndroidManifest.xml 파일에 use-permission에 "android.permission.BLUETOOTH" 와 "android.permission.BLUETOOTH_ADMIN" 두개를 추가합니다. 블루투스 기기의 리스트는 BluetoothAdapter의 getBondedDevices() 메소드로 가져올 수 있습니다. 아래의 주석을 참고 하시면 코딩에 도움이 되실 겁니다. //블루투스 Adapter를 가져온다 BluetoothAdapter mBlueToothAdapter = BluetoothAdapter.getDefaultAdapter(); if(mBlueToothAdapter == null){ // 만약.. 2014. 7. 17. WWDC 2014 - 새로운 프로그래밍언어 Swift 안녕하세요, 행중이입니다. 한국시간 2014년 6월 3일 새벽 2시 경 애플의 2014 WWDC가 열렸었죠. OSX의 10.10 공개, iOS 8의 공개와 더불어 Swift라는 새로운 프로그래밍 언어도 공개하였습니다. Swift란? Swift(스위프트)란 C언어의 호환성의 제약 없이, C와 Objcetive-C를 바탕으로 iOS와 OS X를 위한 새로운 프로그래밍 개발 언어입니다. 스위프트는 안전한 프로그래밍 패턴을 적용하여 쉽고, 유연하고, 더 즐거운 프로그래밍 할 수 있도록 현대적인 기능을 추가하였습니다. 기존의 Cocoa와 Cocoa-touch를 지원하는 Swift는 어떻게 소프트웨어를 만들 것인가 재디자인하는 기회를 주는 프로그래밍 언어입니다. 스위프트 개발방법, 가이드라인은 이미 공개가 되었습니.. 2014. 6. 3. [폰갭] 폰갭(PhoneGap) 플러그인 - 노티피케이션(Notification) 1 폰갭(PhoneGap) 플러그인 - 노티피케이션(Notification) 1 오랜만에 포스팅하네요. 오늘 소개해드릴 건 폰갭의 플러그 인 중 Notification 플러그인을 소개해드리려합니다. 그냥 웹브라우저의 Notification이 아닌 모바일 디바이스가 지원하는 Notification을 사용하는 방법입니다. 주의!! 어떤 이유인지는 모르나 플랫폼을 추가하고 빌드하기전에 플러그인을 설치하시기 바랍니다. 이미 빌드 후에 플러그인을 추가하여 실행하면 logcat에 cannot found error 가 발생됩니다. 먼저 이전 포스트인 폰갭 설치하기2를 참조하여 새로운 프로젝트를 만들고, 만들어진 프로젝트 폴더로 이동합니다. cordova create 폴더명 com.앱개발자.앱이름 프로젝트명 cd 폴더명 .. 2014. 2. 25. [폰갭] 폰갭(PhoneGap) 설치하기 2 이전 포스트 폰갭 설치하기 1과 이어집니다. 폰갭(PhoneGap) 설치하기 2 자 이전 포스트에서 폰갭을 설치하였습니다. 그럼 이제 안드로이드 프로젝트를 만들어 보겠습니다 명령어는 cordova create hello com.example.helloworld HelloWorld입니다. create뒤에 나오는 hello는 프로젝트를 생성할 폴더 이름입니다. 그 뒤에 나오는 com.example.hello는 프로젝트의 도메인이구요. 어떻게 하시던 상관은 없지만 통상적으로 com.으로 시작하여 앱개발자. 그리고 앱이름으로 적습니다. 그리고 맨 마지막의 HelloWorld는 앱이 시작했을때 보여줄 텍스트 입니다. 다시 설명 드리자면 CLI를 이용하여 앱을 생성하는 방법은 cordova 앱이름 com.앱개발사/.. 2014. 1. 27. [폰갭] 폰갭(PhoneGap) 설치하기 1 폰갭(PhoneGap) 설치하기 1 폰갭을 설치하기 전에 어떤 플랫폼에 앱을 올릴지 결정 해야 한다고 했죠? 저는 일단 안드로이드 플랫폼에 제 앱을 올릴 예정입니다. 그려려면 안드로이드 개발환경이 갖추어져 있어야 합니다. 1. JAVA JRE 설치하기 http://www.java.com/ko/download/manual.jsp 에서 자신에게 맞는 OS를 선택하여 받으시면 됩니다. 설치경로는 기억해 두셔야 합니다. 설치 할때 설치 경를 따로 지정하시지 않았다면 기본적으로 "C:\Program Files\Java\jre버전정보" 으로 되어 있을 것입니다. 2.JAVA JDK 설치하기 http://www.oracle.com/technetwork/java/javase/downloads/index.html에 JA.. 2014. 1. 24. 이전 1 2 다음
