본문 바로가기

Development

(239)
Nativescript-Vue(네이티브스크립트) 로 모바일 앱 개발기 - 1 (채택 동기 및 개발환경구축) 일단 완성도 되지 않았는데 포스팅을 시작한다. 정리겸 실제로 삽질까지도 기록하기 위함. 혹시 이 글을 보시는 분들중 공유해주실 사항있으시면 공유 및 가르침 부탁 드립니다. 먼저 Nativescript-Vue(이하 NS) 를 선택해서 시작한건 다른 이유없습니다. 다른 언어를 공부할 시간도 없고.. (정말 없음 ㅠ) 빠르게 아웃풋을 보고 싶었기 때문입니다. 그리고 이미 Vue/Nuxt 로 빠른 생산성을 경험했기 때문에 기대감이 컸죠. 현재 Vue/Nuxt.js 로 개발한 끼니퍼 입니다. 현재 목표는 특별한거 없이 이 서비스를 NS 로 하이브리드 앱을 만들기 입니다. 이제 개발환경을 구축하는 것 부터 시작해야 하겠죠? 무작정 https://nativescript-vue.org/ko/ 로 접속하여 시작하는 방법..
CSS 스크롤바 (Custom) 스크롤바에도 CSS 속성을 부여할 수가 있다. 현재 디버깅용으로 데이터 확인하기 위해 엘리먼트만들었는데.. 디버깅용이라 해도 이뻤으면 좋게엤다~ CSS 코드 /* Debugging Element */ [data-storage] { opacity:0; position:fixed; right:-9999999px; top:-9999999px; z-index:9999999 } [data-storage][debug] { opacity:.8; right:10px !important; top:10px !important; width:200px; height:200px; overflow:auto; background-color:rgab(15,82,144,.54) !important; color:#fff !importa..
Node.js (Express.js) 304 / GET >> 엄청느려짐 ㅠ 언제부턴가 엄청나게 Node.js (Express.js) 로 구축한 API 서버에서 굉장히 응답을 늦게 하기 시작했다. 하지만 신기한건 모바일 웹에서는 정상적으로 빠르게 응답하는데 모바일 앱 (WebView) 에서는 엄청나게 느리게 응답했다. 하지만 일단 현재로서 처리한건 Express.js 에 etag 를 생성하지 않도록 설정한 것 이었다. 아직 명확한 의미는 모르겠으나 일단 정리전 메모 성격의 포스트를 한다. const express = require('express'); const app = express(); app.use(express.json()); // 동적요청에 대한 응답을 보낼때 etag 를 생성하지 않도록 app.set('etag', false); // 정적요청에 대한 응답을 보낼때 e..
NPM 패키지 만들기 NPM 패키지 만들때 상황에 따라서 필요한 내용을 포스팅 합니다. 사내 유틸리티 메소드를 NPM 패키지로 관리하기 이 글은 Node.js의 패키지 매니저인 NPM과 Git 저장소를 이용한 사내 라이브러리 관리를 다루고 있습니다. changjoopark.medium.com NPM 패키지 만들기 | {bbon} 자주 사용되는 기능을 Typescript 로 작성해서 NPM 에 게시한 후 다른 프로젝트에서 사용하고 싶어 NPM 에 패키지를 어떻게 공개하는지를 확인했습니다. 저는 @bbon 스코프를 사용해서 @bbon/formatter 패 bbon.kr
Nuxt.js PWA (Progressive Web App) 참고 링크 Nuxt.js PWA 적용기 Nuxt PWA 적용기 0. PWA란? PWA는 구글에서 밀고 있는 웹기술로 progress web app의 역자입니다. 대표적인 기능으로는 푸시 알람, 오프라인 지원, 앱 같이 설치 된다는 점입니다. 일단 저는 푸시 알람과 오프라인 지원은 완벽하게 지원되는 단계가 아닌 어떻게 도입할 수 있는지에 대해서 서술해보려고 합니다. 나중에 둘 다 도입 및 해결하게 되면 추가적으로 ... velog.io 위 링크에서 너무나 깔끔하고 디테일하게 설명되어있습니다.
JAVASCRIPT 서비스 성능 테스트 LightHouse React.js / Vue.js 등등 자바스크립트로 개발된 서비스에 대하여 성능테스트를 할 수 있다. 약간의 수고(?) 를 더하면 지속적으로 체크해가면서 성능 향상을 시도해 볼 수 있을것 같다. 이 소프트웨어는 구글에서 제공하는 것으로 크롬 확장프로그램으로도 사용할 수 있다. (링크) 현재 Vue/Nuxt 로 프로젝트를 진행하고 마무리 단계에서 성능문제를 확인해볼 필요가 있었다. 다음에는 LightHouse 를 이용하여 성능 테스트하며 향상 시키는 과정을 포스팅 해보자. 관련링크 How we got a 100% Lighthouse performance score for our Vue.js app
PWA - Manifest.json Generator (생성) PWA (Progressive Web App) 에서 필수적인 manifest.json 파일을 생성시 파이어베이스에서 생성해준다. 아래 그림에서 필요한 부분을 입력하고 Generate!!!! 그리고 위와같이 생성된 파일 루트디렉토리 밑에 지정하여 위치하고 다음과 같이 메타태그를 등록해준다. URL : https://app-manifest.firebaseapp.com/ App Manifest Generator manifest.json Generate Icons The Web App Manifest allows for specifying icons of varying sizes. Upload a 512x512 image for the icon and we'll generate the remaining size..
Vue/Nuxt.js - v-html CSS (scoped) 에 스타일이 적용안되는 현상 Vue/Nuxt 에서 개발할때 컴포넌트에서 영역에서 속성을 부여하면 해당 컴포넌트에서만 스타일이 적용된다. 그런데 v-html 속성을 통해서 렌더링된 HTML 코드에는 Vue-Loader 를 통하지 않기 때문에 scoped 를 지정했는데도 스타일이 적용이 되질 않는다. .page img { width:100% !important } 이 문제는 렌더링 순서에 따른 문제인데 다음과 같이 Deep Selector(딥셀렉터)로 지정되면 해결된다. .page >>> img { width:100% !important; } 링크

반응형