# vuejs
VueJs 라이프사이클
VueJs는 아래와 같은 라이프사이클을 가지고 있습니다. 처음 VueJs를 통해서 웹개발을 하다보면 아래 라이프사이클을 제대로 이해하지 못하고, 개발하여 고생했던 기억이 있네요.Vue.Js 공식홈페이지실행시 vue의 인스턴스를 생성합니다. 컴포넌트가 돔에 추가되기 전
✅알아두면 유용한 사이트(🔁updating)
Carbon (클릭!)해당 사이트는 코드를 이쁘게 캡쳐할 수 있게 도와주는 사이트이다. 발표자료나 글 작성시 코드를 이미지화 시키고 싶다면 추천한다.Netlify (클릭!)해당 사이트는 웹페이지를 무료로 호스팅해주어 간단한 배포 및 공유를 할 수 있게 url을 생성시켜
.vue 파일에서 스크립트 분리
.vue 파일이 넘 커져서 코딩을 할때 위/아래 스크롤이 넘 많아졌다.모니터가 크다면 그러려니 할 수 있겠지만노트북의 경우 제약이 많아 좌우로 나눠 쓰고 싶어졌다.안드로이드에서 java파일과 xml파일을 분리해서로직과 UI를 분리하듯이...결론은 <script s
CSS 프레임워크를 직접 개발해보았습니다.
웹 프론트엔드 개발을 하다보면 CSS 프레임워크는 거의 필수적으로 사용하게 됩니다.저는 웹 개발할 때 Vue.js를 주로 사용하는데, 그 동안 이것저것 많이 사용해보았지만, 기능적으로나 디자인적으로 Element UI가 괜찮아서 그 동안 10개가 넘는 기업 웹사이트를
[VueJS] Vue 인스턴스
\- 뷰 생성자 new Vue() 로 생성\- HTML 서식 컴파일, 인스턴스 데이터 초기화, 데이터 생성, 이벤트 바인딩으로 애플리케이션 가동\- 옵션 객체 new Vue({})라는 자바스크립트 객체를 받음.\-- el: element. Vue가 HTML에서 해당 D
[VueJS] vue 프로젝트 생성(vue/cli 3.x 이상)
** 프로젝트명을 카멜식(ex:applePie)으로 입력할 경우 에러 발생. 반드시 케밥식으로 작성(ex:apple-pie) vue/cli 버전 3.x 미만(1.x 혹은 2.x)일 경우: vue init webpack 프로젝트명 **cli 버전이 3.x 이상일 경우
[VueJS] vue/cli 3.x 이상 설치
2020-08-06 기준: v12.16.12020-08-06 기준: 6.13.4\*\* cli 3.x 이전 버전의 경우 설치 명령어: npm install -g vue-cli\*\*2020-08-13 기준 VUE-CLI 최근 업데이트 날짜 2019-10-07cli 버전
vuejs + vuetify + vue-cli IE 브라우저 적용기(삽질기)
vuejs + vuetify ie 적용기 (a.k.a 삽질)vuejs + vuetify 환경으로 열심히 크롬에서 개발을 하고 있었다.개발 초기에 한번 ie에서도 뜨는지 확인 했을 때는 화면이정상적으로 뜨는 것을 발견하고 그 뒤로 확인을 안 했다고 한다..어느날 갑자기
[TIL] Nuxt.js asyncData 메서드
Why do I post this? > Why? 통합게시판 토이프로젝트에서 프론트엔드 개발을 전담한 상태 해당 프로젝트에서 내가 집중할 메인 기능이며, API통신에 대해 정확히 배우기 위해 Nuxt에서 서버사이드 랜더링하는 방법 Nuxt.js는 컴포넌트 데이터를 세팅
Vue.js - watch 삽질 기록(로딩중 화면 띄우기)
뷰의 watch는 미리 지정해놓은 특정 데이터의 변화를 감지하여 미리 지정한 로직을 실행해주는 속성입니다.작업이 필요했던 부분은 (예시) 주문 리스트의 특정 주문을 클릭하면, 상세 주문 내역이 로딩되는 동안 로딩중 화면이 나와야 하는데, 최초 클릭 시에는 나오지 않는
