SPA SPA 사이트에서 TreasureData에 PV를 보내는 방법. 일반적으로 GTM의 "pageview"이벤트를 트리거하고 TreasureData에 PV를 보냅니다. 미디어 사이트 "WWD JAPAN.com ( )"는 SPA (단일 페이지 애플리케이션) 때문에 일반 GTM의 "pageview"에서는 PV를 TreasureData에 정확하게 전송할 수 없었다. GTM, SPA에서 TreasureData에 대한 PV 전송 설정은 다음과 같습니다. SPA 페이지... SPAGoogleTagManagerTreasureData Google 태그 관리자, Google 애널리틱스를 사용한 YouTube 임베디드 동영상 측정(모달 창, SPA 지원) Google Tag Manager(GTM)에 YouTube 임베디드 동영상 측정 기능이 추가되었습니다. 사이트에 포함된 YouTube 동영상의 조회수, 재생 시간, 재생 상태를 Google analytics(GA)에 쉽게 보낼 수 있는 기능입니다. 지금까지는 YouTube Player API를 사용하여 프로그래밍하여 GA에 이벤트를 보낼 필요가 있었다. iframe 내장 YouTube Pla... SPAGoogleTagManagerYouTubeGoogleAnalytics GAE와 Angular로 일반 SPA를 만드는 방법 GAE/Go 를 백엔드로 한 Angular 에 의한 보통의 SPA 를 만드는 방법에 대해 기사를 몇개인가 쓰고 있으므로 정리해 본다. 기사 설명 코드 Angular 및 GAE/Go 애플리케이션 편지지 만들기 편지지 애플리케이션을 GAE에 배포 OAuth를 사용하여 인증하여 사용자 만들기 액세스 토큰을 사용하여 Angular에서 GAE로 요청 권한 부여 처리 구현... AngularSPAGAE5gcp laravel + vue.js에서 SPA를 개발하고 디버깅을 원합니다! ! ! SPA라면 laravel의 에러 내용이나 변수 등의 내용을 브라우저에 돌려줄 수 없지만 디버깅을 하고 싶다! 인용 결론 이를 위해,,, laravel debugbar와 clock work를 모두 composer로 설치해야합니다. 이것은 항상 그렇습니다. 이쪽의↓READ ME를 참고로 개발 환경에 인스톨 이것은 SPA라고 HTML로 돌아오지 않는 디버그의 결과를 Chrome의 개발자 툴로 확인... SPAVue.js라라벨 SPA에서 어떻게 HTTP 요청이 날 수 있는지 NuxtJS에서 확인 SPA를 시작할 때, 어떻게 HTTP 요청이 날고 있는지 파악하고 싶었기 때문에 확인해 보았습니다. 확인한 nuxt의 버전은 2.11.0입니다. 에 기재된 대로 SPA 의 어플리케이션을 작성합니다. pages 에 index.vue 만 있는 상태입니다. npm run dev 에서 응용 프로그램을 시작하고 http://localhost:3000 에 액세스합니다. 이러한 요청이 날아갑니다. 그런 ... SPAnuxt.js S3에 정적 HTML 파일 및 SPA 스크립트를 배치하고 게시 S3는 파일을 보완할 뿐만 아니라, 다음의 순서를 밟는 것으로 HTTP 서버로서도 이용할 수 있습니다. EC2와 같은 서버를 설치하지 않아도 HTML 페이지를 쉽게 게시할 수 있습니다. 비용은 파일 사이즈나 액세스수를 베이스로 계산되어 싸고 간단하게 정보 공개를 할 수 있으므로 추천입니다. 버킷을 만들지 않은 경우 Create bucket 버튼을 눌러 S3 버킷을 만듭니다. 중복되지 않는 버... HTMLSPAS3React jQuery로 간단한 SPA 샘플을 만들어 보았습니다. SPA를 본격적으로 구현한다면 React나 Vue를 구현하는 것이 좋을 것입니다만, 간단한 SPA이면 jQuery에서도 구현은 가능합니다. 완성 이미지는 아래와 같이 되어 첨부 이미지의 노란 부분만 바뀝니다. spa 클래스가 붙은 div 태그를 jQuery로 덮어 씁니다. HTML 해시에 대응한 파일명의 HTML을 준비해 둡니다. 예: 해시가 #page1인 경우 page1.html을 로드하도... SPA자바스크립트jQuery Nuxt.js (SPA) + Firebase 웹 서비스로 강제 업데이트 (리비전 업 대책) SPA는 매우 훌륭하지만 Hosting에 업로드해도 즉시 업데이트되지 않습니다. 예를 들어, 유지보수 화면으로 변경해도 캐시가 남아 유지보수 모드가 되지 않는다고 합니다. 이 을 보면, React로 강제적으로 리비전 업하는 방법이 실려 있었으므로, Nuxt.js에서도 할 수 없는지 해 보았을 때의 비망록. 추가 2018/10/17 씨의 기사에 의하면, 별로 좋지 않은 방법과 같다. PWA에서... FirebaseFirebaseHostingSPAnuxt.js웹 서비스 Error: An AuthUI instance already exists for the key "[DEFAULT]"에 대한 해결책 SPA에서 Firebase AuthUI를 다룰 때 Error: An AuthUI instance already exists for the key "[DEFAULT]" 라고 표시될 수 있다. 문제의 부호는 ↓이다. 이미 AuthUI가 존재하고 있음에도 불구하고 ui.delete()를 호출하지 않고 다시 new 해 버리는 것이 문제 인 것 같습니다. 간단한 해결책으로, ↑ 코드 ↑와 같이하면된다... SPAFirebase자바스크립트TypeScript [SPA] TypeScript 소스 파일 하나에 백엔드와 프런트 엔드 코드를 집계 물론 .js 파일도 출력하지 않습니다. 통상이면, 백엔드는 ts-node에 의해 뒤로 컴파일되는 형태를 만들 수 있습니다만, 프런트엔드는 그렇게 되지 않습니다. 소스 코드 하나로 둘 다 움직이는 등 보통이 될 수 없습니다. ※소스 코드를 짧게 하기 위해, 본래 필요한 체크를 여러가지 생략하고 있습니다 이번에는 생성 코드를 <script> 태그에 끼워넣고 있습니다만, express와 제휴시켜 ... TypeScriptSPA자바스크립트초보자Node.js Vue.js에서 입력 양식 수를 동적으로 제어하는 방법 이러한 느낌의 형식의 오브젝트 데이터를 복수 등록하는, 참가하고 있는 프로젝트에서 바로 그런 처리를 쓸 기회가 있었으므로 소개합니다. 기능은 아래와 같습니다. 1. 서버에서 가져온 데이터를 양식에 표시합니다. 3. 일부 양식의 문자 수 표시 일단 프런트 측에서의 거동은 얼른 위와 같습니다. 서버측의 갱신 처리는, 일단 데이터를 지우고 나서 보내 온 것으로 덮어쓰는 방법이면, 전면 측에서 송신... Vue.js양식자바스크립트SPA Firebase Hosting에서 SPA를 다시 로드할 때 Page Not Found가 될 때의 조치 Firebase Hosting에 created-react-app로 작성한 SPA를 호스팅했는데, 리로드시에 Page Not Found가 되어 버렸기 때문에 대책을 정리합니다. 추가 $ firebase init 때때로 이미지처럼 SPA URL의 거동을 설정할 수 있는 질문이 있는 것 같습니다. "Configure as a single-page app..."부분입니다. 이것을 y + Enter ... SPAFirebase 【Firebase Hosting】SPA인 사이트에서 Page Not found와 나왔다 React.js (SPA)로 구축 된 사이트를 Firebase Hosting을 사용하여 배포하면, 다음과 같이 404 Page Not Found 라고 표시되었다. firebase.json에서 Hosting을 설정하는 데 문제가있는 것 같습니다. 변경 전 firebase.json 변경 후 firebase.json 이것을 추가했습니다. 참조 :... FirebaseReactFirebaseHostingSPA자바스크립트 【비망록】Service Worker 개요 Service Worker는 PWA의 근간을 지원하는 기능. 기존의 웹 앱은 페이지를 열지 않으면 데이터를 수신할 수 없다. 현대 웹 아키텍처의 기능을 사용한 웹 앱에서도 네이티브 앱에 상관없는 기능이 있었다. 그 때문에, 페이지를 닫고 있을 때에는, 백그라운드에서의 갱신이나 Push 통지의 수신을 할 수 없다. Service Worker는 이 과제를 해결한다. · Service Worker... ServiceWorkerPWA프런트 엔드비망록SPA 자바스크립트 경량 프레임워크 xatto 터치 보기 아울러 이쪽도 봐 주세요. JavaScript로 만든 경량 프레임 워크입니다. 자바 스크립트 프레임 워크의 유명한 곳에서 Angular React Vue.js 등이 있지만, 이 중에서 말하면 React에 가까운 느낌입니다. 그건 그렇고, 내 환경은 다음과 같습니다. 데모가 있기 때문에 그것을 움직이자. 되면 성공입니다. 브라우저에서 방문하면 카운터 데모가 표시됩니다. [-]나 [+]를 클릭하... SPAxatto자바스크립트framework Specialty store retailer of Private label Apparel Specialty store retailer of Private label Apparel 참조입니다. The Analysis of the SPA Apparel Company Strategy UNIQLO Business Model Maeil Business Newspaper The Big 3: Fast Fashion (SPA) Brands and Strategies Feature of Offi... SPA SPA 프런트 엔드 개발, 쉽게 JavaScript로 가상 윈도우 시스템을 처리하는 모듈 SPA(SinglePageApplication)에 의한 프런트 엔드 개발은, UI를 구성하는 비용이 엄청나게 큰 것이 넥이 됩니다. 가능한 경우 쉽게 구현하고 싶은 곳입니다. 그래서 최소한의 코딩으로 나름의 UI를 만들 수 있는 프레임워크를 개발했습니다. IE11이나 GoogleBot에도 대응하고 있습니다. 일반적인 프런트 엔드 프레임 워크와의 차이는 윈도우를 기본 단위로하는 곳입니다. 그리... TypeScriptSPA자바스크립트Node.jswebpack SPA 사이트에서 Chartbeat에 PV를 보내는 방법. 일반적으로 GTM의 'pageview' 이벤트를 트리거하고 Chartbeat에 PV를 보냅니다. 미디어 사이트 "WWD JAPAN.com ( )"는 SPA (단일 페이지 응용 프로그램) 때문에 일반 GTM의 "pageview"에서는 PV를 Chartbeat에 정확하게 보낼 수 없었다. GTM, SPA에서 Chartbeat에 대한 PV 전송 설정은 다음과 같습니다. SPA 페이지의 초기 로드 ... SPAGoogleTagManagerChartbeat Netlify에서 처음으로 OGP on SPA Cocoda!의 일부가 로그인하지 않고 볼 수 있는 사양이 되어, OGP를 표시시키고 싶어졌습니다. 처음 OGP 대응 이었기 때문에 기억으로 남겨 둡니다. Twitter에서 공유할 때 OGP가 페이지별로 동적으로 바뀌어 표시되도록 하고 싶다! OGP를 설정하지 않으면 공유하면 아래와 같은 간단한 인상이됩니다. 그냥 공유했을 때 잘 말하지 않았던 것 같아서 사용하겠습니다. 공유하거나 공유하고 ... ReactSPAOGPNetlify자바스크립트 Angular에서 Cropper.js를 사용하는 방법과 빠는 포인트 웹 앱을 만들 때 이미지를 자르고 서버로 보내고 싶을 때가 있습니다. 이런 경우에 트리밍을 하는 UI와 트리밍 기능을 제공해 주는 것이 Cropper.js입니다. 매우 간단한 라이브러리이지만 Angular에서 사용할 때 조금 빠졌기 때문에 기록을 남겨 둡니다. Cropper는 트리밍 라이브러리이며 jQuery 용과 기본 JavaScript 용입니다. jQuery 용 기본 JavaScript ... AngularSPA자바스크립트웹 서비스cropper vue.js에 대한 지식 요약 vue.js의 공부를 해 가끔 나오는 워드의 해설을 이 기사에 실어 둡니다. SPA는 "Single Page Application"의 이니셜을 취한 웹 애플리케이션의 아키텍처입니다. 장점 1. 일반 웹 페이지에서는 실현할 수 없는 사용자 경험을 실현할 수 있다. 2. 고속 페이지 천이를 실현할 수 있다. 3. 네이티브 앱의 대안으로 제공될 수 있다. 단점 1. 구현 비용이 크게 증가합니다. ... SPAVue.js [페이지 전환하지 않는 웹 시스템] TypeScript를 사용한 Window Framework 이전부터 JavaScript의 윈도우 프레임워크 자체는 개발을 하고 있었다. 그러나 타겟 환경을 IE11(GoogleBot가 이해할 수 있는 레벨)로 정하고 있었기 때문에, class의 사용조차 허락되지 않고 꽤 불편한 생각을 하고 있었다. 프레임 윈도우를 2개 표시 프레임 윈도우 안에는, 좌우를 분할하는 스플리터와 트리 뷰를 표시 트리 뷰의 아이템을 클릭하면, 버튼이 생성되어 드래그 드롭으... TypeScriptHTMLSPA자바스크립트CSS SPA(SinglePageApplication)의 천적 document.write에 대항하는 ～광고 코드는 영원히～ SPA로 페이지를 전환하지 않고 광고 삽입 그것은 document.write입니다. 노드의 말미에 HTML을 강제 추가하는 document.write를 실행하면(자), 곤란했다고 밖에 말이 없는 상태가 된다. 원래 document.write가 자신이 원하는 위치에 데이터를 삽입하면 모든 문제가 해결되는 것이다. 'document.write'를 쏟아 오는 상대로서 라쿠텐이나 Amazon의 광고... 웹HTMLSPA자바스크립트CSS Vue + Nuxt + Firebase에서 SPA (그 1) 1 firebase에서 프로젝트 추가 2 vue+nuxt 설정 부터 시작합니다. 오른쪽 상단의 Go to console을 클릭합니다. 새 프로젝트 만들기 프로젝트 및 국가 이름 입력 에서 새 프로젝트 만들기를 클릭하여 프로젝트 만들기 방문하면 다음 웹 페이지가 열려 있어야합니다. public/index.html 사이에 붙여 넣자. 화면에 deploy했습니다. 가 표시됩니다. 계속은 또 기재하... SPAVue.jsnuxt.js 【Vue.js】Todo 앱에 삭제 기능을 구현해 본다 이 기사에서는 이런 식으로 Vue.js만으로 ToDo 앱 삭제 기능을 구현합니다! 덧붙여서 에서 ToDo 앱을 만들고 있었으므로 참고까지 봐 주세요! 물론 v-on:click을 사용하여 클릭 이벤트를 채울 수 있습니다. 그래서 deleteItem이라는 메소드로 삭제해 봅시다. 이번은 deleteItem(index)로 하여 몇번째의todo를 삭제할까를 지시할 수 있도록(듯이) 합니다. 그때, ... Vue.jsSPA자바스크립트 Angular 폼 제작법에 대해 Angular6에서 이런 좁은 메뉴를 만들었다. jquery라면 간단한 폼이지만, Angular라고 2개의 항목으로 좁힐 때, 헤매었으므로 메모 test.ts test.html test.scss Angular6이라면 ngModel이라든지 다양한 폼 주위의 소작을 할 때에 쓰는 방법이 있는 것 같습니다만 좀처럼 익숙하지 않다. 그 밖에도 좀 더 깨끗하게 하는 방법 있겠지만. 조언 구한다.... SPAAngular6 라쿠텐 제휴를 싱글 페이지 업로케이션(SPA)에 표시시킨다 in Vue.js SPA로 구축된 사이트에 라쿠텐 어필리에이트의 모션 위젯을 표시시키고 싶었지만, 그냥 어피리에이트 소스를 복사하는 것만으로는, 표시할 수 없었으므로 해결법을 소개. 라쿠텐 모션 위젯이라고 하는, 유저에게 추천된 상품이 표시되는 위젯. 소스는 script 태그로 구성되어 있어 로드하면 이 소스를 붙여 넣은 부분에 iframe이 표시되는 사양인 것 같다. 통상이라면, 단지 html 파일에 복사만... 제휴Vue.jsSPA Rails+Vue.js로 SPA/PWA인 가계부 앱 만들었다 아내와 「가계부 붙여야 한다」라는 이야기가 되어, 공부하고 있던 Rails+Vue.js인 환경에서 조속히 만들어 보았다. 이런 느낌으로 SPA처럼 동작한다. 김에 PWA화도 하고 있으므로 스마트폰에서도 PC에서도 잘 움직여준다. 소스 코드는 이쪽 기본적으로는 이하의 기사를 참고로 컴퍼넌트의 작성이나 데이터의 송신등을 실시했다. 그래서 특별히 곤란할 수도 있는 부드럽게 할 수 있었다. 디자인 ... SPAVue.jsPWARails 【Nuxt.js편】Nuxt.js+Contentful+Netlify로 SPA 블로그를 자작한다 Nuxt.js와 Contentful과 Netlify로 현대적인 (?) SPA 블로그를 만들었습니다. 여러 번에 걸쳐 구축의 기록을 남기고 있는 시리즈의 제2회입니다. 이번에는 SPA 사이트를 쉽게 만들 수 있는 프레임워크인 Nuxt.js에 대해 써 갑니다. 【시리즈의 예정】 - Nuxt.js편 ← 이 기사 의 기본을 알고 있다고 가정합니다. 아직 한 적이 없는 분은 을 해 봅시다. 먼저 에 ... SPANetlifyVue.jsnuxt.jscontentful 이전 기사 보기
SPA 사이트에서 TreasureData에 PV를 보내는 방법. 일반적으로 GTM의 "pageview"이벤트를 트리거하고 TreasureData에 PV를 보냅니다. 미디어 사이트 "WWD JAPAN.com ( )"는 SPA (단일 페이지 애플리케이션) 때문에 일반 GTM의 "pageview"에서는 PV를 TreasureData에 정확하게 전송할 수 없었다. GTM, SPA에서 TreasureData에 대한 PV 전송 설정은 다음과 같습니다. SPA 페이지... SPAGoogleTagManagerTreasureData Google 태그 관리자, Google 애널리틱스를 사용한 YouTube 임베디드 동영상 측정(모달 창, SPA 지원) Google Tag Manager(GTM)에 YouTube 임베디드 동영상 측정 기능이 추가되었습니다. 사이트에 포함된 YouTube 동영상의 조회수, 재생 시간, 재생 상태를 Google analytics(GA)에 쉽게 보낼 수 있는 기능입니다. 지금까지는 YouTube Player API를 사용하여 프로그래밍하여 GA에 이벤트를 보낼 필요가 있었다. iframe 내장 YouTube Pla... SPAGoogleTagManagerYouTubeGoogleAnalytics GAE와 Angular로 일반 SPA를 만드는 방법 GAE/Go 를 백엔드로 한 Angular 에 의한 보통의 SPA 를 만드는 방법에 대해 기사를 몇개인가 쓰고 있으므로 정리해 본다. 기사 설명 코드 Angular 및 GAE/Go 애플리케이션 편지지 만들기 편지지 애플리케이션을 GAE에 배포 OAuth를 사용하여 인증하여 사용자 만들기 액세스 토큰을 사용하여 Angular에서 GAE로 요청 권한 부여 처리 구현... AngularSPAGAE5gcp laravel + vue.js에서 SPA를 개발하고 디버깅을 원합니다! ! ! SPA라면 laravel의 에러 내용이나 변수 등의 내용을 브라우저에 돌려줄 수 없지만 디버깅을 하고 싶다! 인용 결론 이를 위해,,, laravel debugbar와 clock work를 모두 composer로 설치해야합니다. 이것은 항상 그렇습니다. 이쪽의↓READ ME를 참고로 개발 환경에 인스톨 이것은 SPA라고 HTML로 돌아오지 않는 디버그의 결과를 Chrome의 개발자 툴로 확인... SPAVue.js라라벨 SPA에서 어떻게 HTTP 요청이 날 수 있는지 NuxtJS에서 확인 SPA를 시작할 때, 어떻게 HTTP 요청이 날고 있는지 파악하고 싶었기 때문에 확인해 보았습니다. 확인한 nuxt의 버전은 2.11.0입니다. 에 기재된 대로 SPA 의 어플리케이션을 작성합니다. pages 에 index.vue 만 있는 상태입니다. npm run dev 에서 응용 프로그램을 시작하고 http://localhost:3000 에 액세스합니다. 이러한 요청이 날아갑니다. 그런 ... SPAnuxt.js S3에 정적 HTML 파일 및 SPA 스크립트를 배치하고 게시 S3는 파일을 보완할 뿐만 아니라, 다음의 순서를 밟는 것으로 HTTP 서버로서도 이용할 수 있습니다. EC2와 같은 서버를 설치하지 않아도 HTML 페이지를 쉽게 게시할 수 있습니다. 비용은 파일 사이즈나 액세스수를 베이스로 계산되어 싸고 간단하게 정보 공개를 할 수 있으므로 추천입니다. 버킷을 만들지 않은 경우 Create bucket 버튼을 눌러 S3 버킷을 만듭니다. 중복되지 않는 버... HTMLSPAS3React jQuery로 간단한 SPA 샘플을 만들어 보았습니다. SPA를 본격적으로 구현한다면 React나 Vue를 구현하는 것이 좋을 것입니다만, 간단한 SPA이면 jQuery에서도 구현은 가능합니다. 완성 이미지는 아래와 같이 되어 첨부 이미지의 노란 부분만 바뀝니다. spa 클래스가 붙은 div 태그를 jQuery로 덮어 씁니다. HTML 해시에 대응한 파일명의 HTML을 준비해 둡니다. 예: 해시가 #page1인 경우 page1.html을 로드하도... SPA자바스크립트jQuery Nuxt.js (SPA) + Firebase 웹 서비스로 강제 업데이트 (리비전 업 대책) SPA는 매우 훌륭하지만 Hosting에 업로드해도 즉시 업데이트되지 않습니다. 예를 들어, 유지보수 화면으로 변경해도 캐시가 남아 유지보수 모드가 되지 않는다고 합니다. 이 을 보면, React로 강제적으로 리비전 업하는 방법이 실려 있었으므로, Nuxt.js에서도 할 수 없는지 해 보았을 때의 비망록. 추가 2018/10/17 씨의 기사에 의하면, 별로 좋지 않은 방법과 같다. PWA에서... FirebaseFirebaseHostingSPAnuxt.js웹 서비스 Error: An AuthUI instance already exists for the key "[DEFAULT]"에 대한 해결책 SPA에서 Firebase AuthUI를 다룰 때 Error: An AuthUI instance already exists for the key "[DEFAULT]" 라고 표시될 수 있다. 문제의 부호는 ↓이다. 이미 AuthUI가 존재하고 있음에도 불구하고 ui.delete()를 호출하지 않고 다시 new 해 버리는 것이 문제 인 것 같습니다. 간단한 해결책으로, ↑ 코드 ↑와 같이하면된다... SPAFirebase자바스크립트TypeScript [SPA] TypeScript 소스 파일 하나에 백엔드와 프런트 엔드 코드를 집계 물론 .js 파일도 출력하지 않습니다. 통상이면, 백엔드는 ts-node에 의해 뒤로 컴파일되는 형태를 만들 수 있습니다만, 프런트엔드는 그렇게 되지 않습니다. 소스 코드 하나로 둘 다 움직이는 등 보통이 될 수 없습니다. ※소스 코드를 짧게 하기 위해, 본래 필요한 체크를 여러가지 생략하고 있습니다 이번에는 생성 코드를 <script> 태그에 끼워넣고 있습니다만, express와 제휴시켜 ... TypeScriptSPA자바스크립트초보자Node.js Vue.js에서 입력 양식 수를 동적으로 제어하는 방법 이러한 느낌의 형식의 오브젝트 데이터를 복수 등록하는, 참가하고 있는 프로젝트에서 바로 그런 처리를 쓸 기회가 있었으므로 소개합니다. 기능은 아래와 같습니다. 1. 서버에서 가져온 데이터를 양식에 표시합니다. 3. 일부 양식의 문자 수 표시 일단 프런트 측에서의 거동은 얼른 위와 같습니다. 서버측의 갱신 처리는, 일단 데이터를 지우고 나서 보내 온 것으로 덮어쓰는 방법이면, 전면 측에서 송신... Vue.js양식자바스크립트SPA Firebase Hosting에서 SPA를 다시 로드할 때 Page Not Found가 될 때의 조치 Firebase Hosting에 created-react-app로 작성한 SPA를 호스팅했는데, 리로드시에 Page Not Found가 되어 버렸기 때문에 대책을 정리합니다. 추가 $ firebase init 때때로 이미지처럼 SPA URL의 거동을 설정할 수 있는 질문이 있는 것 같습니다. "Configure as a single-page app..."부분입니다. 이것을 y + Enter ... SPAFirebase 【Firebase Hosting】SPA인 사이트에서 Page Not found와 나왔다 React.js (SPA)로 구축 된 사이트를 Firebase Hosting을 사용하여 배포하면, 다음과 같이 404 Page Not Found 라고 표시되었다. firebase.json에서 Hosting을 설정하는 데 문제가있는 것 같습니다. 변경 전 firebase.json 변경 후 firebase.json 이것을 추가했습니다. 참조 :... FirebaseReactFirebaseHostingSPA자바스크립트 【비망록】Service Worker 개요 Service Worker는 PWA의 근간을 지원하는 기능. 기존의 웹 앱은 페이지를 열지 않으면 데이터를 수신할 수 없다. 현대 웹 아키텍처의 기능을 사용한 웹 앱에서도 네이티브 앱에 상관없는 기능이 있었다. 그 때문에, 페이지를 닫고 있을 때에는, 백그라운드에서의 갱신이나 Push 통지의 수신을 할 수 없다. Service Worker는 이 과제를 해결한다. · Service Worker... ServiceWorkerPWA프런트 엔드비망록SPA 자바스크립트 경량 프레임워크 xatto 터치 보기 아울러 이쪽도 봐 주세요. JavaScript로 만든 경량 프레임 워크입니다. 자바 스크립트 프레임 워크의 유명한 곳에서 Angular React Vue.js 등이 있지만, 이 중에서 말하면 React에 가까운 느낌입니다. 그건 그렇고, 내 환경은 다음과 같습니다. 데모가 있기 때문에 그것을 움직이자. 되면 성공입니다. 브라우저에서 방문하면 카운터 데모가 표시됩니다. [-]나 [+]를 클릭하... SPAxatto자바스크립트framework Specialty store retailer of Private label Apparel Specialty store retailer of Private label Apparel 참조입니다. The Analysis of the SPA Apparel Company Strategy UNIQLO Business Model Maeil Business Newspaper The Big 3: Fast Fashion (SPA) Brands and Strategies Feature of Offi... SPA SPA 프런트 엔드 개발, 쉽게 JavaScript로 가상 윈도우 시스템을 처리하는 모듈 SPA(SinglePageApplication)에 의한 프런트 엔드 개발은, UI를 구성하는 비용이 엄청나게 큰 것이 넥이 됩니다. 가능한 경우 쉽게 구현하고 싶은 곳입니다. 그래서 최소한의 코딩으로 나름의 UI를 만들 수 있는 프레임워크를 개발했습니다. IE11이나 GoogleBot에도 대응하고 있습니다. 일반적인 프런트 엔드 프레임 워크와의 차이는 윈도우를 기본 단위로하는 곳입니다. 그리... TypeScriptSPA자바스크립트Node.jswebpack SPA 사이트에서 Chartbeat에 PV를 보내는 방법. 일반적으로 GTM의 'pageview' 이벤트를 트리거하고 Chartbeat에 PV를 보냅니다. 미디어 사이트 "WWD JAPAN.com ( )"는 SPA (단일 페이지 응용 프로그램) 때문에 일반 GTM의 "pageview"에서는 PV를 Chartbeat에 정확하게 보낼 수 없었다. GTM, SPA에서 Chartbeat에 대한 PV 전송 설정은 다음과 같습니다. SPA 페이지의 초기 로드 ... SPAGoogleTagManagerChartbeat Netlify에서 처음으로 OGP on SPA Cocoda!의 일부가 로그인하지 않고 볼 수 있는 사양이 되어, OGP를 표시시키고 싶어졌습니다. 처음 OGP 대응 이었기 때문에 기억으로 남겨 둡니다. Twitter에서 공유할 때 OGP가 페이지별로 동적으로 바뀌어 표시되도록 하고 싶다! OGP를 설정하지 않으면 공유하면 아래와 같은 간단한 인상이됩니다. 그냥 공유했을 때 잘 말하지 않았던 것 같아서 사용하겠습니다. 공유하거나 공유하고 ... ReactSPAOGPNetlify자바스크립트 Angular에서 Cropper.js를 사용하는 방법과 빠는 포인트 웹 앱을 만들 때 이미지를 자르고 서버로 보내고 싶을 때가 있습니다. 이런 경우에 트리밍을 하는 UI와 트리밍 기능을 제공해 주는 것이 Cropper.js입니다. 매우 간단한 라이브러리이지만 Angular에서 사용할 때 조금 빠졌기 때문에 기록을 남겨 둡니다. Cropper는 트리밍 라이브러리이며 jQuery 용과 기본 JavaScript 용입니다. jQuery 용 기본 JavaScript ... AngularSPA자바스크립트웹 서비스cropper vue.js에 대한 지식 요약 vue.js의 공부를 해 가끔 나오는 워드의 해설을 이 기사에 실어 둡니다. SPA는 "Single Page Application"의 이니셜을 취한 웹 애플리케이션의 아키텍처입니다. 장점 1. 일반 웹 페이지에서는 실현할 수 없는 사용자 경험을 실현할 수 있다. 2. 고속 페이지 천이를 실현할 수 있다. 3. 네이티브 앱의 대안으로 제공될 수 있다. 단점 1. 구현 비용이 크게 증가합니다. ... SPAVue.js [페이지 전환하지 않는 웹 시스템] TypeScript를 사용한 Window Framework 이전부터 JavaScript의 윈도우 프레임워크 자체는 개발을 하고 있었다. 그러나 타겟 환경을 IE11(GoogleBot가 이해할 수 있는 레벨)로 정하고 있었기 때문에, class의 사용조차 허락되지 않고 꽤 불편한 생각을 하고 있었다. 프레임 윈도우를 2개 표시 프레임 윈도우 안에는, 좌우를 분할하는 스플리터와 트리 뷰를 표시 트리 뷰의 아이템을 클릭하면, 버튼이 생성되어 드래그 드롭으... TypeScriptHTMLSPA자바스크립트CSS SPA(SinglePageApplication)의 천적 document.write에 대항하는 ～광고 코드는 영원히～ SPA로 페이지를 전환하지 않고 광고 삽입 그것은 document.write입니다. 노드의 말미에 HTML을 강제 추가하는 document.write를 실행하면(자), 곤란했다고 밖에 말이 없는 상태가 된다. 원래 document.write가 자신이 원하는 위치에 데이터를 삽입하면 모든 문제가 해결되는 것이다. 'document.write'를 쏟아 오는 상대로서 라쿠텐이나 Amazon의 광고... 웹HTMLSPA자바스크립트CSS Vue + Nuxt + Firebase에서 SPA (그 1) 1 firebase에서 프로젝트 추가 2 vue+nuxt 설정 부터 시작합니다. 오른쪽 상단의 Go to console을 클릭합니다. 새 프로젝트 만들기 프로젝트 및 국가 이름 입력 에서 새 프로젝트 만들기를 클릭하여 프로젝트 만들기 방문하면 다음 웹 페이지가 열려 있어야합니다. public/index.html 사이에 붙여 넣자. 화면에 deploy했습니다. 가 표시됩니다. 계속은 또 기재하... SPAVue.jsnuxt.js 【Vue.js】Todo 앱에 삭제 기능을 구현해 본다 이 기사에서는 이런 식으로 Vue.js만으로 ToDo 앱 삭제 기능을 구현합니다! 덧붙여서 에서 ToDo 앱을 만들고 있었으므로 참고까지 봐 주세요! 물론 v-on:click을 사용하여 클릭 이벤트를 채울 수 있습니다. 그래서 deleteItem이라는 메소드로 삭제해 봅시다. 이번은 deleteItem(index)로 하여 몇번째의todo를 삭제할까를 지시할 수 있도록(듯이) 합니다. 그때, ... Vue.jsSPA자바스크립트 Angular 폼 제작법에 대해 Angular6에서 이런 좁은 메뉴를 만들었다. jquery라면 간단한 폼이지만, Angular라고 2개의 항목으로 좁힐 때, 헤매었으므로 메모 test.ts test.html test.scss Angular6이라면 ngModel이라든지 다양한 폼 주위의 소작을 할 때에 쓰는 방법이 있는 것 같습니다만 좀처럼 익숙하지 않다. 그 밖에도 좀 더 깨끗하게 하는 방법 있겠지만. 조언 구한다.... SPAAngular6 라쿠텐 제휴를 싱글 페이지 업로케이션(SPA)에 표시시킨다 in Vue.js SPA로 구축된 사이트에 라쿠텐 어필리에이트의 모션 위젯을 표시시키고 싶었지만, 그냥 어피리에이트 소스를 복사하는 것만으로는, 표시할 수 없었으므로 해결법을 소개. 라쿠텐 모션 위젯이라고 하는, 유저에게 추천된 상품이 표시되는 위젯. 소스는 script 태그로 구성되어 있어 로드하면 이 소스를 붙여 넣은 부분에 iframe이 표시되는 사양인 것 같다. 통상이라면, 단지 html 파일에 복사만... 제휴Vue.jsSPA Rails+Vue.js로 SPA/PWA인 가계부 앱 만들었다 아내와 「가계부 붙여야 한다」라는 이야기가 되어, 공부하고 있던 Rails+Vue.js인 환경에서 조속히 만들어 보았다. 이런 느낌으로 SPA처럼 동작한다. 김에 PWA화도 하고 있으므로 스마트폰에서도 PC에서도 잘 움직여준다. 소스 코드는 이쪽 기본적으로는 이하의 기사를 참고로 컴퍼넌트의 작성이나 데이터의 송신등을 실시했다. 그래서 특별히 곤란할 수도 있는 부드럽게 할 수 있었다. 디자인 ... SPAVue.jsPWARails 【Nuxt.js편】Nuxt.js+Contentful+Netlify로 SPA 블로그를 자작한다 Nuxt.js와 Contentful과 Netlify로 현대적인 (?) SPA 블로그를 만들었습니다. 여러 번에 걸쳐 구축의 기록을 남기고 있는 시리즈의 제2회입니다. 이번에는 SPA 사이트를 쉽게 만들 수 있는 프레임워크인 Nuxt.js에 대해 써 갑니다. 【시리즈의 예정】 - Nuxt.js편 ← 이 기사 의 기본을 알고 있다고 가정합니다. 아직 한 적이 없는 분은 을 해 봅시다. 먼저 에 ... SPANetlifyVue.jsnuxt.jscontentful 이전 기사 보기