Vue.js 검색 결과

해당 글 8건

[Vue.js] Vuex 상태 관리 패턴

입사 후 첫 업무로 Vue를 활용한 프로젝트에 투입되었는데 이미 짜여져있는 상태 저장소들의 구조와 흐름을 이해하기 위해 개인적인 학습을 진행하며 정리한 내용입니당. 01. Vuex란? Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경 가능하다. 상태 관리 패턴을 통해 단방향 데이터 흐름의 문제점을 해결 가능하다. 01-1. 단방향 데이터 흐름 단방향 데이터 흐름에는 상태, 뷰, 액션 세가지 개념이 존재한다. 상태는 앱을 작동하는 원본 소스 뷰는 상태의 선언적 매핑 액션은 뷰에서 사용자 입력에 대해 반응적으로 상태를 바꾸는 방법 이러한 데이터의 흐름은 공통의 상태를 공유하는 컴포넌트가 많아지..
Web/Vue.js 2020. 10. 22. 10:58

[Vue.js] 다국어 처리 - i18n활용하기

최근에 코로나 정보와 관련된 사이트를 제작하며 사이트의 취지에 적합하게 구현하려면 다국어 처리가 필요했습니다. 한글과 영어 두가지 언어를 지원하기 위해 활용한 i18n 활용법에 대해 포스팅합니다. 1. i18n 설치 제일 좋은 참고자료는 공식사이트입니다. 저도 공식 사이트를 보고 따라서 진행했습니다. https://kazupon.github.io/vue-i18n/installation.html#compatibility-note Installation | Vue I18n Installation Compatibility Note Direct Download / CDN https://unpkg.com/vue-i18n/dist/vue-i18n unpkg.com provides NPM-based CDN links..
Web/Vue.js 2020. 3. 6. 23:32

Vue-CLI 파이어베이스 배포하기

포트폴리오 사이트는 80퍼센트 완성한 상태인데 파이어베이스로 배포를 한번 해보기로 했습니다 ㅇㅅㅇ 1. 파이어베이스 가입 https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 2. 새 프로젝트 추가 3. 프로젝트에 Firebase CLI 설치 npm install -g firebase-tools firebase login 로그인까지 진행해주세요 4. 프로젝트 Init firebase init 원하는 기능에만 선택! 스페이스로 선택한 후 enter하면됨 쪼로로록 설정이 되다가 DB관련 설정은 엔터 엔터~ ? What file should be used for ..
Web/Vue.js 2019. 12. 26. 22:52

Vue-CLI 프로젝트 만들기

저는 "4"버전으로 프로젝트를 만들고 프로젝트 구조를 이해하는 시간을 가졌습니다..😂 1. 설치 일단 1,2버전의 vue-cli가 설치되어 있다면 제거 후 최신버전으로 설치해주세요. 패키지명이 바뀌어서 1,2 버전은 vue-cli이고 3,4버전은 vue/cli입니다. 설치 후 버전 확인까지 되면 끝! 저는 @vue/cli 4.1.1 이렇게 뜹니다. (@은 NPM에 최근에 도입된 Scoped package를 의미) npm r -g vue-cli npm install -g @vue/cli vue --version 2. 프로젝트 생성 포트폴리오 사이트를 위한 프로젝트기 때문에 프로젝트 이름은 'hyem-portfolio'로 설정했습니다. 'vue create 프로젝트명' 명령으로 프로젝트 생성이 완료되면 해당..
Web/Vue.js 2019. 12. 5. 05:01

[Vue.js] 컴포넌트

1. 컴포넌트란? Vue.js에서 컴포넌트는 코드 베이스를 줄이고 단순화하는 강력한 구성 요소 어떻게 Vue.js 컴포넌트를 생성하느냐에 따라 Vue.js의 개발속도와 코드의 가독성, 그리고 효율성이 현저히 차이남 코드에서 반복되는 부분을 가져와 이해하기 쉬운 작은 논리적 부분으로 분리 (쉽게 말해, 화면을 구성할 수 있는 블록이라고 생각할 수 있을 것 같다.) 애플리케이션 내에서 재사용 가능하며 코드를 이해하기 쉽다는게 장점이다. 2. 컴포넌트 등록 컴포넌트 등록은 '전역 등록'과 '지역 등록'으로 나눌 수 있다. 1) 전역 등록 컴포넌트 전역등록은 프로그래밍에서 전역 변수와 같은 의미이다. 인스턴스 생성 후 어느 페이지 또는 컴포넌트에서 사용할 수 있게 Global 하게 등록할 수 있다. 2) 지역 ..
Web/Vue.js 2019. 12. 4. 16:23

"Vue.js 코딩 공작소" 학습 후기

Vue.js에 최근 관심이 생겨 공부해보려던 찰나에,,! 길벗 출판사에서 개발자 리뷰어 모집 이벤트를 발견했습니다.😎 어떤 언어,기술이던지 공부를 시작할때 일단 책부터 한권 산후에 쭉~ 정독하고 그 후에 자유롭게 활용하며 익숙해지는 타입이라 책을 구매할 예정이었기 때문에 밑져야 본전 이벤트에 신청해보았습니다ㅎㅎ . . 문자로는 11/4일 발송이라 전달받았지만! 토요일 점심때 책이 도착해서 주말에 일찍이 책을 훑어볼 수 있었네요ㅎㅅㅎ > 도착한 책의 전면! 책을 학습해 보니 길벗출판사 소개 부분에 " 빠르게 학습하고 손쉽게 개발하자 "라는 문구가 굉장히 적절한 소개 문구라고 생각했습니다. 저는 본 책을 통해서 Vue.js를 처음 접해보는 상황이었습니다. 처음임에도 불구하고 학습하는데 큰 어려움이 없었고 쉽..
Web/Vue.js 2019. 11. 9. 03:19

MVVM패턴이란?

Vue.js는 MVVM패턴을 기반으로 합니다. MVVM이 무엇인지 알고 Vue.js를 활용하는것이 매우 중요하다고 생각합니다! 1. MVVM의 탄생 배경 자바스크립트 프레임워크가 비동기 방식의 프로그래밍을 지원하기 시작하면서 웹에 특정 작업이 수행될 때 웹 페이지 전체를 다시 요청하는 것은 불필요한 작업이 되었습니다. 변화가 필요한 특정 부분만 업데이트 되게해 더 빠르게 반응하게 할 수 있기 때문입니다. MVC 패턴의 경우 모든 요청과 응답 과정에 시간 소모가 크고 반응형 UX를 제공하기 어렵다는 단점이 있습니다. 이를 해결하기 위해 변형된 모델 MVVM이 생긴것 입니다. 2. MVVM이란? MVVM은 "Model + View + View Model"을 합친 용어입니다. MVC패턴의 변형된 형태라고 생각..
Web/Vue.js 2019. 11. 9. 03:18

Vue.js란?

Vue.js를 공부하기에 앞서 Vue.js가 뭔지! 정리해봅니다🤓 1. Vue.js란? Vue.js는 Evan You가 만들었으며, 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크입니다. 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었으며, 재사용이 가능한 UI들을 묶어서 사용할 수 있습니다. 양방향 웹 개발을 쉽게 해주기 위해 프론트엔드 개발에 사용됩니다. 현재 프론트엔드 프레임워크 중 Angular, React와 함께 가장 인기있는 프레임워크로 손꼽힙니다. 2. 역사 2006년 존 레식이 제이쿼리(jQuery)를 출시하면서 HTML의 클라이언트 단 스크립트를 단순화 시켰고 클라이언트단을 위한 여러 프레임워크와 라이브러..
Web/Vue.js 2019. 11. 7. 04:23