[javascript] Nuxt.js란 무엇인가?

가이드 : https://ko.nuxtjs.org/guide

GitHub : https://github.com/nuxt/nuxtjs.org

Nuxt.js란 무엇인가?

Nuxt.js는 범용 Vue.js 애플리케이션을 만들기 위한 프레임워크로, 주요 범위는 클라이언트/서버 배포를 추상화하면서 UI 렌더링 을 하는 것입니다.

우리의 목표는 Nuxt.js를 기반 프로젝트로 하거나 Node.js 기반의 프로젝트에 추가해서 사용할 수 있도록 충분히 유연한 프레임워크를 만드는 것입니다.

Nuxt.js는 더 즐거운 서버 사이드 렌더링 Vue.js 애플리케이션 개발을 위해 필요한 모든 설정들이 미리 준비되어 있습니다.

또한 우리는 nuxt generate 라고 부르는 배포 옵션을 제공하며, 이는 Vue.js 애플리케이션을 정적으로 생성 하는 옵션입니다. 이 옵션이 마이크로 서비스를 지향하는 웹 애플리케이션 개발의 다음 단계가 될 수 있다고 생각합니다.

Nuxt.js 프레임워크는 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 많은 기능을 제공합니다.

어떻게 동작합니까?

Nuxt.js는 훌륭한 웹 애플리케이션을 만들기 위해 아래의 기능들을 포함합니다:

• Vue 2
• Vue-Router
• Vuex (store 옵션을 사용할 때만 포함됩니다.)
• Vue-Meta

총 용량은 28kb min+gzip 밖에 되지 않습니다. (vuex를 포함하면 31kb입니다.)

vue-loader와 babel-loader와 함께 Webpack을 사용해서 코드를 묶고, 분할하며, 압축합니다.

특징

• Vue 파일 작성
• 코드 분할 자동화
• 서버 사이드 렌더링
• 비동기 데이터 기반의 강력한 라우팅 시스템
• 정적 파일 전송
• ES6/ES7 지원
• JS & CSS 코드 번들링 및 압축
• HTML head 태그 관리
• 개발 단계에서 핫 리로딩 사용하기
• 전 처리기 지원: SASS, LESS, Stylus 등

구조

아래의 구조는 <nuxt-link>를 서버가 호출하거나 이를 통해 사용자가 이동한 경우, nuxt.js가 어떻게 동작하는지를 보여줍니다:

...

[javascript] Vue.js - 트렌지션 상태

https://kr.vuejs.org/v2/guide/transitioning-state.html

Vue의 전환 시스템은 진입, 진출 및 목록을 애니메이션으로 만드는 많은 간단한 방법을 제공하지만 데이터 자체에 대한 애니메이션은 어떻게 해야할까요?

• 숫자와 계산
• 색 표시
• SVG노드의 위치
• 엘리먼트의 크기 및 기타 속성

이들 모두는 이미 원시 숫자로 저장되어 있거나 숫자로 변환 될 수 있습니다. 그렇게하면 Vue의 반응성 및 컴포넌트 시스템과 함께 써드파티 라이브러리를 사용하여 트윈 상태로 상태 변경 사항을 애니메이션으로 만들 수 있습니다.

...

구글지도에 영상도 올릴 수 있는데, 우리나라 명소들은 구글지도에서 보면 사진도 부족하고, 

아쉽기만하다.  

구글지도에서 우리나라 "한라산", "설악산"  검색해보고,  

미국의 "El capitan" 검색해보면 답이 보인다. 

외국인 관광 유치하려면 이런 부분도 신경써야하지 않을까? 우리도 외국가면 구글지도로 다 찾아보지않나? 

“구글 지도에 영상으로 리뷰 남기세요”

http://www.bloter.net/archives/288540

동영상은 대세다. 짧은 시간 노출되더라도 텍스트나 이미지보다 더 큰 효과를 불러올 수 있으므로 어떤 플랫폼이든 동영상 포맷에 큰 노력을 들이고 있다. 구글 지도도 예외는 아니다.

구글은 구글 지도에서 ‘구글 지역 가이드’로 활동하는 사람들이 짧게나마 영상 리뷰를 남길 수 있도록 8월25일(현지시간) 새로운 업데이트를 발표했다. 물론 등록된 영상은 지역 가이드뿐만 아니라 모두가 볼 수 있다.

구글 지역 가이드는 구글 지도에 후기 작성, 사진 공유, 지역에 대한 질문 답변, 장소 추가 또는 수정, 정보의 사실관계 확인을 위해 구글이 만든 글로벌 커뮤니티이다. 누구든 자신의 위치를 선택하고 클릭 몇 번으로 가입해 활동할 수 있다. 구글 가이드에게는 정보에 대한 보상으로 포인트와 구글 서비스 무료 이용권을 제공한다.

이번 업데이트로 구글 지역 가이드 활동자에 한해 영상 리뷰를 등록할 수 있는 기능이 생겼다. 영상 리뷰를 등록하는 방법은 2가지로, 간단하다.

방법 1. 영상을 바로 찍어 올리기

– 구글 검색·지도에서 원하는 장소를 검색한 뒤 정보 페이지에 들어간다.
– 아래로 스크롤 해 ‘사진 추가’를 누른다.
– ‘카메라’ 선택 후 사진 셔터 버튼을 꾹 누르면 영상이 촬영된다. (단, 10초 이하 영상)

