Vue 번들 크기 줄이기 번들링 도구를 사용하여 자바스크립트를 번들링하는 경우, 모든 내용이 하나로 합쳐진 큰 파일이 생성되게 됩니다. 브라우저에서 하나의 큰 파일을 로딩하는 경우에는 많은 초기 로딩 시간이 소요될 수 있습니다. 아래에서는 자바스크립트 번들 크기를 줄이는 방법 몇 가지를 간략히 설명합니다. 이 글은 Vue + Webpack4 기준으로 작...
Vue 성능 개선하기 함수형 컴포넌트(Functional Component) 사용하기 함수형 컴포넌트는 Dumb(멍청한, 바보같은) 컴포넌트 또는 Stateless (상태 없는) 컴포넌트로 불리며,data와 lifecycle을 가지지 않은 컴포넌트를 지칭합니다. 기존의 props만 가지고 있는 컴포넌트에 functional 선언을 통해 앱 성능을 향...
1. Vue project 만들기 뷰가 설치되어 있지 않다면 설치합니다. $ yarn global add @vue/cli $ vue create vue-lazy-loading $ cd vue-lazy-loading 서버 실행 $ yarn serve or npm run serve 스크린샷 2019-08-29 오후 11.43.31....
프런트 앤드 개발에 사용되는 유망한 UI라이브러리 모음 관련글 링크 : 여기...
컴포넌트는 vue.js의 기본 구성 요소입니다. 좋은 컴포넌트를 만들어서 오픈소스로 배포하면, awesome vue 등에 게시될 수 있습니다. 이번 글에서는 컴포넌트를 만들고 npm에 배포하는 방법에 대해 알아보겠습니다. 1. vue-cli 설치 https://cli.vuejs.org/ vue-cli는 create-react-app과 비슷합...
Vue 2.6.0에 v-slot이라는 문법이 추가되었습니다. 기존 slot의 사용법을 간단하게 훝고, v-slot에 대해 알아보겠습니다. slot vue에서 slot은 자식컴포넌트의 엘리먼트를 부모에서 지정할 때 사용합니다. 대신 v-bind(:)나v-on(@)처럼으로 단축해서 쓸 수 있습니다. 또한 동적인 컴포넌트 바인딩과 유사하게 s...
최근 클라우드 서비스를 이용한 마이크로 서비스 아키텍쳐(MSA)가 대두되고 있습니다. AWS lambda는 MSA에 적합한 클라우드 서비스입니다. 이를 이용하면 간단한 코드 작성만으로 서버 없이 배포를 할 수 있습니다. serverless 프레임워크는 node.js 환경에서 lambda 배포를 쉽게 할 수 있도록 돕습니다. 이 serverless를 ...
소개 Live Demo githubclone.gif 시작 최근 데이터 과학 혹은 데이터 엔지니어링이란 분야가 유행이고(?) 관련 직업까지 생긴 것으로 알고 있다. 학부생때 데이터마이닝 수업도 재밌게 들었고, 현재 프론트엔드 쪽에 관심이 생기다 보니 웹에서 그러한 데이터를 시각적으로 아름답게 표현해줄 수 있는 그것도 자바스크립트로 라이브러리(대단쓰�...
안녕하세요. 지난 스터디 내용과 이번주 모임 일정을 알려드립니다 🤓 지난 모임 내용 일정: 2/10 (일) 오전10시 내용: Vue 교재 (145페이지까지 진행) - v-model (승권) - filter (승권) 다음 모임 내용 일정: 2/17
0. cypress란 https://www.cypress.io cypress는 end to end test framework입니다 end to end test란 사용자 입장에서 테스트하는 것을 말합니다. 좀 더 자세한 것은 아래의 글을 읽어보시면 좋을거 같아서 링크 공유드립니다. https://medium.com/hbsmith/e2e-test-알아보...
0. Sentry은 무엇인가? https://sentry.io/welcome/ sentry의 홈페이지를 보시면 아시겠지만 에러를 추적해주는 소프트웨어 입니다. 이게 왜 필요한가에 대해서는 애플리케이션을 만들고 출시하고 운영하다보면 애플리케이션을 사용하는 사용자가 에러난다고 피드백을 줄 때가 있다. 이런 피드백을 받을때 난감한 점은 유저가 어느때에 정확...
Vue 개발환경 만들기 (without vue-cli) 원문: https://bit.ly/2RBcIJf 이 글은 번역한 내용이 아니라 원문 내용을 따라하면서 작성한 내용임을 밝힙니다. 일반적으로 Vue로 개발할 때, vue-cli를 사용하여 프로젝트 구조를 생성합니
0. PWA란? PWA는 구글에서 밀고 있는 웹기술로 progress web app의 역자입니다. 대표적인 기능으로는 푸시 알람, 오프라인 지원, 앱 같이 설치 된다는 점입니다. 일단 저는 푸시 알람과 오프라인 지원은 완벽하게 지원되는 단계가 아닌 어떻게 도입할 수 있는지에 대해서 서술해보려고 합니다. 나중에 둘 다 도입 및 해결하게 되면 추가적으로 ...
이번에는 nuxt를 도커 이미지를 만들어서 다음 프로젝트에서 사용하는 기본 뼈대가 되거나 aws 등의 클라우드에 도커 이미지를 올리는 등에 쓰일 수 있도록 이미지를 만들어 보도록 하겠습니다. 일단은 저는 초기 설치 후 이것을 이미지로 만들어서 다음 프로젝트에도 사용되는 기본 뼈대가 되도록 이미지를 떠보도록 하겠습니다. 0. Docker 설치 h...
해당 예제는 Apex Up을 사용하여서 aws lambda에 배포합니다. 1. Nuxt.js 초기 설치 만약 배포가 문제없이 되었다면 커맨드 라인에 endpoint에 나오는 url로 가시면 배포되어 있는 애플리케이션을 보실 수 있습니다. Screenshot_2019-02-05 nuxtjs-with-lambda.png 이상입니다. git...
발표시간에 나왔던 keep-alive에 대해서 간단히 찾아보았습니다. keep-alive 는 컴포넌트를 상태를 보존할 때 사용합니다. 이미지 1.png 이미지 2.png keep-alive는 비활성 컴포넌트 인스턴스를 파괴하지 않고 캐시한다고 합니다. VUE
안녕하세요. 지난 스터디 내용과 이번주 스터디 모임 일정을 알려드립니다 🤓 지난 모임 내용 일정: 1/20 (일) 오전10시 내용:Vue 교재 (114페이지까지 진행) 교재 내용 발표: https://bit.ly/2sDPnYu (승권님) Directive 사용 예제: https://codepen.io/devgaeng/pen/EGMMJg (경근님...
환경 - vue-cli 3.x 이상 - eslint recommended - VS code - ESLint (VS code 플러그인) - 협업 프로젝트를 진행할때 코딩 컨벤션을 따르지 않으면 타인이 작성한 코드를 쉽게 이해할 수 없는 경우가 발생한다. 또한, 개인 프로젝트에서도 일정한 규칙이 없으면 한 사람이 작성하더라도 다른 형태의 코드가 작성되는 경...
https://velog.io/@kyusung/190113-2 스터디 진행 중 컴포넌트로 사용시 data를 오브젝트로 선언하면 오류를 뱉는 문제를 알게 되었습니다. 이때는 data를 함수로 사용을 해야되던데요. 이와 관련하여 알아본 결과 - 동일한 컴포넌트가 여러