728x90 뷰3 [Vue] Babel이란? 바벨에 대해서 이야기하기 전에, 먼저 크로스 브라우징(Cross Browsing)에 대해서 설명이 필요하다. 크로스 브라우징은 브라우저나 플랫폼마다 보이는 모습이 다른 경우가 많은데, 이러한 차이를 최소화하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 말한다. 일부 최신 브라우저에서만 동작하는 기능을 그렇지 않은 브라우저에서 구현해야 할 경우, 기능을 단순화 하거나 생략해야 하는 경우가 발생하기도 한다. 프런트엔드 개발자들에게 크로스 브라우징 이슈는 코드의 일관성을 망가트리고 혼란스럽게 만드는 요소중 하나이다. 이러한 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴이 바벨이다. ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되.. 2021. 8. 10. [Vue.js] router (페이지 이동), axios (http 통신) 1. Router 1-1 라우팅이란 단일 페이지 어플리케이션인 SPA에서 가장 먼저 처리해야 하는 것이 바로 라우팅입니다. 페이지를 이동할 때 서버를 요청하여 새로 페이지를 얻는 것이 아니라, 미리 해당 페이지를 받아 놓고 페이지를 이동시 클라이언트를 라우팅을 이용하여 화면을 갱신하는 것으로 이러한 방식을 SPA(Single Page Application)이라고 한다. 라우팅을 사용하여 화면간 전환을 매끄럽게 전환하여 사용자 경험을 향상시킬 수 있다. 1-2. VueRouter 뷰에서는 뷰라우터(VueRouter)라는 공식라이브러리를 통해 라우터기능을 지원한다. *cdn 방식으로 사용할때는 뷰, 뷰 라우터 순서로 기술하여 사용해야한다. 뷰 라우터는 페이지이동 기능을 제공하여 뷰 라우터를 이용하여 뷰로 만.. 2021. 8. 9. [Vue.js] 컴포넌트 통신 (Props, Event emit) 1. 컴포넌트 통신이란? 컴포넌트 간의 통신에는 규칙이 있습니다. 부모에서 자식으로 데이터를 전달하기 위해서는 props를 사용한다. 자식이 부모에게 데이터를 전달하기 위해서는 event를 발생시킨다. 이와 같은 규칙은 컴포넌트가 독립적으로 작동할 수 있도록 하기 위함이며, 데이터의 flow를 좀 더 규칙적으로 바라보기 위함입니다. 1-1. 컴포넌트 통신 규칙이 필요한 이유 Vue의 경우 컴포넌트로 화면을 구성하기 때문에 같은 웹 페이지라고 하더라도 데이터를 공유할 수 없습니다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위(Scope)를 가지기 때문입니다. 따라서, 직접적으로는 다른 컴포넌트의 값을 참조할 수 없기 때문에 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 규칙을 따라야 합니다. .. 2021. 8. 9. 이전 1 다음 728x90
