728x90 Be Smart/Vue5 [VUE] SPA 웹 프론트앤드 개발을 위한 정리 1. JavaScript Framework의 사용 배경 자바스크립트 프레임워크가 등장하기 전에는, 프론트 로직을 플레인 자바스크립트나 jQuery*1을 활용하여 구현하였습니다. JavaScript 프레임 워크는 프론트엔드의 개발이 복잡해지면서 등장하였습니다. JavaScript 프레임 워크를 활용하면 SPA(Single Page Application)*2 등 고급 웹 애플리케이션을 개발하는 데 훨씬 용이합니다. *1 jQuery: DOM을 쉽게 조작하기 위한 라이브러리 *2 SPA: 단일 페이지 어플리케이션(Single Page Application)의 형태로 웹을 개발하는 것을 의미, 자세한 내용은 2번 참고 2. MPA 개발에서 SPA 개발까지 기존의 MPA(multiple-page applicati.. 2022. 8. 30. [Vue] Babel이란? 바벨에 대해서 이야기하기 전에, 먼저 크로스 브라우징(Cross Browsing)에 대해서 설명이 필요하다. 크로스 브라우징은 브라우저나 플랫폼마다 보이는 모습이 다른 경우가 많은데, 이러한 차이를 최소화하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 말한다. 일부 최신 브라우저에서만 동작하는 기능을 그렇지 않은 브라우저에서 구현해야 할 경우, 기능을 단순화 하거나 생략해야 하는 경우가 발생하기도 한다. 프런트엔드 개발자들에게 크로스 브라우징 이슈는 코드의 일관성을 망가트리고 혼란스럽게 만드는 요소중 하나이다. 이러한 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴이 바벨이다. ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되.. 2021. 8. 10. [Vue] Webpack이란? Webpack의 등장 자바스크립트를 이용한 웹 서비스 애플리케이션의 복잡도가 증가하면서 자바스크립트 코드의 양이 많아지고, 이러한 코드를 유지 보수하기 쉽게 만들려고 모듈로 관리하는 방법이 필요하게 되었다. 자바스크립트에서는 ES2015 이전에 모듈을 사용하기 위해서 여러 가지 명세가 존재했다. 대표적으로 AMD, CommonJS 등이 있다. 그러다가 ES2015에서 자바스크립트는 표준 모듈 시스템을 제안했다. 우리가 잘 아는 export/import 방식으로 말이다. 안타까운 사실은 모든 브라우저가 이러한 ES2015 방식의 모듈 시스템을 지원하지는 않는다는 점이다. 크롬의 경우 버전 6.1 부터 모듈 시스템을 지원한다. 그래서 개발자들은 브라우저와 버전에 상관없이 이러한 편리한 모듈 시스템을 사용하기.. 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. 이전 1 2 다음 728x90