방법 2. 갤러리에서 영상을 선택해 올리기

– 구글 검색·지도에서 원하는 장소를 검색한 뒤 정보 페이지에 들어간다.
– 아래로 스크롤 해 ‘사진 추가’를 누른다.
– ‘폴더’ 선택 후 원하는 영상을 선택해 업로드 한다. (30초 이하로 영상 추가 가능)

영상을 촬영하고 올릴 때는 구글 리뷰 정책 및 새로운 오디오 콘텐츠 정책을 준수해야 한다. 현재 영상을 업로드 기능은 구글 지도 안드로이드 기기에서만 이용할 수 있다. 웹브라우저에서는 업로드는 할 수 없지만, 영상 리뷰를 보는 것은 가능하다.

구글은 해당 기능은 몇 주에 걸쳐 점차 적용될 예정이며, 올리는 영상에 따라 지급되는 포인트 규정도 점차 업데이트될 계획이라고 전했다.

🏃 Person Running

[javascript] Vue.js - 전환효과

https://kr.vuejs.org/v2/guide/transitions.html

패키지 :  https://unpkg.com/vue

전환 효과

개요

Vue는 항목이 DOM에 삽입, 갱신 또는 제거 될 때 전환 효과를 적용하는 다양한 방법을 제공합니다. 여기에는 다음과 같은 도구가 포함됩니다.

• CSS 전환 및 애니메이션을 위한 클래스를 자동으로 적용합니다.
• Animate.css와 같은 타사 CSS 애니메이션 라이브러리 통합
• 전환 훅 중에 JavaScript를 사용하여 DOM을 직접 조작
• Velocity.js와 같은 써드파티 JavaScript 애니메이션 라이브러리 통합

이 페이지에서는 진입, 진출 및 목록 전환만 다루지만 다음 섹션에서는 전환 상태 관리를 볼 수 있습니다.

Vue.js 컴포넌트간-전환

Vue.js 리스트 전환

Vue.js 리스트-이동-전환

Vue.js - 리스트 진입/진출/이동 전환

Vue.js - 비틀거리는목록/동적전환

...

[OpenSource] UNPKG

unpkg는 Michael Jackson이 만들고 유지 관리 하는 open source project  입니다.

Vue.js 는 "https://unpkg.com/vue" 로 연결해서 사용하고 있다. 

unpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:

Examples

Using a fixed version:

• unpkg.com/react@15.3.1/dist/react.min.js
• unpkg.com/react-dom@15.3.1/dist/react-dom.min.js

You may also use a semver range or a tag instead of a fixed version number, or omit the version/tag entirely to use the latest tag.

• unpkg.com/react@^15/dist/react.min.js
• unpkg.com/react/dist/react.min.js

If you omit the file path, unpkg will serve the package's "main" file.

• unpkg.com/jquery
• unpkg.com/three

Append a / at the end of a URL to view a listing of all the files in a package.

• unpkg.com/react/
• unpkg.com/lodash/

Query Parameters

?main=:mainField

The name of the field in package.json to use as the main entry point when there is no file path in the URL. Defaults to using unpkg, browser, and then main.

?meta

Return metadata about any file in a package as JSON (e.g. /any/file?meta)

?module

Expands all "bare" import specifiers in JavaScript modules to unpkg URLs. This feature is very experimental

Sponsors - 무보수의 강력한 글로벌 인프라는 Cloudflare 와 Heroku가 기부합니다 .

Cache Behavior

CDN은 npm 패키지 버전을 포함하여 영구 URL을 기반으로 모든 파일을 캐시합니다. 이는 npm이 패키지 작성자가 이미 동일한 버전 번호로 다른 패키지로 게시 된 패키지를 덮어 쓸 수 없기 때문에 가능합니다.

패키지 버전 번호를 지정하지 않은 URL은 패키지 버전 번호로 리디렉션됩니다. 이것은이다 latest어떤 버전이 지정되지 않은 버전, 또는 maxSatisfying때 버전 semver 버전이 제공됩니다. 리디렉션은 5 분 동안 캐시됩니다.

브라우저는 Cache-Control헤더 를 통해 자산을 4 시간 동안 캐시 하도록 지시 받습니다.

Support

unpkg는 무료이며 최선의 노력을 기울이는 서비스이며 가동 시간 또는 지원 보장을 제공 할 수 없습니다.

나는 그것을 계속 실행하기 위해 최선을 다하지만 때로는 일이 잘못 될 수 있습니다. 내 통제 범위 밖에서 네트워크 또는 공급 업체 문제가있는 경우가 있습니다. 때로는 까다로운 트래픽이 일시적으로 응답 시간에 영향을 미칩니다. 때로는 뭔가 바보 같은 짓을해서 일을 망쳐 놓지 만, 나는하지 않으려 고 노력합니다.

unpkg의 목표는 npm 패키지 작성자에게 번거롭지 않은 CDN을 제공하는 것입니다. 데모 및 교육 자료를 만드는 사람들에게 유용한 자료이기도합니다. 그러나 비즈니스에 중요한 파일을 제공하는 데 의존하는 경우 잘 지원되는 인프라와 가동 시간 보장을 갖춘 호스트에 비용을 지불해야합니다.

unpkg는 npm, Inc.와 어떤 식 으로든 제휴 또는 지원되지 않습니다. unpkg에 도움이 필요하면 npm에게 연락하지 마십시오.

...