본문 바로가기

Development236

Nuxt.js PWA (Progressive Web App) 참고 링크 Nuxt.js PWA 적용기 Nuxt PWA 적용기 0. PWA란? PWA는 구글에서 밀고 있는 웹기술로 progress web app의 역자입니다. 대표적인 기능으로는 푸시 알람, 오프라인 지원, 앱 같이 설치 된다는 점입니다. 일단 저는 푸시 알람과 오프라인 지원은 완벽하게 지원되는 단계가 아닌 어떻게 도입할 수 있는지에 대해서 서술해보려고 합니다. 나중에 둘 다 도입 및 해결하게 되면 추가적으로 ... velog.io 위 링크에서 너무나 깔끔하고 디테일하게 설명되어있습니다. 2019.10.10
JAVASCRIPT 서비스 성능 테스트 LightHouse React.js / Vue.js 등등 자바스크립트로 개발된 서비스에 대하여 성능테스트를 할 수 있다. 약간의 수고(?) 를 더하면 지속적으로 체크해가면서 성능 향상을 시도해 볼 수 있을것 같다. 이 소프트웨어는 구글에서 제공하는 것으로 크롬 확장프로그램으로도 사용할 수 있다. (링크) 현재 Vue/Nuxt 로 프로젝트를 진행하고 마무리 단계에서 성능문제를 확인해볼 필요가 있었다. 다음에는 LightHouse 를 이용하여 성능 테스트하며 향상 시키는 과정을 포스팅 해보자. 관련링크 How we got a 100% Lighthouse performance score for our Vue.js app 2019.10.10
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.. 2019.10.10
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; } 링크 2019.10.10
[펌] VueJS 로 개발하면서 겪은 삽질들 출처 : [VueJS] VueJS 로 개발하면서 겪은 삽질들 [VueJS] VueJS로 개발하면서 겪은 삽질들 현재 VueJS + Vuex + Nuxt 로 학습 & 개발하고 있다. medium.com 위 링크가 본문이며 퍼온글입니다. 현재 VueJS + Vuex + Nuxt 로 학습 & 개발하고 있다. 우선 api 만 보면서 열심히 학습하면서 삽질을 하고 있는데, api 내용에 정확히 명시되지 않아서 고생했던(?) 것들을 남겨본다. api에 용어는 한글이 아닌 영어 그대로 명시했으면 좋겠다. (번역하신 분께 테클은 아닙니다) computed: 계산된, watch: 감시자, method: 메소드 computed: set () {} => 계산된 setter 계산된은 도대체 무엇이며 watch는 왜 감시자에서.. 2019.10.01
[펌] Node.js MySql PoolCluster https://ifsnow.github.io/nodejs/2017/08/29/advanced-poolcluster-of-mysql-pool-booster.html 2019.05.18
Nuxt.js Axios CORS Error 삽질기록 : Nginx + Nuxt.js / Axios, CORSNuxt.js / nuxt.config.js 에 설정된 모듈(modules) 에서 설정된 axios 모듈(https://axios.nuxtjs.org) 을 사용하던 중 CORS 이슈가 발생하였다.현재 개발중인 서비스의 구성인 Nginx + Nuxt.js 프록시로 구성되어있다. 80 : Nginx ( http://www.jkun.net )3000 : Nuxt ( http://localhost:3000 ) 이 중 POST 로 통신을 하다보니 다음과 같은 에러가 발생하는 이슈였다. Failed to load http://www.jkun.net: Response to preflight request doesn't pass access control.. 2019.02.15
Nuxt.js / SSR / 비동기 데이터 서버사이드 렌더링시 주의사항 정말.. 말도 안되게 삽질을 했어서 포스팅을 하게되었다. Nuxt.js 로 프로젝트를 진행하던 중서버사이드 렌더링을 해야하는 구간에서 비동기데이터를 조회하여 처리하는 과정이다.사전에 Nuxt.js 라이프사이클을 이해하는게 중요하다. 요약하자면 다음과 같다. 상황 : 전역컴포넌트 (GNB) 와 데이터 리스트를 SSR 처리해야하는 상황나는 다음과 같이 처리하였다. 1. Vuex 의 State 를 구성// 생략 2. Vuex 에서 nuxtServerInit 메소드를 async/await 으로 비동기 처리수행. 3. Vuex 의 Store 중 dispatch 하기위한 actions 의 메소드역시 async/await 으로 구성하여 작성. 4. 서비스 전역에서 사용하기 위하여 미들웨어를 작성하여 nuxt.conf.. 2019.02.13
console.log textColor Reset = "\x1b[0m" Bright = "\x1b[1m" Dim = "\x1b[2m" Underscore = "\x1b[4m" Blink = "\x1b[5m" Reverse = "\x1b[7m" Hidden = "\x1b[8m" FgBlack = "\x1b[30m" FgRed = "\x1b[31m" FgGreen = "\x1b[32m" FgYellow = "\x1b[33m" FgBlue = "\x1b[34m" FgMagenta = "\x1b[35m" FgCyan = "\x1b[36m" FgWhite = "\x1b[37m" BgBlack = "\x1b[40m" BgRed = "\x1b[41m" BgGreen = "\x1b[42m" BgYellow = "\x1b[43m" BgBlue = "\x1b[.. 2019.02.12
[펌] PHPStore 에서 코드이그나이터 설정 phpstorm 에서 codeigniter 자동완성 사용하는 방법 PHPStore 2017 인데도 잘 됨 2019.01.11
Node.js + Oracle Node.js 에서 오라클을 연결해야할 일이 생겼다.해서 테스트 해본 환경은 맥과 우분투 리눅스 였다. 원리는 같으나 방식은 약간 다르다. 이 포스팅은 우분투를 기준으로 (18.04) 작성합니다. 방식은 여러가지이나 zip 파일을 풀고 심볼릭링크로 연결하는 방식 기준에 대해 설명합니다. 먼저 이 작업을 진행하기에 참고한 링크(클릭하시면 이동합니다.) 입니다. 작업에 대한 순서는 다음과 같습니다. OCI ( Instant Oracle Clinet ) 다운로드. ( OS 에 맞게 다운로드 하세요. ) [다운로드 경로]Unzip라이브러리 링크연결 설정1. OCI찾은김에 귀찮아서 로컬에서 다운로드 받고 FTP 로 업로드 함. 먼저 다운로드 받은 OCI 를 /opt/oracle 디렉토리를 생성하여 옮겨놓음. 2... 2018.12.31
Nginx / PM2 / Vue/Nuxt - Load Banlancing (로드밸런싱) Nginx 에서 PM2 패키지 모듈을 이용하여 Vue/Nuxt App 인스턴스를 로드밸런싱 처리 하는 것에 대하여 포스팅 합니다.이 방식은 어떻게든 처리하여 테스트를 보겠다는 목적이 있으나, 수정되어야 하거나 다른 효율적이고 세련된 방법이 있으면 답글/공유 부탁드립니다. ^^ ( 제가 많이 부족합니다. ^^;; ) 테스트 환경은 MacOS X(Mojave) 입니다. 먼저 이 작업을 진행하는 과정에서 구글링을 통하여 다음 포스팅들로 구조 이해하고 정리하였습니다.How to load Balancing NodeJs apps using Nginx?Docker, NodeJS, Nginx! 너로 정했다!일단 내가 원하는 다음과 같았습니다. 프로젝트 빌드 후 운영모드 (Production) 로 각각의 포트로 인스턴스.. 2018.11.29
Vue.js Life Cycle Vue.js 라이프사이클출처 : https://vuejs.org/ 2018.11.26
Node.js 를 우분투 환경설정 Node.js 를 개발환경에서 구축하기란 참으로 쉬웠다. 공식홈페이지 (https://nodejs.org) 에서 OS 에 맞게 다운로드 받고설치하면 그 뿐이었는데, 실제 환경으로 올려서 빌드하고 서비스를 띄우려고 하니... 갑갑해졌다;;그래서 다음과 같이 순서를 정하여 진행하였다.우분투 (18.04 LTS) 에 Node.js 설치서비스 구동Example // Server.jsNuxt/Express기존에 설치된 엔진엑스 (Nginx) 에 구동된 Node.js 서비스를 Proxy프로세스 관리 1. 우분투 (18.04 LTS) 에 Node.js 설치 먼저 Node.js 를 설치해야 하는데 설치하고자 하는 버전을 깃허브에 들어가서 확인할 수 있다. Node.js Source GITHUB $ apt-get ins.. 2018.10.22
lodash & underscore 라이브러리 소스코드를 보다 보니 _.method() 로 시작하는 코드들이 있길래 보니 lodash 라는 모듈(라이브러리) 이었다.해서 내용을 확인해보니 여기 잘 정리되어 있었다.쓰더라도 이유나 용도를 알고 써야겠다는 생각으로. 링크 : 자바스크립트 라이브러리 Lodash와 Underscore 알아보기 자바스크립트 인기 라이브러리 중 하나인 Lodash와 underscore 알아보려합니다. 소스 코드를 보면 _.test() 처럼 _로 시작하는 코드를 볼 수 있습니다. 이 코드는 위 라이브러리 소스로 자주 사용되는 라이브러리 툴입니다. 위 두 라이브러리 모두 자바스크립트를 확장하여 편리하게 코드를 작성하거나 웹표준, 크로스 브라우징에 많이 사용됩니다. 이처럼 Lo-dash와 underscore가 인기를 끄는 이유는 아.. 2018.10.08
css pinch zoom 찾다보니 까먹을까 포스팅 https://googlechrome.github.io/samples/touch-action/ 2018.08.28
PHP Linux Repository 출처 : blog.remirepo.net Repositories configuration:On Fedora, standards repositories are enough, on Enterprise Linux (RHEL, CentOS) the Extra Packages for Enterprise Linux (EPEL) repository must be configured, and on RHEL the optional channel must be enabled.Fedora 27wget http://rpms.remirepo.net/fedora/remi-release-27.rpm dnf install remi-release-27.rpmFedora 26wget http://rpms.remirepo.net/fedo.. 2018.04.19
SSR (Server Side Rendering) & CSR (Client Side Rendering) 흠.. 웹 프로젝트에 대한 방향성에 대한 문제로 일말의 공부와생각의 정리가 필요하였다. Node.js 를 보다가 Node / Express 등을 보다가 Nuxt.js 라고 서버사이드 렌더링 프레임워크를알게 되어서 공부하다 보니 놓칠뻔 했던 중요한 내용이었다. 요새는 바로 사용할 수 있는 실용화, 생산성 위주로 살아가다 보니전혀 공부할 생각과 시간이 없었는데 이건 중요한 계기였듯. 먼저 Vue.js 에서 보면 다음과 같이 서버사이드 렌더링에 대하여 언급되어 있다. URL : https://ssr.vuejs.org/ko/왜 SSR을 사용하나요?전통적인 SPA(싱글 페이지 애플리케이션)에 비해 SSR의 장점은 주로 아래에 있는 내용과 같습니다.검색 엔진 크롤러는 완전히 렌더링 된 페이지를 직접 볼 수 있으므로.. 2018.02.27