일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 데코레이터
- 싸피
- 플로이드워셜
- TypeScript
- 싸피셜
- Django
- SSAFYcial
- 리액트
- pwa적용하기
- 셀프넘버
- react
- db
- unionfind
- 백준
- QuerySetAPI
- SQL
- 싸피10기
- 알고리즘
- js
- Javascript
- queryset
- sqld
- PWA
- git
- VITE
- vitepwa
- SSAFY
- Python
- 14658
- 머신러닝종류
- Today
- Total
목록FrontEnd/Vue (28)
Meme's IT
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/peG1a/btszZmGXIAV/RtmIIV7ovekK0bw9RFBJ3K/img.png)
페이스북이나 인스타 같은 소셜 페이지에서 내 프로필 사진이 여러번 반복되는 것을 볼 수 있다 같은 데이터가 한 화면의 다양한 위치에서 여러번 출력될 때, 각 컴포넌트에서 그런 데이터를 다 따로 관리하는 걸까? → 공통된 부모 컴포넌트에서 관리! 근데 그걸 어떻게 각각의 컴포넌트에 전달할까? = Passing Props방식 # One-Way Data Flow 컴포넌트가 부모/ 자식의 관계를 가질 때 두가지 방식으로 데이터 / 이벤트를 전달한다 1. Pass Props: 부모 -O→ 자식 부모는 자식에게 데이터를 전달할 수 있음 2. Emit Event: 자식 -X→ 부모 자식은 부모에게 일어난 일을 알림 데이터를 직접 전달하는 것은 불가능 위와 같이 한 방향(부모 → 자식)으로만 데이터가 전달되는 것을 O..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/1m0GF/btszOOY9YUy/m8EpgNlNrRgnNckgwuiEf0/img.png)
같은 로직을 수행시켰을 때, 어떤 방법을 쓰냐에 따라서 시간이 다 다른데 vue가 가장 빠르다 → Virtual DOM을 사용하기 때문에 JS, DOM 조작: DOM 트리를 전부 다시 그림 Virtual DOM: 변경이 끝난 후, 변경된 부분만 다시 변경하므로 더 빠름! # Virtual DOM이란? 가상의 DOM을 메모리에 저장하고 실제 DOM과 동기화하는 프로그래밍 개념 실제 DOM과의 변경 사항 비교를 통해 변경된 부분만 실제 DOM에 적용하는 방식 웹 애플리케이션의 성능을 향상시키기 위한 Vue의 내부 랜더링 기술 내부 랜더링 과정은 공식문서 참고 장점 효율성: 실제 DOM 조작을 최소화하고, 변경된 부분만 업데이트하여 성능을 향상 반응성 : 데이터의 변경을 감지하고 Virtual DOM을 효율적..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cwz6wd/btszLofEERI/2WBHgAG7LETHg2khk19Wt1/img.png)
# Compenent 사용해보기 1. 컴포넌트 파일 생성 (1) 초기에 생성된 모든 컴포넌트 삭제 (App.vue는 초기화해줌) App.vue (2) src/components 안에 myComponent.vue파일 생성 myComponent 2. 컴포넌트 등록해보기 (1) App.vue에 myComponent를 등록 App.vue App(부모) - myComponent(자식) 관계 형성 @ = 'src/' 경로를 뜻하는 약어 3. 재사용 해보기 (1) myComponentItem.vue 만들기 my component item (2) myComponent에 등록해주기 myComponent Component의 이름을 지을 때는 규칙을 따라서 하는 것이 권장된다 이름 규칙은 공식문서의 스타일 가이드를 참고
# Module이란? 프로그램을 구성하는 독립적인 코드 블록(.js 파일) 쓰는 이유? → 개발하는 애플리케이션의 크기가 커지고 복잡해지면서 파일 하나에 쓰기가 어렵다 근데, 나눠서 쓰니까 모듈 간의 의존성(연결성)이 깊어지면서 문제가 생기면 어딘지 찾기 힘듬 → 번들러를 사용 그럼.. # Bundler란? 여러 모듈과 파일을 하나(혹은 여러 개)의 번들로 묶어 최적화해주는 도구 의존성 관리, 코드 최적화, 리소스 관리 등의 역할을 한다 Vite에서는 Rollup이라는 번들러를 사용, 사용자가 신경쓰지 않도록 설정되어있음
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/C9iXr/btszSLt4kRW/HQnHnc72bEf3iZ1PnkZtRK/img.png)
# Vite 프론트엔드 개발 도구 공식 문서 참고, Vue 공식문구에서 설치 방법 확인 npm create vue@latest 뜨는 옵션들은 No로 우선 통일 cd vue-project/ npm install 자동으로 생긴 vue-project 위치로 가서 설치 npm run dev 이후 뜨는 로컬 주소를 통해 서버를 킬 수 있다 # npm = Node Package Manager Node.js의 기본 패키지 관리자 (=pip랑 같은 역할) Node.js가 뭔데? → Chrome의 V8 JavaScript 엔진을 기반으로 하는 Server-Side 실행 환경 즉, 브라우저에서만 쓸 수 있었던 JS를 서버에서도 쓸 수 있도록 해줌 프론트엔드와 백엔드가 같은 언어로 개발할 수 있게 됨 한번 써볼까 1. 아까..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/boxogP/btszU3U3d6Z/SBSX2GcbseMVtf91itLDoK/img.png)
# Component란? = 재사용 가능한 코드 블록 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있음 → 앱은 중첩된 component의 트리로 구성이 된다 예를 들어, 네이버 뉴스를 보면 각각의 기사 요소들은 컴포넌트는 다 똑같고 안에 컨텐츠만 다름 → 재사용이 됨 = 컴포넌트 기반의 개발 # Single File Component는? 컴포넌트의 템플릿(HTML), 로직(JS) 및 스타일(CSS)을 하나의 파일로 묶어낸 특수한 파일 형식(.vue파일) 즉, 파일 1개 = 컴포넌트 1개 ◼ SFC의 문법 크게 , , 컴포넌트 확인하는 법 → 공식문서의 playground로 테스트 가능 실제 프로젝트에서는 Vite라는 빌드 도구를 사용한다
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에 등록된 콜백 함수들을 인스..