Study60 Vue 3 ) Vite 2로 생성한 프로젝트에 TailwindCSS 적용하기 Vite로 생성한 Vue3 프로젝트에 TailwindCSS 적용하기 1. 프로젝트를 생성 npm init @vitejs/app vue3-blog cd vue3-blog 저는 vite 2 버전으로 프로젝트를 생성했습니다. 2. TailwindCSS 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p npm 을 통해 tailwindCSS 와 해당 종속성을 설치한 다음 init 명령을 실행해 tailwind.config.js 와 postcss.config.js 파일을 생성합니다. 3. 경로 설정 // tailwind.config.js module.exports = { content: ["./index.html", "./src/*.. 2022. 1. 11. Vue ) <script setup> 은 또 뭐 Vue3 공식문서를 참고했습니다. 제 영어 실력 부족으로 인해 번역이 매끄럽지 않은 부분이 있을 수 있습니다.. 내부 코드는 구성 요소 setup() 기능의 내용으로 컴파일됩니다. 다시말해, {{ msg }} import 도 같은 방식으로 노출됩니다. methods 옵션을 통해 노출하지 않고도 템플릿 표현식에서 가져온 Helper 함수를 직접 사용할 수 있습니다. {{ capitalize('hi') }} 반응성 (Reactivity) 반응성 API 를 사용하여 반응성 상태를 명시적으로 생성해야 합니다. setup() 함수에서 반환된 값과 유사하게 ref 는 템플릿에서 참조될 때 자동으로 unwrapping 됩니다. {{ count }} 컴포넌트 사용 케밥케이스도 정상적으로 작동하지만 일관성.. 2022. 1. 10. Vue 3 ) Ref, Refs ?? Refs Vue 2 까지 쓰이던 this.$refs 를 Vue 3 의 Composition API 에서는 각각 함수로 제공됩니다. setup() 함수 내에서 각 Refs 를 import 하여 사용할 수 있습니다. ref 전달받은 기본 자료형 변수를 반응형 객체로 변경합니다. 이 객체의 value 속성을 통해서 자유롭게 변경할 수 있습니다. 일반적으로 이렇게 나온 반응형 객체를 ref 라 칭합니다. unref ref 를 다시 일반 변수로 바꿉니다. 내부적으로 프록시 객체에서 분리하는 과정을 진행합니다. toRef reactive API 로 생성돈 객체의 속성을 ref 를 이용해 반응형 객체로 생성합니다. toRefs toRef 를 해당 객체의 모든 속성에 적용합니다. isRef ref 객체인지 확인합니다... 2022. 1. 9. Vue 3 ) Vue3 에서 제공하는 반응성과 관련된 APIs 반응성 관련 API Vue 3 는 프록시를 이용해 반응성을 관리합니다. 어떤 변수가 반응성을 가지게 하기 위해서는 프록시로의 변환이 필요하고, 반응성을 해제하기 위해서는 프록시에서 일반 변수로의 변환이 필요합니다. reactive 객체의 속성들이 반응성을 갖게 만들어줍니다. 일반적으로 기본 자료형 변수가 반응성을 갖도록 할 때 ref 함수를 이용하는데, 객체의 속성으로 변수들을 모아 reactive 를 사용하면 변수의 개수가 많을 때 매우 유리하게 사용할 수 있습니다. readonly 일반 객체나 프록시 객체를 읽기전용 프록시로 변경합니다. 기본적으로 객체 내 모든 속성을 읽기전용으로 변경합니다. isProxy 인자로 들어온 변수가 reactive 나 readonly 등으로 만들어진 프록시 객체인지 확인.. 2022. 1. 9. Vue 3 ) Provide ? Provide 란? 일반적으로 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때는 props 를 이용합니다. 하지만 부모와 자식 관계가 깊어질수록 props 로 데이터를 전달하는 데는 한계가 있습니다. Vue2 까지는 이 문제를 해결하기 위해 Event Bus 를 생성하거나 Vuex 에 데이터를 담았었습니다. 하지만 Vue3 에서는 Event Bus 와 같이 비정형적 데이터 전송이 프로젝트의 관리를 어렵게 하기 때문에, $on, $off, $once 와 같은 이벤트 method 를 모두 삭제했습니다. Vue3 에서는 Provide/Inject 를 활용해 이러한 문제를 해결할 수 있습니다. 부모 컴포넌트에서 어떤 데이터를 provide 해주면 자식 컴포넌트에서 해당 데이터를 inject 해서 사용할 수.. 2022. 1. 9. Vue 3 ) Props Props props 는 컴포넌트에 데이터를 넘겨줄 수 있는 사용자 지정 속성입니다. 컴포넌트를 생성할 때 props 옵션을 이용해 어느 이름의 props 데이터를 받을지 결정하게 됩니다. 일반적으로 props 라는 옵션에 Props로 넘어오는 속성의 키 값들을 배열로 지정하면 사용에 큰 문제가 없습니다. props: ["name", "age"] 하지만 어떤 컴포넌트는 특정한 Props 를 필요로 할 수도 있고, 정해진 데이터 타입에 맞게 들어왔는지 확인이 필요할 수도 있습니다. 이럴 때는 props 옵션의 값을 배열 대신 객체로 변경하고 각 Props 데이터의 상세 내용을 지정해주면 됩니다. type 데이터 타입을 정의합니다. default 해당 Props 가 들어오지 않을 경우 사용할 기본값을 가지게.. 2022. 1. 8. Vue3 ) watch 와 watchEffect watch?? watch 는 개발자가 코드로 지정한 변수값의 변화를 감시하여 콜백함수로 하여금 부가적인 작업을 할 수 있도록 해줍니다. watch 는 지정된 특정한 변수의 감시와 더불어 값이 변경되기 이전 값을 참조할 수 있다는 장점이 있습니다. 컴포넌트가 생성되어 변수가 할당되기 전에 모든 변수는 null 값을 가지고 있습니다. 이 후 변수의 초기값이 들어가게 되는데, watch는 기본적으로 이러한 null값에서 초기값으로 넘어가는 과정을 데이터의 변경으로 판단하지 않습니다. 일반적으로 이 값을 바라볼 일은 없지만 같은 컴포넌트를 다시 불러올 때 props 의 처음 값이 매우 중요할 때가 있습니다. 이런 경우에는 immediate 옵션을 true로 설정해주면 처음 값도 볼 수 있습니다. 아래의 예시코드.. 2022. 1. 8. Vue 3 ) 뷰 라이프사이클의 변경?! Vue Component LifeCycle ( 생명주기 ) Vue 공식문서를 살펴보던 중 기존의 LifeCycle 과 다르게 destory 부분이 없어지고 새로운 LifeCycle 요소가 생긴 것을 확인할 수 있었습니다. 그래서 새롭게 바뀌어진 Vue LifeCycle 에 대해 정리하는 글을 쓰고자 했습니다. LifeCycle 이란? 컴포넌트를 생성하여 DOM 노드 트리에 마운트하고, 불필요한 엘리먼트를 제거하는 일련의 과정을 생명주기라고 합니다. Vue는 각 생명주기를 Hooking 할 수 있는 방법을 제공하는데 이를 LifeCycle Hook 이라고 합니다. Options API를 사용할 경우, 각 LifeCycle은 지정된 옵션 함수를 정의하여 Hooking 할 수 있습니다. LifeCycle은 어.. 2022. 1. 8. Vue ) 이벤트 수식어 v-on 디렉티브가 제공하는 이벤트 수식어 이벤트 수식어 설명 .stop 이벤트 전파를 방지합니다. stopPropagation() 과 동일 .prevent 브라우저의 기본 동작을 금지합니다. preventDDefault() 와 동일 .capture 이벤트리스너의 capture 옵션을 활성화시킵니다. .self 이벤트가 자식 엘리먼트가 아닌 현재 엘리먼트에서 발생했을 때만 핸들러를 호출합니다. .once 최대 한번의 클릭만 허용합니다..once.prevent 와 같이 사용하면 처음 클릭 시 태그의 본연 기능을 방지하고 원하는 기능을 실행시킬 수 있습니다. .passive 이벤트리스너의 passive 옵션을 활성화시킵니다. .exact 정확히 해당 키만 눌렀을 때 핸들러를 호출합니다. "@click.ctr.. 2022. 1. 8. 이전 1 ··· 3 4 5 6 7 다음 반응형
