app 썸네일형 리스트형 firebase hosting - 사용자 인증 구글 클라우드를 기반으로 제공하는 서비스. firebase라는 이름으로 보면 데이터베이스쪽으로 강한 느낌인데, 원래 firebase.com이라는 도메인으로 데이터베이스 서비스를 제공했었다. 구글 클라우드에 가입되어 있다면 바로 사용할 수있다. 구글 클라우드에도 앱엔진이라는 것이 있어 호스팅이 가능한데 부가적인 편의성의 제공한다. 앱엔진 처럼 서버에서 기능을 수행하는 것은 불가하고, 정적인 페이지 들만 서비스 가능하다. 생성되어 나오는 도메인도 구글 클라우드보다는 보기 좋다. 지저분한 숫자, 대쉬 조합 없이. 부가적인 기능중에 일단 눈에 띄는 편의성인 사용자 인증을 만들어 본다. 앱엔진으로도 가능은 하겠지만 좀 더 많은 노가다(?)가 필요. 쉽게 로그인 기능이라고 보면 되는데, 매번 사용자 디비 만들고, .. 더보기 앱엔진 크론잡 만들기 이전글에서 버전 넘버를 가져오는 방법을 알아봤는데, 페이지 요청시마다 확인하는 방법을 사용했다. 그런데, 이는 비효율적인 작업일 수있다. 특히나 앱엔진처럼 과금이 관련되니.. MavenCentral에 등록되는 라이브러리의 업데이트가 매분 혹은 매초 이루어져서 매번 확인이 필요하지는 않다. 하루에 한번씩만 미리 읽어 캐싱해 둘 수있는 크론 잡을 만들어보자. WEB-INF/cron.xml 파일을 만들어서 배포한다. 실제 작업 내용(/cacheMavenCentral)은 별도의 서블릿 제작이 필요하다. 이는 다음 포스트로... 참고 scheduling tasks with cron for javacron.xml ref 더보기 구글 앱엔진을 사용하여 MavenCentral에서 특정 라이브러리 최신 버전 넘버 가져오기 시작은 이랬다. gson 라이브러리의 최신 버전 넘버를 확인하고 싶었는데, 그때마다 MavenCentral에서 검색하자니 귀찮다. 개인 웹페이지에서 간단히 확인하고 싶었다. MavenCentral 검색은 REST API를 지원했다. 시도 1. https://search.maven.org/solrsearch/select?q=com.google.code.gson&a=gson&rows=1&wt=json 이렇게 브라우저에 입력하면 json 결과값을 리턴한다. 이걸 javascript로 받아 latestVersion 값만 뿌려주면 될 것같다. 위와 같은 코드를 넣고 실행해주면!.... firefox에서는 교차 출처 요청 차단: 동일 출처 정책으로 인해 https://search.maven.org/solrsearc.. 더보기 Web App Build Tools TL;DR 빌드 프로세스는 성능 최적화를 수행해야 한다. 자바스크립트, CSS, HTML, 이미지를 합치고(concatenate), 작게(minify) 만들어야 한다. tools Gulp - used for Web Starter KitGrunt Getting Started Pages Grunt Getting StartedGulp Getting StartedWeb Starter Kit Getting Started 더보기 Progressive Web App - Service Worker를 중심으로 - 2 Progressive Web App - Service Worker를 중심으로 - 1 에서 못다한 컨텐츠 캐시를 완성해 보자. 컨텐츠 네트웍으로 가져오기 및 캐시 저장 컨텐츠 캐시와 app shell의 다른점은 컨텐츠의 경우 app shell보다 변화의 빈도가 잦다는 것이다. 이를 위한 로직은 일단 캐시와 네트웍으로부터 모두 정보를 요청한 후 먼저 도착하는 정보를 보여주고, 캐시로부터 보여졌을 경우, 네트웍의 응답이 도착한 후 새로운 내용을 보여주는 것이다. 캐시 및 네트웍으로 요청먼저 도착한 내용 보여줌캐시 응답이 먼저 도착할 경우 내용 우선 표시 -> 네트웍 응답 후 캐시 및 표시 내용 변경네트웍 응답이 먼저 도착할 경우 캐시 변경 및 내용 표시가능한 경우 항상 네트웍 응답으로 표시 이제 앱은 오프라인.. 더보기 Tips for testing live service workers service worker가 unregister되어도 브라우저 창이 닫히기 전까지는 리스팅된 채로 남아있다.같은 앱을 사용하는 여러창이 열려있는 경우, 모든 창이 리로드되고 업데이트되기 전까지 새로운 service worker가 적용되지 않는다.service worker의 unregister는 캐시를 클리어하지는 않는다. 따라서 캐시 이름이 같은 경우 오래된 데이터를 가져올 수도 있다.만약 service worker가 있는 상태라면, 새로운 service worker의 등록은 페이지 리로딩 전까지는 효과가 나타지 않는다. immediate control을 사용하지 않는다면. 크롬에서 service worker 정보확인은 chrome://serviceworker-internals! 더보기 Progressive Web App - Service Worker를 중심으로 - 1 아주 새롭고 어려운 이야기인 것 같지만 따지고 보면 progressive web app 이라는 단어만 사용하지 않았을 뿐 상당부분 이미 웹 제작과정에서 많이 사용하고 있는 기술이다. 우선, application shell 이라는 것이 무엇인지 정의해 보자. 단순하게 이해해보면, 웹 제작에서 ajax의 사용이 일반화 되었고 이를 통한 비동기식 컨텐츠 로딩이 사용되고 있다. 이때 ajax call을 통해 내용이 채워지기전의 페이지를 application shell이라고 보면 된다. 따라서, shell은 unix에서 사용하는 shell이라는 의미보다는 '껍데기라'는 원래의 뜻으로 해석하는 것이 적당해 보인다. 간단 요약본 은 여기 참조. application shell은 빠르게 로딩 되어야하고, 캐시 되어야하.. 더보기 이전 1 다음
