My own universe

IceMan

될 때 까지 하는 개발자 입니다.

전체보기 (257)
  • • 일상의 순간
  • └ 여행 (0)
  • └ 맛집 (2)
  • └ 카페 (0)
  • └ 운동 (0)
  • • 프로그래밍
  • └ HTML (8)
  • └ CSS (13)
  • └ React Js (59)
  • └ Next.js (14)
  • └ Node Js (4)
  • └ JavaScript (27)
  • └ TypeScript (24)
  • └ Vue3 (18)
  • └ Linux (4)
  • └ Postgresql (28)
  • └ Java (28)
  • └ Git (3)
  • └ 기타 (25)
  • • 잡담
  • └ 끄적끄적 (0)
example

non-prop

iceMan
|
2025 01 2000
정의- non-prop: class, id, style, v-on이벤트 리스너 등등.- 자식 컴포넌트에서 props, emits에서 명시적으로 선언되지 않은 모든 속성은 자동 상속
example

custom component v-model 적용하기

iceMan
|
2025 01 1400
정의- 사용자가 생성한 컴포넌트에서 양방향 바인딩(v-model) 사용 방법을 정리.- modelValue, update:modelValue라는 고정된 이름을 사용.- 수식어 적용
example

defineEmits

iceMan
|
2025 01 1400
정의- composition api <script setup> 태그 내에서 부모 컴포넌트의 사용자 정의 이벤트를 발생 시키는 함수.- 부모 컴포넌트에서는 v-on 디렉티브에 해당
example

defineProps

iceMan
|
2025 01 1400
정의- composition api <script setup> 태그 내에서 props를 전달 받는 함수.- 반드시 하나의 defineProps만 선언할 수 있음.사용예시1. 단순
example

nextTick(dom 업데이트 이후 실행될 콜백)

iceMan
|
2025 01 0800
정의- 특정 반응형을 업데이트하면 dom이 업데이트 되는데, dom이 업데이트 완료되면 실행되는 비동기 함수이다.-  비동기 함수이므로 promise, async 문법을 지원한다.
example

watchEffect

iceMan
|
2025 01 0700
정의- watch와 비슷하나 명시적인 종속성이 없고, 콜백 함수만 사용.- 콜백 함수에 작성된 반응형 종속성이 변경되면 실행.- immediate: true가 자동으로 적용되어있음
example

watch

iceMan
|
2025 01 0700
정의- vue3의 watch api를 정리- 리액트의 useEffect와 기능이 매우 흡사함.- 종속성 반응형 값이 변경 될 때마다 내부 콜백함수 실행. (콜백함수 내부 반응형 값
example

select binding (v-model)

iceMan
|
2025 01 0600
정의- vue3에서 form select binding 방법에 대해서 정리.사용예시- 초기값 세팅이 필요없으면 :value 바인드가 반드시 필요한건 아님.- :value바인드가 없
example

textarea binding (v-model)

iceMan
|
2025 01 0600
정의- vue3에서 form textarea binding 방법에 대해서 정리.사용예시- input type='text'와 완전 동일.- value를 자식 요소로 감싸지 않아도 됨
example

input binding (v-model)

iceMan
|
2025 01 0600
정의- vue3에서 form input binding 방법에 대해서 정리.- 양방향 반응형인 v-model 정리.- 초기값 설정을 하지않으면 :value바인드가 없어도 됨.- 공식
example

이벤트 처리

iceMan
|
2024 12 3100
정의- v-on 디렉티브를 사용해 이벤트를 처리하고 단축 표현으로 @만 붙여서 사용 가능.- 수식어를 붙여서 불 필요한 로직을 최소화 할 수 있음.- 이벤트 핸들링 공식 문서사용예
emptyImg

내장 directive

iceMan
|
2024 12 3000
디렉티브는 아래 공식문서 참고.디렉티브 공식문서
example

반복문(v-for)

iceMan
|
2024 12 3000
정의- 반복문 사용을 정리.사용예시- in 연산자를 통해 배열을 반복하여 태그를 화면에 그린다.- in 연산자 기준 왼쪽은 배열, 오른쪽은 순서대로 출력되는 배열의 속성이다.- 왼
example

조건부 렌더링 (v-if, v-show)

iceMan
|
2024 12 3000
정의- 특정 조건에 따라 컴포넌트의 렌더링 하는 방법을 정리.1. v-if- dom에서 완전히 제거되었다가 사라짐.- 최초 렌더시 조건이 false이면 dom에 그려지지않음.- v
example

inline style 바인딩

iceMan
|
2024 12 3000
정의- 인라인 스타일 적용에 대한 정리.1. 태그에 직접 작성- 스타일을 직접 적용하고, 스타일명은 카멜케이스로 작성한다.- 리액트 처럼 숫자만 넣으면 안되고 반드시 문자형 20p
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • >
  • >>
본 웹사이트는 개인이 작성한 포트폴리오 입니다. 디자인 및 이미지 무단 복사를 금지합니다.
Image by mamewmy on Freepik