Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/twilight92/vue-perfect-guide

[Vue.js] Maximilian의 Vue 완벽 가이드 #유데미
https://github.com/twilight92/vue-perfect-guide

vanillajs vuejs

Last synced: about 2 months ago
JSON representation

[Vue.js] Maximilian의 Vue 완벽 가이드 #유데미

Host: GitHub
URL: https://github.com/twilight92/vue-perfect-guide
Owner: twilight92
Created: 2024-08-14T15:16:38.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-11-06T14:52:45.000Z (about 2 months ago)
Last Synced: 2024-11-06T15:41:24.623Z (about 2 months ago)
Topics: vanillajs, vuejs
Language: Vue
Homepage:
Size: 874 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Vue - 완벽 가이드 (Router 및 Composition API 포함)



## What I Learned

- [x] VueJS는 무엇이고 사용 목적은?

- [x] 기초 개념(기본 구문, 템플릿 이해 등 포함!)

- [x] 반응형 데이터를 출력하고 이벤트를 수신하는 방법

- [x] DOM과 상호작용하기(목록 렌더링, 조건부로 요소 연결/분리 등)

- [ ] 개발 환경 및 워크플로우 설정하기

- [x] 컴포넌트 사용하기(컴포넌트의 정의 포함)

- [x] Vue 내부 심층 분석

- [ ] 양식 입력에 바인딩하기

- [ ] 백엔드 API에 HTTP 요청 보내기

- [ ] Vue에서의 인증

- [ ] 애니메이션과 전환으로 앱을 더 아름답게 만드는 방법

- [ ] 라우팅을 사용하여 멋진 싱글 페이지 애플리케이션(SPA)을 만드는 방법

- [ ] Vuex를 통한 상태 관리 개선 방법

- [ ] 앱 배포 방법




## Todo

- [Vue 내부 들여다보기](https://github.com/twilight92/vue-perfect-guide/wiki/%EC%84%B9%EC%85%98-5:-Vue-%EB%82%B4%EB%B6%80-%EB%93%A4%EC%97%AC%EB%8B%A4%EB%B3%B4%EA%B8%B0)

  - [x] Proxy를 이용한 Vue 반응성 심층 분석

  - [x] 여러 개의 Vue 앱 사용이 가능한지 알아보기

  - [x] Ref 이해

  - [x] Vue가 DOM을 업데이트하는 방법

- [컴포넌트 소개](https://github.com/twilight92/vue-perfect-guide/wiki/%EC%84%B9%EC%85%98-6:-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)

  - [x] 컴포넌트 이해하기

- Vue CLI를 사용하여 더 나은 개발 설정 및 워크플로우로 전환하기

  - [x] 개발 서버가 필요한 이유, 더 나은 개발자 경험이 필요한 이유 알아보기

  - [x] Vue CLI 설치 및 사용하기

  - [x] VS CODE에 "Vetur" 확장 프로그램 추가하기

  - [x] 설정 대안 알아보기

    - Vue CLI 설치/사용 대신 `npm init vue` 사용

    - Vetur 대신 Volar 확장 프로그램 사용

- [컴포넌트 통신](https://github.com/twilight92/vue-perfect-guide/wiki/%EC%84%B9%EC%85%98-8:-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%86%B5%EC%8B%A0)

  - [x] 프로퍼티(부모 => 자녀 통신)

    - 프로퍼티 작동 방식 및 변경

    - 프로퍼티 검증

    - 지원되는 프로퍼티

    - 동적 프로퍼티 사용하기

  - [x] 커스텀 이벤트 방출(자식 => 부모 통신)

    - 프로퍼티/이벤트 폴스루 및 모든 프로퍼티 바인딩

  - [x] Provide + Inject

    - Provide + Inject VS 프로퍼티 및 커스텀 이벤트

- [컴포넌트 자세히 알아보기](https://github.com/twilight92/vue-perfect-guide/wiki/%EC%84%B9%EC%85%98-9:-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%9E%90%EC%84%B8%ED%9E%88-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0)

  - [x] 전역/지역 컴포넌트

  - [x] 범위가 지정된(Scoped) 스타일

  - [x] 슬롯(Slots) 알아보기

  - [x] 이름이 있는 슬롯(Named Slots)

  - [x] 슬롯에 대한 추가 정보

    - `$slots`을 이용한 제공된 콘텐츠에 엑세스, 활용

    - v-slot 축약어 #(해시)

    - 범위가 지정된(Scoped) 슬롯

  - [x] 동적 컴포넌트

  - [x] 동적 컴포넌트를 활성 상태로 유지하기(keep-alive)

  - [x] 텔레포트(Teleport)를 활용하여 요소 이동

  - [x] 프래그먼트(Fragment) 활용

  - [x] Vue 스타일 가이드 살펴보기

  - [x] 폴더 정리

- [양식(Forms)](https://github.com/twilight92/vue-perfect-guide/wiki/%EC%84%B9%EC%85%98-11:-%EC%96%91%EC%8B%9D(Forms))

- [HTTP 요청 보내기](https://github.com/twilight92/vue-perfect-guide/wiki/%EC%84%B9%EC%85%98-12:-HTTP-%EC%9A%94%EC%B2%AD-%EB%B3%B4%EB%82%B4%EA%B8%B0)

- [라우팅(Routing)](https://github.com/twilight92/vue-perfect-guide/wiki/%EC%84%B9%EC%85%98-13:-%EB%9D%BC%EC%9A%B0%ED%8C%85(Routing)): "다중 페이지"가 있는 싱글 페이지 애플리케이션(SPA) 구축하기

- [Vuex](https://github.com/twilight92/vue-perfect-guide/wiki/%EC%84%B9%EC%85%98-15:-Vuex)