03W 개발 일지 vue-ts 개발 스탑 - 이유 : vue 3.0에 ts가 같이 나올텐데 어떤식을 나올지 감이 안잡히기 때문 - 뭔가 새로운, 완전 다른 형태가 될 수도 있음 - 지금 Vue 개발의 우선순위가 먼저가 될 수 없음 vue-nuxt 개발 시작 - 위의 이유의 시발점(욕이 아니다) - nuxt를 사내에서 사용하고 있기에 우선적으로 ...
webpack SPA(단일 페이지 어플리케이션)이 많아지면서 하나의 파일에서 자바스크립트 코드를 관리할 수 없을 만큼 그 양이 증가하게 되었다. 그래서 파일을 UI 및 기능별로 분리하여 개발하고 webpack을 통해 하나의 js파일로 번들링하여 웹페이지를 불러오는 방식을 사용하게 되었다. webpack.config.js파일에 들어가면 entry p...
이번주에 한것 - 인프런 Vue-TS 강의 완강 - 샘플 todo프로젝트 1차 완성 - git:sampleTodo todo프로젝트 느낀 점 - class based 방식이라 다시금 object 개념이 중요함을 깨닫음 - 단순히 보고 따라 치는 것과 내가 만드는 것은 다름 - notion:개발기록 - TDD 를 해보려 했으나 레퍼런스가 부족(TS+...
다음과 같은 채팅 웹 애플리케이션을 vue.js 를 사용해서 만들것입니다. 웹소켓을 사용할 것이고요, 배포까지 진행해봅시다. vue 채팅앱 서비스 링크 urman.gif 이번에는 프론트엔드 개발 환경 설정을 다룹니다. 1. vue cli 설치 vue cli는 뷰 프로젝트 생성, 라이브러리 관리, 배포 파일 생성 등의 기능을 지원하는 프로그램입니다. ...
너무너무 길어져버렷! vue 개발을 할때 사진과 같이 impport 하는 컴포넌트의 경로가 너무 길어지는 현상이 있습니다. vue-cli 2.x 에서는 webpack.config.js(웹팩 설정 파일)에서 @를 사용하는 경로가 정의되어있습니다. 따라서, 다음과 같이 @를 통한 단축 경로를 사용할 수 있습니다.
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를 ...