일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 데코레이터
- 14658
- 리액트
- Javascript
- 머신러닝종류
- pwa적용하기
- 플로이드워셜
- 싸피10기
- 백준
- TypeScript
- js
- SSAFYcial
- 싸피셜
- vitepwa
- git
- queryset
- sqld
- Python
- 알고리즘
- 셀프넘버
- QuerySetAPI
- 싸피
- VITE
- SSAFY
- db
- unionfind
- Django
- react
- SQL
- PWA
- Today
- Total
목록FrontEnd (64)
Meme's IT
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GudeG/btszX0L3vZG/6xZJ5rLEnuItlLwZBOTY2k/img.png)
부모 컴포넌트는 자식에게 데이터를 전달할 수 있지만, 반대로는 불가능했다... 그러면 어떻게 소통을 시킬 수 있을까? → 일어난 일(event)는 알릴 수가 있음! 즉, 자식은 자신에게 일어난 일을 부모에게 알리고(Emit Event), 부모가 prop 데이터를 변경하도록 해야한다 # emit( ) 자식 컴포넌트가 이벤트를 발생시켜 부모 컴포넌트로 데이터를 전달하는 역할 한번 해보자! 첫번째로 자식 컴포넌트에서 버튼을 하나 만들어준다 눌러봐요 그다음에 부모 컴포넌트에서 template 부분에 자식 태그에 추가를 해준다 이벤트를 받았을 때 어떤함수를 실행할건지를 써준다 그리고, script에 함수를 정의해준다 const myCallback = function () { console.log('와아!') } ..
![](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라는 빌드 도구를 사용한다