일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 싸피
- QuerySetAPI
- git
- SSAFY
- 머신러닝종류
- 백준
- Javascript
- PWA
- VITE
- 리액트
- 싸피10기
- SSAFYcial
- 14658
- js
- 알고리즘
- 데코레이터
- SQL
- queryset
- db
- unionfind
- 싸피셜
- vitepwa
- Django
- 플로이드워셜
- Python
- react
- pwa적용하기
- sqld
- 셀프넘버
- TypeScript
- Today
- Total
목록분류 전체보기 (163)
Meme's IT
Vue의 스타일 가이드는 우선순위별로 단계가 나뉨, 우선순위 A는 필수 → 안 지키면 오류가 남 v-for에는 key사용하기 v-for과 v-if 같이 쓰지 말기 등등...
![](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/RCKi0/btszDTGjTZG/ysLGL0GFCfx4yTMOfVcDvk/img.png)
# Locust란? 오픈 소스 부하 테스트 도구 즉, 내가 만든 서버에 많은 사용자들이 동시에 들어올 때 어떤 일이 벌어지는 지를 확인하는 도구 사용법은 공식문서 참고 // 공식문서 예시파일 import time from locust import HttpUser, task, between class QuickstartUser(HttpUser): wait_time = between(1, 5) @task def hello_world(self): self.client.get("/hello") self.client.get("/world") @task(3)# 3은 가중치, 위에꺼랑 1:3의 비율로 실행됨 def view_items(self): for item_id in range(10): self.client.g..
![](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..