JavaScript/VueJS (4) 썸네일형 리스트형 Vue.js 개발 환경 구성(VSCode, 크롬 확장) VSCode 플러그인 설치 1. 한국어 언어팩: VSCode 한국어 지원 2. indent-rainbow: 탭 가독성 향상에 도움 3. Auto Rename Tag: html 태그명 변경 시 열고 닫는 태그명을 함께 바꿔줌 4. CSS Peek: html에서 사용된 클래스가 CSS 중 어디에서 사용됐는지 추적이 쉽게 해줌(cmd + 클릭) 5. HTML to CSS autocompletion: CSS에서 클래스 작성할 때 자동완성 지원 6. HTML CSS Support: HTML에서 클래스 작성할 때 자동완성 지원 7. Live Server: 코드가 변경되었을 때 브라우저에 자동 반영(dev server) 8. ESLint: 작성한 코드에 오류가 있는지 확인해줌 9. Vue Language Featu.. Vue3 Options API vs Composition API Vue3에서 애플리케이션을 만들 수 있는 방법은 크게 두 가지가 있습니다. 하나는 Vue2에서 사용해왔던 Options API를 사용하는 방법과 다른 하나는 Vue3에서 새롭게 등장한 Composition API 입니다. 기존 Vue2에서는 SFC(Single File Component) 구조로 Options API를 사용해 직관적으로 코드를 개발해 왔습니다. 이는 개발할 때 고민을 덜 하게 되어 편하지만 컴포넌트의 크기가 커졌을 때 유지보수가 어려워진다는 문제를 야기했습니다. 예를 들어, Options API로 개발한 파일 탐색기 소스를 관심사에 따라 색칠하면 아래와 같이 됩니다. 색깔별로 같은 관심사인데, 한 로직을 따라가려면 스크롤을 위아래로 이동하면서 읽어야 하기 때문에 가독성이 좋지 않습니다. .. vue-cli(v5) 설치 및 프로젝트 구조 정리 목차 VueJS 설치 프로젝트 생성 프로젝트 구조 1. VueJS 설치 VueJS를 설치하는 방법은 두 가지인데요, vue를 직접 설치하거나, @vue/cli를 설치하는 방법입니다. 두 방법의 차이는 다음과 같습니다. vue: VueJS를 직접 설치하는 방법으로, 간단하고 빠른 방법이지만 프로젝트 세팅을 직접 해야 합니다. @vue/cli: 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다. https://simplevue.gitbook.io/intro/01.-vue-cli 아래 명령어로 vue-.. Vue.js란? - 2023년 Vue.js의 장점과 단점 이 글은 아래 글을 번역한 글입니다. https://www.trio.dev/blog/why-use-vue-js What Is Vue.js? The Pros and Cons of Vue.js in 2023 - Trio Developers Vue.js is a JavaScript framework for building user interfaces (UIs) and single-page applications (SPAs). Find out more about Vue.js and how it works! www.trio.dev Vue.js란 무엇일까요? '점진적(Progressive)' 프레임워크라고 하는 Vue.js는 추가적인 기능들을 점진적으로 채택하는 디자인 철학으로 유명합니다. '점진적 프레임워크'라는.. 이전 1 다음
