[Vue.js] 미니프로젝트:로그인 처리 - 구글 아이디로 로그인하기(X 나중에합시다 이건)
네이버 아이디로 로그인 하기 위해서는
Login 컴포넌트를 구현하자. views 폴더 밑에 Login.vue 파일을 생성하고 router -> index.js에 path: ‘/kakaologin’으로 KakaoLogin.vue를 추가한다.
카카오 계정으로 로그인 하기
프로젝트 빌드(build) 하기 터미널에서 다음 명령어를 실행해서 배포 파일을 생성한다.
Vuex란? 복잡한 애플리케이션에서 컴포넌트의 수가 많이지면 컴포넌트 간의 데이터 전달이 어려워진다. Vuex는 Vue.js 애플리케이션을 위한 상태관리 패턴 + 라이러브러이다. 모든 커포넌트에 대한 중앙집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.
프로젝트에서는 클라이언트인 Vue 애플리케이션과 서버 애플리케이션을 분리해서 개발하고 각각을 별도의 포트로 운영하게 되는 경우가 많다. 이렇게 클라이언트와 서버 애플리케이션 별도의 포트를 사용하는 경우 클라이언트 애플리케이션에서 서버로 HTTP 요청을 하게 되면 CORS 문제가 발...
앞에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 하는 경우 props를 사용하면 된다는 것을 공부했다. 그런데 만약 컴포넌트 계층 구조가 복잡하게 얽혀 있어서 부모 컴포넌트로부터 자식 컴포넌트, 그리고 그 자식 컴포넌트의 자식 컴포넌트로 데이터를 전달하는 경우가 발생하면...
부모 컴포넌트에서 자식 컴포넌트의 이벤트 직접 발생시키기 부모 컴포넌트에서 자식 컴포넌트의 버튼을 클릭하는 이벤트를 만들어보자
컴포넌트 안에 다른 컴포넌트 넣기
서버와의 데이터 통신을 위한 API 호출 메소드 만들기
Mokc 서버란 실제 서버처럼 클라이언트로부터 요청을 받으면 응답하는 가짜 서버를 말한다. 실제 Vue 프로젝트에서는 모든 데이터를 서버로부터 받아오기 때문에 가짜 서버인 Mock 서버를 준비해서 실제처럼 api를 호출해서 데이터를 받아와 Vue에서 사용하자.
conputed와 watch
클릭 이벤트(v-on:click) 클릭 이벤트틑 v-on:clock=”메소드명” 혹은 @click=”메소드명”을 사용해서 추가할 수 있다.
Vue 컴포넌트에서 조건에 따라 랜더링을 하는 방법은 v-if 디렉티브와 v-show 디렉티브를 사용하는 방법이 있다.
데이터 바인딩 Vue는 Angular와 마찬가지로 양방향 데이터 바인딩을 지원한다. 양방향 데이터 바인딩이란 모델에서 데이터를 정의한 후 뷰와 연결하면 모델과 뷰 중 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 반영되는것을 말한다.
컴포넌트란? 컴포넌트란 한 마디로 View, Data, Code의 세트라고 생각하면 된다. 컴포넌트 안에는 HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 JS코드 그리고 데이터가 존재한다. 컴포넌트의 가장 큰 특징은 재사용이 가능하다는 것이다. 즉, 한번 만들어둔 컴포넌...
라우팅이란?
Vue CLI로 Vue 프로젝트 생성하기 vue 프로젝트 생성에는 크게 3가지 방법이 있다.
Vue 기초 / 환경세팅
Vue 기초 / 인스턴스 생성
웹접근성 웹 접근성이란 한국웹접근성인증평가원에서는 ‘정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.’ 라고 ...