지금, 개발하기82 [CSS] Flexbox 한 방에 정리하기! 가변적인 레이아웃을 손쉽게 만들고 정렬하기 위해 꼭 알아야 할 개념이 바로 플렉스박스(Flex Box)입니다. 이번 장에서는 플렉스박스에서 사용하는 기초 용어와 사용법을 쉽고 간단하게 정리해 보았습니다.* 이 CSS의 레이아웃 기술 중 하나로, 공식명칙은 Flexible Box Layout이며, 일반적으로는 FlexBox라고 줄여서 부릅니다😊 📌1. 기초 용어1) 플렉스 컨테이너(flex container) , 플랙스 아이템(flex items)플렉스 컨테이너는 부모 요소를, 플렉스 아이템은 그 안에 포함된 자식 요소들를 의미합니다. 부모 요소를 플렉스 컨테이너로 설정하면, 내부의 자식 요소들은 자동으로 플렉스 아이템이 되어 유연하게 크기와 위치가 조정되는 구조로 작동합니다.2) 주축(Main Axi.. 2025. 6. 15. [Vue.js] compositionAPI에서 watch사용법 📌1. Composiotion API의 감시자 Vue.js에서 'watch'는 특정 데이터의 변화를 감지해서 원하는 코드를 실행해주는 기능입니다. 주로 API 호출, 데이터 유효성 검사 등 특정 데이터가 변경되자마자 어떠한 작업을 수행하려는 경우에 유용하게 사용됩니다. Vue3의 CompositonAPI에서는 감시자로 watch와 watchEffect를 사용할 수 있는데요, 이번 글에서는 watch()함수의 사용법을 하나씩 알아보도록 하겠습니다. 📌 2. watch 사용법 watch(source, (newValue, oldValue) => { ........ }); 1) 첫번째 인자: 감시하려는 소스 ① ref - ref를 사용하는 반응형 데이터 ② reactive - reactive의 getter함수를.. 2024. 4. 21. [Vue.js] compositionAPI에서 computed 사용법 📌1. Computed 속성이란? Computed 속성은 간단한 계산을 수행해주는 반응형 속성을 의미합니다. computed를 사용하면 데이터가 변경될 때마다 자동으로 업데이트 해주기 때문에 동적으로 변하는 데이터를 효율적으로 처리할 수 있습니다😉 또한, computed 속성은 데이터가 변경되지 않는 한, 한번 계산된 값을 들고있다가 필요할 때마다 재사용합니다. 이는 불필요한 계산을 방지해서 성능을 향상시켜 줍니다. 📌 2. Composition API에서 computed를 사용하기 Composition API에서도 계산된 속성과 동일한 기능을 computed 함수를 이용해서 작성할 수 있습니다. computed 속성은 함수로 정의되지만, 속성처럼 접근할 수있어서 계산된 값을 쉽게 가져올 수 있습니다. .. 2024. 4. 20. [Vue.js] 반응성(reactivity)를 가진 상태 데이터 만들기 📌1. Compositoin API에서 ref, reactive를 사용하는 이유? Vue.js Composition API에서는 Options API와 달리 반응 상태 데이터를 수동으로 생성해야 합니다. Options API에서는 data옵션에 선언된 데이터들을 Vue가 자동으로 반응형으로 만들어줍니다. 자동으로 반응성이 주입되기때문에 프로세스가 단순해 진다는 장점이 있지만, 복잡한 구성요소 논리를 처리할때는 제한이 생길 수도 있습니다. Composition API는 이러한 단점을 극복하고 효과적으로 상태를 관리하기위해 반응성을 명시하도록 바뀌었는데요. ref 또는 reactive를 사용하여 상태 데이터를 명시적으로 선택할 수 있게되었습니다. 반응성을 직접관리해야해서 사전 작업이 조금 더 필요할 수 있지.. 2024. 4. 19. 이전 1 2 3 4 ··· 21 다음
