vue3 (35) 썸네일형 리스트형 [Vue3] 2023년, Vue3은 어떻게 달라질 것인가? Vue3 컨퍼런스인 Vue.js Nation이 지난 25,26일 양 일 간 진행되었습니다. 앞으로 Vue3을 메인으로 쓸 일은 많이 없을 것 같지만, 나름 Vue3 코어까지 깊게 공부해 보았던 사람으로서, 어느 정도 관심은 남아있는데요. 생각보다 재미있는 변화가 보여서 정리해보고자 합니다. TL;DR 버추얼 돔에서 사전 컴파일로: Vapor Mode reactivity transform의 제거 계속되는 안정화 1. Vapor Mode Vue3은 리액트에서 영향을 받은 Composition API를 도입했습니다. 이번에는 Svelte에서 영감을 받은 Solid.js를 따라서, Virtual-Dom을 제거한 아키텍처를 도입할 모양입니다. 즉, 컴파일러의 도움을 받아 네이티브 DOM을 생성 및 조작하는 것이죠.. 자바스크립트 스킬 티어 리스트 출처 : https://www.youtube.com/watch?v=vdiYtiKD8eI fireship youtube 유투브 추천알고리즘이 재미있는 자료를 소개해주어 읽어봤습니다. state of js 2023(https://stateofjs.com) 레포트를 기반으로 만들어 진 것 같은데, 개인적으로 의미있는 결과들이 보여 정리해보고자 합니다. Vite(S) vs Next.js(S) Vite는 사실상 프론트엔드의 스프링과 같은 포지션을 잡고 있습니다. 프레임워크 별 설정 자동화 및 단순화 기능을 지원합니다. Vite와 Rollup.js 플러그인 사용방법만 알면 모든 프론트엔드 프레임워크를 쉽게 설정할 수 있습니다. Next.js는 현재 프론트엔드 프레임워크 3대장 체제에서 1대장 체제로 서열정리에 성공.. Vue3과 서버사이드 렌더링(SSR) Vue3과 같은 라이프사이클이 존재하는 프레임워크를 SSR과 같이 사용할 때 어떤 이슈가 있을까요? 공식 문서의 번역입니다. https://vuejs.org/guide/scaling-up/ssr.html Server-Side Rendering (SSR) | Vue.js vuejs.org SSR이란? Vue.js는 클라이언트 측 애플리케이션을 구축하기 위한 프레임워크입니다. 기본적으로 Vue 컴포넌트는 브라우저에서 출력으로 DOM을 생성하고 조작합니다. 그러나 동일한 컴포넌트를 서버에서 HTML 문자열로 렌더링하고 브라우저로 직접 보낸 다음 최종적으로 정적 마크업을 클라이언트의 완전한 대화형 앱으로 "수화(hydrate)"하는 것도 가능합니다. 서버에서 렌더링된 Vue.js 앱은 대부분의 앱 코드가 서버와.. Vue3로 debounce, throttle 구현하기 debounce 및 throttle은 함수 호출을 제한하여 이벤트 핸들러 호출 빈도를 줄일 수 있는 두 가지 기술입니다. 이 두 가지를 잘 활용하면 애플리케이션의 성능을 크게 향상시킬 수 있습니다. Vue 애플리케이션에서 watcher와 이벤트 핸들러를 debounce, throttle 하는 방법을 배워봅시다. Debounce 함수 만들기 디바운싱은 일정 시간이 지날 때까지 이벤트 트리거를 대기하여 애플리케이션의 성능을 개선할 수 있는 기술입니다. 디바운스 함수는 재실행되기 전에 설정된 시간 동안 대기할 수 있습니다. ex) 사용자 입력에 의한 네트워크 요청 제한, 화면 업데이트 제한 다음은 debounce 함수의 코드 스니펫입니다. export function debounce(fn, wait){ let.. Vue3 리렌더링 최적화 with ComputedEager Vue3의 즉시 평가를 이용하여 렌더링을 최적화 하는 방법을 알아봅시다. Vue3의 리렌더링 최적화? Vue3은 리액트에 비해 최적화가 굉장히 잘 되어 있는 편이라, 렌더링 최적화에 대한 관싱이 별로 없는 것 같습니다. React는 뷰모델을 새로 만들기 위해 자식 컴포넌트 전체를 리렌더링 하기 때문에 성능 손실이 있는 편이지만, Vue3의 경우 뷰모델을 참조 형태로 저장하고 있기에 불필요한 자식 컴포넌트의 리렌더링이 불필요하기 때문이죠. 그렇다면 Vue3에서 리렌더링이 성능 이슈가 될 경우는 언제일까요? 바로 배치 처리의 이점을 활용하기 위해 리렌더링을 하는 것보다, 값 변경 연산 비용이 저렴할 때입니다. @VueUse의 computedeager 예제를 봅시다. 해당 컴포넌트에선 다음과 같은 일이 일어납.. Tailwind CSS 간단하게 배워보기 Vue mastery의 utility-first-css-with-tailwind 강의 내용을 정리한 글입니다. 유틸리티 퍼스트 CSS란? 유틸리티 클래스란 예측 가능한 이름을 지닌 저수준 디자인 토큰 유틸리티 CSS를 우선적으로 조합하여 CSS를 만드는 것 디자인 토큰을 CSS 규칙에 우선 반영하는 것 원자 클래스 라고도 합니다. 유틸리티 CSS 토큰의 조합형 사용을 지향합니다. CSS보다는 HTML 자체를 변경하는 것을 권장합니다. CSS를 수정하여 변경하는 경우 변경 사항이 의도하지 않은 영향을 미치지 않도록 각별히 주의해야 합니다. 그러나 HTML만 수정하여 변경하는 경우 변경 사항이 수정하는 바로 그 HTML에만 영향을 미친다는 것을 확실히 알 수 있습니다. Tailwind CSS를 사용하는 이유.. [Vue3] defineProps를 컴포저블에서 사용할 수 없는 이유 사용 시 props, emit 정의를 대체하는 defineProps와 defineEmits은 왜 컴포저블을 이용해 컴포넌트 밖에서 선언할 수 없을까요? 공식 문서의 내용과 같이 defineProps는 타입스크립트 제네릭 사용과 같이 제약 사항이 많습니다. 그 이유는 무엇일까요? defineProps의 정체 vue3 core의 packages/runtime-core/src/apiSetupHelpers.ts 파일을 열어보면 다음과 같은 내용이 있습니다. 말 그대로 아무 역할도 안하는 친구입니다. export function defineProps() { if (__DEV__) { warnRuntimeUsage(`defineProps`) } return null as any } 단지 우리가 이 함수를 impor.. [Vue3] Vue3로 접근성 고려한 Form(양식) 개발하기 Vue3로 접근성을 고려한 Form(양식)을 개발하는 방법의 기초를 학습해 봅시다. 전체 소스 코드 보기 https://github.com/Code-Pop/Vue-3-Forms/tree/l9-end GitHub - Code-Pop/Vue-3-Forms Contribute to Code-Pop/Vue-3-Forms development by creating an account on GitHub. github.com 양식(form)의 기초 1. HTML에서 양식의 기본 동작은 브라우저 탐색(navigation) 이벤트를 트리거하여 지정된 URL로 많은 데이터를 보내는 것입니다. Axios와 같은 라이브러리를 사용하지 않으면 HTML 양식 제출시 브라우저가 완전히 새로운 페이지를 로드하게 합니다다 페이지를 지.. 이전 1 2 3 4 5 다음
