일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 백준
- unionfind
- QuerySetAPI
- 머신러닝종류
- Django
- 셀프넘버
- VITE
- 14658
- js
- sqld
- git
- 알고리즘
- Javascript
- queryset
- 플로이드워셜
- vitepwa
- 싸피셜
- db
- pwa적용하기
- Python
- 싸피
- TypeScript
- 싸피10기
- SSAFYcial
- 리액트
- SSAFY
- SQL
- PWA
- 데코레이터
- react
- Today
- Total
목록FrontEnd (64)
Meme's IT
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/1ksWA/btszK7dF5ba/GNEm36q4iY1G8eunVefX50/img.png)
# Lifecycle Hooks Vue 인스턴스의 생애주기동안 특정 시점에 실행되는 함수 특정단계에서 의도하는 로직이 실행될 수 있도록 한다 Vue 인스턴스의 생애주기 = createdApp에서부터 메모리에서 삭제될 때까지의 과정 예시1: onMounted onMounted(() => { console.log('mounted') }) 이렇게 하면 콘솔에 mounted가 찍힘 왜? → 얘는 app에 mount될 때(app.mount('#app')) 자동으로 호출됨 예시2: onUpdated onUpdated(() => { message.value = 'updated!' }) 얘는 DOM요소가 수정될 때마다 message를 updated!로 수정 특징 Lifecycle Hooks에 등록된 콜백 함수들을 인스..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sczM2/btszM2Craj0/tGCIVO4cADNhbkWfFeeOok/img.png)
# watch() 반응형 데이터를 감시하고 감시하는 데이터가 변경되면 콜백 함수를 호출 computed랑 비슷한 역할 구조 const countWatch = watch(count, (newValue, oldValue) => { consol.log(`newValue : ${newValue}, oldVlaue: ${oldValue}`) }) 이런 형식으로 쓴다 예시: message를 입력할 때마다 길이를 알려주기 const message = ref('') const messageLength = ref(0) const messageWatch = watch(message, (newValue, oldValue) => { messageLength.value = newValue.length }) watch는 자동으로..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Lid7r/btszTx9st5r/Agcy9kYaXq7C7Qf5kMEgzK/img.png)
# v-for 소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러번 렌더링 구조는 "alias(별칭) in expression"의 형식 인덱스에 대한 별칭을 지정할 수 있음 {{ item.text }} 객체에서는 갯수에 따라 순서가 정해져있음 1. 배열에서 v-for {{ index }} // {{item.name}} 2. 객체에서 v-for {{ index }} / {{ key }} / {{ value }} 3. template에서 v-for 여러 요소를 한번에 반복하려면 template을 이용 → 포장해주자 {{ item.name }} {{ item.age }} 4. 중첩 v-for 각 v-for 범위는 상위 범위에 접근 가능 const myInfo = ref([ { name: 'Alice', ag..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/t80tq/btszK8wBEkD/IvUvDcF65UMGjzNEk2x6Z1/img.png)
# v-if 표현식 값의 true/ false에 따라 요소를 조건부로 렌더링 v-else도 같이 쓸 수 있음 한번 써보기 const isSeen = ref(true) true일때 보여요 false일때 보여요 토글 v-else-if도 사용 가능 Alice입니다 Bella입니다 Cathy입니다 아무도 아닙니다. v-if는 directive이므로 단일 요소에만 연결 가능 여러개에 쓰려면 template요소에 v-if사용 Cathy입니다 나이는 30살입니다 template 요소가 뭔데? 페이지가 로드될 때 랜더링되지 않았지만 JavaScript를 사용하여 나중에 문서에서 사용할 수 있도록하는 HTML을 보유하기위한 메커니즘 보이지 않는 wrapper역할을 함 근데, 비슷한 녀석이 하나 더 있음 # v-show ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cGGgj2/btszJ0TEvU0/w6fMsCfHOqYEy22hCPrC81/img.png)
# Computed() 계산된 속성을 정의하는 함수 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고, 불필요한 반복 연산을 줄인다. 예를 들어, {{ todos.length > 0 ? '아직 남았다' : '퇴근!' }} 이런식으로 todos라는 object의 길이에 따라 메세지를 출력할 때, todos의 length를 계속 계산하게 됨 만약 이 계산을 템플릿에서 계속 쓴다면 복잡해짐 → 미리 계산을 해두고, 계속 가져오자 ▶ 그때 쓰는게 computed! 한번 computed로 바꿔볼까 const { createApp, ref, computed } = Vue computed를 쓰기 위해 가져오고 const restOfTodos = computed(() => { return todos.val..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BFQ82/btszClKcOF4/kqJSE9pk76nPco60jz0ogK/img.png)
Vue를 이용해서 TodoList를 만들어보자 0. 사전준비 작성하기 편하게 html과 js을 분리해준다. html에는 기본적인 형식과 vue의 cnd을 넣어주고, js에는 기본적인 틀을 만들어준다. const { createApp,ref } = Vue const app = createApp({ setup() { return { } } }) app.mount('#app') 1. Todo 항목 추가하기 해야하는 일을 담을 todos라는 배열과 새롭게 추가할 newTodo라는 항목을 만들어준다. 그리고 newTodo를 todos에 추가해줄 addTodo 함수도 정의해준다. (return에 추가하는건 생략) const todos = ref([]) const newTodo = ref('') const addTo..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bqrkfl/btszAZ0VB0o/bBjBdbPLc8876jaZqurPsK/img.png)
# Form Input Bindings form을 처리할 때 사용자가 input에 입력하는 값을 실시간으로 JavaScript 상태에 동기화해야하는 경우 = 양방향 바인딩 하는 방법? 1) v-bind와 v-on 함께 사용 2) v-model 사용 1) v-bind와 v-on 함께 사용 v-bind: input 요소의 value 속성 값을 입력 값으로 사용 v-on: input 이벤트가 발생할 때마다 input 요소의 value 값을 별도 반응형 변수에 저장하는 핸들러 호출 const inputText1 = ref('') const onInput = function (event) { inputText1.value = event.currentTarget.value } {{inputText1}} → 근데 너..
# v-on DOM 요소에 이벤트 리스너를 연결 및 수신 = addEventListener를 부착한거 v-on도 @로 대신 써도 됨 v-on:event="handler" @event="handler" handler의 종류 Inline handlers: 이벤트가 트리거될 때 실행 될 JavaScript 코드 Method handlers: 컴포넌트에 정의된 메서드 이름 1.lnline handlers 간단한 이벤트를 처리할 때 사용됨 const count = ref(0) Add 1 2. Method handlers Inline으로 불가능할 때(함수가 너무 길 때) const name = ref('Bok') const myFun = function (event) { console.log(`hello, ${na..