코딩 자율학습 Vue.js 프런트엔드 개발 입문 > 자유게시판

본문 바로가기


전국동기회


전국 | 코딩 자율학습 Vue.js 프런트엔드 개발 입문


페이지 정보

작성자 HELLO 작성일2024-10-02 20:39 조회161회 댓글0건

본문


SPA를 슬롯사이트 사용하기 위해서 여러 프레임워크, 라이브러리가 있습니다.
대표적으로 React, Vue, Angular, svelte 등이 주요 사용되어지는데,
Vue도 장정이 명확하고 많은 곳에서 사용중입니다.

저자분이 운영하시는 유트브와 사이트 입니다.
책에 있는 내용에 대해서 설명해주는 영상이 있어서 도움이 됩니다.




수코딩
수코딩은 현업 개발자가 직접 운영하는 코딩 교육 채널입니다. 누구라도 쉽게 코딩을 배울 수 있는 걸 목표로하고 있는 교육 채널이기 때문에 코딩을 한 번도 접해본 적 없는 비전공자분들도 이








수코딩 | 누구나 쉽게 배우는 온라인 코딩 슬롯사이트 스쿨
수코딩은 누구나 쉽게 코딩을 배울 수 있는 온라인 코딩 교육을 만들어갑니다. 대표자: 김기수 | 사업자번호: 208-26-67207 | 통신판매업신고: 2024-성남중원-0311 개인정보관리책임자: 김기수 | 이메일










혼자 쉽게 따라할 수 있는 환경을 만드는 것이 "코딩 자율학습" 시리즈에 컨셉에 맞게
설치환경 구성 및 내용 구성이 따라하기 쉽게 되어 있습니다.





■ Vue의 특징, 사용 문법
·가상 DOM
·양방향 데이터 바인딩
·장점
&nbsp- 간단한 설치, 낮은 학습 곡선, 공식한국어 문서 지원
·단점&nbsp- 커뮤니티 활용의 한계, 뚜렷한 후원체의 부재, 플로그인의 슬롯사이트 부재

&middotvue에 대해서 기본적인 동작 및 프로젝트 구성 방식에 대한 설명 및 해당 vue 프레임워크에서 어떠한 문법을 사용해서
원하는 기능을 적용할지 하나하나 실습 예제 코드를 통해서 쉽게 설명되어 집니다.
문법이 어렵지 않고, 쉽게 이해 할수 있습니다.





■ 실습 진행
&middot4장에서 외부 연동이 필요없이 자체 개발이 가능한 계산기 기능을 실습합니다.



프로젝트를 생성하고, 간단하게 CSS적용 방법도 알게 됩니다.
데이터 바인딩을 하고, 이벤트 연결을 하는 연습을 합니다.

·컴포넌트 개념 살펴보기
책에서는 vue3버전으로 컴포넌트를 설명합니다.
react에도 생명주기가 슬롯사이트 있듯이, vue의 컴포넌트를 사용하는 것도 생명주기가 있다.




컴포넌트는 재사용할수 있는 구성 요소를 쉽게 생성하는데 도움을 주는 강력한 도구인 슬롯(slot)기능을 지원합니다
- 이름이 없는 슬롯
- 이름이 있는 슬롯
- 혼합 슬롯
- 슬롯에 기본값 적용하기
- 동적 슬롯 이름
- 범위가 저정된 슬롯
등 slot을 적절하게 잘 이해하고 상용하기 위한 예제 코드 구성이 되어 있습니다.

&middotTO-DO 만들기
기본적인 동작을 가장 잘 설명하고 실습해볼수 있는 TO-DO를 통해서 아래와 같은 사항을 학습하고 코드적으로 적용해봅니다.
- html 슬롯사이트 구성요소를 어떻게 태그를 활용하는지 알수 있습니다.
- v-model 디렉티브 입력창과 양뱡향 데이터 바인딩을 합니다.
- data, computed, methods, props, emits, directive, components, event등 여러가지 vue의 핵심 문법을 사용합니다.





■ vue.js 고급 기술 익히기
기본적인 동작 방식 이후에, 조금더 다양한 기술을 적용해서 서비스에 활용해봅니다.
·컴포지션 API 다루기
·뷰 라우터로 라우팅 기능 사용하기
&middotPinia로 상태 관리하기
·데이터 통신하기

기본적으로 vue2와 vue3에서 사용하는 기술들에 대해서 조금 차이를 가지고 있습니다.
2버전에서는 옵션스 API를 사용하였는데, 3버전에서는 컴포지션 API로 슬롯사이트 추가된 기능을 사용합니다.
재사용 및 기능별 작성을 위해서는 컴포지션 API를 사용하는 방향으로 개발을 하는 것이 좋습니다.



·라우터에 대한 개념을 살펴보기
SPA페이지에서 자체적으로 라우팅 처리하는 방법을 제공하지 않습니다. 그래서 외부라이브러리를 이용해야 하는데, 뷰는 공식적인 라이팅 라이브러리인 vue router를 제공합니다.
- 라우터의 기능은 동적 경로 매칭, 매개변수 가져오기, 중첩경로, 이름이 있는 뷰등 라우터 기능을 활용하기 위한 여러 방식이 소개됩니다.
고급 기술로 내비게이션 가드를 통해서 특정 지점에서 라우트 전환을 가로채 사용자 슬롯사이트 정의 로직을 실행하는 훅을 제공합니다.
전역가드/ 라우트별 가드/ 컴포넌트 내 가드로 구별할수 있습니다.

&middotReact에서 zustand등 상태관리하는 방식이 어려가지가 있고, 다양한 라이브러리를 제공합니다.
vue에서는 Pinia를 통해서 상태관리를 처리하는 방식이 제공합니다.
vue2에서는 Vuex를 통해서 상태관리를 하지만, vue3에서는&nbsppinia를 통해서만 상태관리를 합니다.

vue를 통해서 처음 환경 구축을 생각하는 경우에서는 계속 최신 버전으로 릴리즈버전이 나오는 vue3를 사용하는 것이 추천됩니다.



·가장 많이 사용하게 되는 데이터 통신하기
우리는 서버에서 API를 호출해서 정보를 수신해서, 로직을 수행하는 개발을 가장 슬롯사이트 많이 하게 됩니다.
이러한 부분은 vue에서는 어떻게 구현을 하는지 중요합니다.
기본적으로 http메소드에 대해서, get, post, put, patch, delete 에 대한 부분
가장 많이 발생하는 cors 에러 해결방법등 기본적으로 학습이 필요한 부분이 있습니다.

통신으로 위해서 가장 많이 사용되는 Axios 라이브러리를 사용하는 것이 소개됩니다.

■ 최종적인 프로젝트 수행하기
·날씨 애플리케이션을 만들어보면서, 최종적인 vue의 기술을 적용 및 활용하는 프로젝트를 수행합니다.
html, css등은 제공되어서 vue의 로직에 집중할수 있습니다.



api의 경우에는 visual crossing weather api를 활용하는 슬롯사이트 방식으로 동적인 데이터를 받아올수 있게 구성합니다.

댓글목록

등록된 댓글이 없습니다.