일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- js
- PWA
- 14658
- 알고리즘
- vitepwa
- 싸피셜
- 머신러닝종류
- 플로이드워셜
- TypeScript
- QuerySetAPI
- pwa적용하기
- Python
- 셀프넘버
- sqld
- 싸피
- Javascript
- react
- unionfind
- db
- VITE
- Django
- 백준
- SSAFYcial
- 리액트
- 싸피10기
- 데코레이터
- queryset
- SSAFY
- git
- SQL
- Today
- Total
목록분류 전체보기 (163)
Meme's IT
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/6UOxx/btsz3bSWzfd/ZGK2YwhrDpkVx9ffKeqbKK/img.png)
# Routing이란? 네트워크에서 경로를 선택하는 프로세스 웹 애플리케이션에서 다른 페이지 간의 전환과 경로를 관리하는 기술 장고 → 뷰가 되면서 주체가 서버에서 클라이언트로 바뀜 즉, 페이지 간의 전환이 없어지면서 페이지가 한 개지만 링크에 따라 여러 컴포넌트를 렌더링해서 여러 페이지를 사용하는 것처럼 느끼도록 해야함 만약, routing이 없다면 URL을 통한 페이지의 변화를 감지할 수 없음 새로고침하면 처음 페이지로 돌아감 뒤로가기 기능을 쓸 수 없음 # vue에서 Router 써보기 Vue Router = 뷰의 공식 라우터 공식문서 웬만하면 영어로 보는걸 추천 하지만 우리는 Vite를 쓰니까 좀더 편하게 가능! 처음에 프로젝트 만들 때, 네모친 부분만 Yes로 바꿔주면 바로 router 사용 가..
![](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라는 빌드 도구를 사용한다