vue3

Vue3 lifeCycle는 어떤 방식으로 동작할까?

모든 일에는 라이프사이클이 있다. 기획서를 쓰건, 영상을 만들건, 사업을 하던 말이다. 모든 일들이 그렇겠지만 어떻게 굴러가는지 알아야, 잘 굴릴 수 있다. 그래서 이번에는 vue3의 생애주기에 대해서 공부한 내용을 정리해보고자 한다. Lifecycle Hooks - 수명주기, 생명주기 컴포넌트를 만들기만 하면 되는거 아니야? 왜 생애주기에 대해서 알아야할까? 물론 컴포넌트를 만들고, state, props를 사용해서 데이터를 변경하는 것만으로도 간단한 웹을 만들 수 있다. 다시 생각해보면 그 정도로는 간단한 웹만을 만들 수 밖에 없다는 뜻이기도하다. 결론부터 이야기해보자면, 프로그램에 대한 통제권을 가지기 위해서다. 라이프 사이클을 앎으로서, 컴포넌트의 생성, 변화하는 일련의 프로세스를 통제할 수 있게..

구글 클라우드 플랫폼으로 Vue 프로젝트 배포하기 + 300 달러 공짜로 받기

구글 클라우드 플랫폼을 활용해서 직접 만든 프로젝트를 배포해보자. 본 포스팅에서는 Vue3, Google Compute Engine, Nginx를 사용했다. GCP란? Google Cloud Platform 구글 내부 인프라를 사용할 수 있도록 해주는 플랫폼으로, Cloud Storage나 Compute Engine등 다른 클라우드 서비스 업체에도 공통적으로 제공하는 기능이 포함되어 있다. GCP에선 제공하고 있는 기능이 다양하다. 컴퓨트 옵션부터 나뉜다. 계산이나 프로그래밍이 수행될 수 있는 컴퓨터 자원으로, 대체로 클라우드 서비스를 하는 곳은 다양한 옵션을 제공한다. AWS나 Azure같은 서비스도 있는데 GCP를 선택한 이유는 firebase와의 확장성을 위해서기도 하고, 구글이란 이름이 이뻐서 그..

컴포지션 API, setup() 기초 사용법과 개념

vue의 기본 vue는 한 파일안에서 스크립트, 마크업, 스타일을 작성할 수 있는 SFC(single file component) .vue 문법을 지원한다. 즉, HTML, CSS ,JavaScript를 하나로 합친 셈이다. 내부에 있는 블록들은 컴포넌트의 뷰, 로직, 및 스타일을 캡슐화해서 배치한다. 다음은 간단한 SFC 구조다. {{ greeting }} Vue는 기본적으로 컴포넌트 모듈을 객체 형태로 선언하며 props 정의, data, methods, 라이프사이클(mounted, updated, beforeUnmount, …), computed, watch 등의 기능을 객체의 속성과 메소드를 사용해서 선언한다. 이와 같은 방식을 Option API라고 부르는데, 속성별로 역할과 책임이 분명히 나눠..

vue3에서 vue-i18n 다국어 처리 적용하는 법

지난번엔 i18n이 어떤 것인지에 대해서 알아보았습니다. 그렇다면 본격적으로 vue3 프로젝트 내부에서 i18n을 어떻게 적용할 수 있는지에 대해 알아봅시다. 설치 우선 vue3-i18n 을 다운받아야 하는데, Vue3 프로젝트를 만들었다는 가정하에 진행합니다. 터미널에 npm install vue-i18n@9을 입력해야 vue3 부터 사용이 가능합니다. main.js 설정 프로젝트 src/main.js 파일에서 다음과 같이 createI18n을 app의 plugin으로 등록해줍니다. 여기서 createI18n에 들어가는 내용은 언어별 리소스파일을 예제로 들겠습니다. 제가 임시로 만들어둔 messages 파일을 들고와서 import 해두겠습니다. use는 사용하고자하는 플러그인을 createApp에 넣어..