ezgif.com-video-to-gif (1).gif 목표: 텍스트 필드에서 에러를 발생시켰는데, 사용자 입력이 있으면 에러를 지운다! 1. 상황 뷰로 작업을 할때 위 처럼 텍스트 필드의 에러를 처리할 때가 있다. 간단하게 정리하면, 1) 공백이면 에러를 발생시킨다. 2) 사용자 입력이 주어지면 에러를 없앤다. 그럼 어떻게 만들...
vue build시 lodash 템플릿을 사용하는 html이 만들어지는데 이를 핸들바의 템플릿을 사용하려고 한다. * handlebars * handlebars-loader
MockUp Server main.gif Mockup Server란 MockUp Server는 프론트와 백엔드를 동시에 같이 개발이 진행할때 쓰면 큰효과를 볼 수 있습니다. 예를들어 자주 바뀌는 백엔드의 API와 데이터의 형태를 항상 무엇이 바꼇는지 모니터링(깃으로)을 할 수 있고 프론트엔드 개발자는 그것에 맞춰서 완성된 서버가 없더라도 최대한 비슷...
이전에 vue를 사용하면서 적은 메모들을 여기에 옮김 오브젝트는 참조전달이다 같은 곳을 참조하므로 UI렌더링이 안 될 수 있다. 배열로 하면 문제없다. 혹은 전개구문으로 한 번 값을 새로 복사해서 만든 다음에 넣어주면 된다. 뷰는 오브젝트 내부를 검지해주지 않는다. computed는 배열 안을 검지 못하므로, watch를 쓴다. ...
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...