이전글 : PWA + Vue-CLI 3 학습하기 #2 - vuetify Axios Promise (비동기 로직 처리에 유용한 자바스크립트 객체) 기반의 API 통신(HTTP) 라이브러리. 뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다. npm - axios Cors CORS란 Cross Origin Resource Sharing의 약자로, 현재 Application의 도메인(웹페이지)에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 얘기합니다. 예를 들면, 웹페이지인 http://web.com 에서 API서버 URL인 http://ap..
이전글 PWA + Vue-CLI 3 학습하기 #1 Add CSS Framework 여러가지 모듈이 있지만 호환성이 좋은 메테리얼 기반의 UI를 제공하는 Vuetify를 add-on 해보자. $ vue add vuetify cs Choose a preset 에서 Default 를 선택합니다. Installing vue-cli-plugin-vuetify... + vue-cli-plugin-vuetify@0.5.0 added 1 package from 1 contributor and audited 30913 packages in 10.84s found 0 vulnerabilities ✔ Successfully installed plugin: vue-cli-plugin-vuetify ? Choose a pres..
From Vue CLI@vue/cli-plugin-pwaModern PWA with Vue-CLI 3 + Vuetify + Firestore + WorkboxVue.js + PWA + pre-render 프로젝트 틀 잡기 (legacy)Vue-Router 살펴보기CSS 뛰어넘기 (preprocessor)Vue-Cli 설치하기Vue-Cli 명령어를 사용하기 위해 설치를 합니다.# install vue-cli$ npm install -g @vue/cli # update vue-cli$ npm update -g @vue/cli # yarn exsample$ yarn global add @vue/cli # version$ vue --versioncsCreate Vue project vue 명령어를 통해 새로운 ..
from RxJS - Daum영화에 적용하다 2016년 개편된 Daum영화 프론트엔드 개발에는 ReactiveX의 JavaScript 라이브러리 RxJS 4를 사용했습니다.ReactiveX는 ReactiveX Introduction에서 callback의 문제점에 도움을 주는 것으로 소개가 되어 있습니다.웹에서는 Angular 2에 RxJS 5가 쓰이며 관심을 받았고, Android app개발에서도 RxJava가 여러 곳에 쓰이며 관심을 받고 있습니다.적용 당시 IE 브라우저 버전 대응 문제와 RxJS 5가 Beta 였던 이유로 RxJS 4를 적용했습니다.RxJS는 프론트엔드의 여러 이벤트들에 대한 비동기 처리에 도움을 주지만, 수많은 operator들과 함수형 프로그래밍 패러다임에 대한 이해를 해야 해서..
우리 대부분은 REST API를 만드는 데 매우 익숙 할 것입니다. GraphQL은 데이터 요구 사항과 상호 작용을 설명하기 위해 직관적이고 유연한 구문을 기반으로 클라이언트 응용 프로그램을 작성하기 위해 Facebook에서 만든 쿼리 언어입니다. GraphQL은 REST와 유사한 API의 가장 큰 단점 중 하나를 해결하도록 설계되었습니다. GraphQL 서비스는 이러한 유형에 대한 유형 및 필드를 정의한 다음 각 유형의 각 필드에 대한 기능을 제공하여 작성됩니다. GraphQL 기능 계층 구조 - 쿼리는 반환하는 데이터와 정확하게 같습니다. 클라이언트 지정 쿼리 - 클라이언트는 서버에서 가져올 내용을 자유롭게 지정할 수 있습니다. 강력한 형식 - 실행 전에 GraphQL 형식 시스템 내에서 구문 론적으..
from 웹 프로젝트는 PWA이어야 한다프랜시스 베리만Frances Berriman이 웹사이트의 새로운 종류를 설명하기 위해 "프로그레시브 웹 앱Progressive Web App(PWA)"이라는 말을 만든 이래, 이 개념이 정확히 무엇인지에 대해 많은 혼란이 있어 왔다. 알다시피 그녀의 남편인 알렉스 러셀Alex Russell은 PWA의 특징을 쉽게 설명하는 안내서를 만들었으며 다수의 문서와 블로그 포스트, 그리고 여러 컨퍼런스 강연에서 이 주제를 다뤘다. from Vue.js + PWA + pre-render 프로젝트 틀 잡기 (feat. AWS S3를 이용한 웹호스팅)이번 포스팅에서는 [ Vue.js + PWA + pre-render ] 조합의 웹앱을 [ AWS S3 + CloudFront ] 조합..
- Total
- Today
- Yesterday
- Web Development Tutorial
- 월간 깃헙 트렌드
- List of Useful Node.js Modules
- Vue Style Guide
- NAVER Tech Talk: FE devtalk
- Do it! Vue.js 입문 저자 블로그
- Eva Icons - 오픈소스 아이콘
- awesome-nodejs
- Node.js Documentation
- Pretty Awesome Lists
- 김정환블로그 - Node.js 코드랩
- TOAST UI - JavaScript UI libra…
- The Vue.js Cheat Sheet
- 1인 크리에이터 콘텐츠 연구소
- The Modern Javascript Tutorial
- Hacker News readers as PWA
- Awesome Vue.js
- CD
- pm2
- 자동배포
- 자동테스트
- OST
- gitlab
- CI
- tourbuddy
- 게임음악
- 투어버디
- 레인가드
- AWS
- 자돌빌드
- maven
- intellij
- 음악듣기
- nodejs
- portainer
- 추억
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |